TimThumb is een php script om automatisch images te rsizen, zonder dat je iets van een foto bewerkings programma nodig hebt. Een geweldig script als je het mij vraagt, zeker omdat ik nogal eens werk met WordPress installaties met een hoop gebruikers die allemaal kunnen posten, maar niks van beeldbewerking weten. Het gebruik van dit script is afhankelijk van het gebruik van “Custom Fields” in WordPress. Ben je hier niet bekend mee, kijk dan hier voor uitleg.

Ik zal proberen uit te leggen hoe dit in een WordPress omgeving te gebruiken.

Hoe ga ik dit script nu in mijn WordPress Theme verwerken? Volg het stappenplan hieronder en je zou uit de problemen moeten zijn.

Het ophalen en op zijn plek zetten van het script.

1. Download het timthumb.php script op de volgende locatie: download timthumb

2. Upload het script naar je WordPress installatie. Ik zelf zet het script graag in een subdirectory van mijn theme, genaamd “scripts”.

Je script zou dan op deze plaats bereikbaar moeten zijn:

domeinnaam.nl/wp-content/themes/jouw-theme/scripts/timthumb.php

3. In de “scripts” directory die je hebt aangemaakt in stap 2, maak je een nieuwe directory aan met de naam “cache”. Deze directory gebruiken we om de aangepaste images in op te slaan, zodat de images maar eenmalig hoeven te worden aangepast.

domeinnaam.nl/wp-content/themes/jouw-theme/scripts/cache/

4. Beide aangemaakt directories moeten schrijfbaar zijn voor de server, dus je moet deze chmodden naar 0777.

De eerste stappen zijn nu gezet. We hebben het script, de directories, nu gaan we zorgen dat je WordPress theme er ook gebruik van gaat maken.

WordPress theme klaar maken voor gebruik TimThumb.

1. Zoek de code op van de pagina waarin je het script wil gaan gebruiken. Ik neem even de index.php als voorbeeld, aangezien de kans dat je het hierin wil gaan gebruiken het grootste is.

Zoek binnen de “Loop” de code op waar je je images wil tonen. Voeg daar de volgende code toe:

ID, 'thumb', true) ) { ?>

		&h=150&w=150&zc=1" alt="" width="100" height="57" />

Ok, de code is klaar om gebruikt te worden. Nu moeten we nog een image en een “Custom Field” toevoegen aan onze post.

Toevoegen image via een Custom Field.

1. Open een post, of maak een nieuwe aan. Upload de image die je wil gebruiken. De grootte maakt nu dus niks meer uit. (De image moet natuurlijk niet kleiner zijn dan het uiteindelijke resultaat, dat wordt nooit mooi.)
2. Kopieer de waarde uit het veld “Link URL”. Deze gaan we zometeen plakken in een Custom Field.
3. Ga naar de Custom Fields onder je post.
4. Maak een nieuwe Custom Field aan met als naam “thumb”. De waarde is de url die je in stap 2 gekopieerd hebt. Deze kan je er gewoon in plakken.
5. Klik op “Add Custom Field”, zodat de waarde in de database wordt weggeschreven.
6. Bekijk je pagina en zie hoe mooi je image geresized is.

Het originele artikel waar ik dit idee vandaan heb: Chad Coleman.

Het TimThumb script zelf komt van Darren Hoyt, thnx Darren!

Kom je er niet uit, heb je vragen, schroom niet, post ze in de comments en ik zal zo snel mogelijk reageren.