Category: Web development

Snel en eenvoudig thumbnails genereren met timthumb

Bij zowat elke site loop je tegen het maken van thumbnails aan. Content managers moeten afbeeldingen uploaden en resizen. Dit gebeurt vaak uit tijdgebrek via de alom bekende WYSIWYG editor zoals TinyMCE. Hierdoor ziet de afbeelding er kleiner uit, maar qua bestandsgrootte blijft de afbeelding natuurlijk even groot.

Een PHP script die hier uitkomst kan bieden is timthumb, één van de meest eenvoudige en effectieve thumbnail generator scripts.

Het enige wat je hoeft te doen is het PHP-bestand van timthumb (hier te downloaden) aan te roepen met enkele parameters:

src - bron van de afbeelding
w - breedte van de afbeelding in pixels, bijv. 200
h - hoogte van de afbeelding in pixels, bijv. 100
q - kwaliteit van de afbeelding in procenten. Is standaard 75. Persoonlijk zet ik deze altijd op 100 (%).
zc - zoom crop. Zet op 1 om te zoomen en te croppen in plaats van alleen maar te resizen/croppen.

Een voorbeeld timthumb aanroep zou dan zijn:
< img src="timthumb.php?src=images/afbeelding.jpg&w=250&h=125&q=100&zc=0" alt="Afbeelding" / >
In het voorbeeld zal de afbeelding ‘images/afbeelding.jpg’ geresized worden, zonder te zoomcroppen, op 250×125 pixels. De kwaliteit is op 100% gezet.

Zoekmachine vriendelijk dankzij caching

Na de bekendmaking van Google dat snelheid van websites ook meetelt als ranking factor, is het erg belangrijk dat het maken van deze thumbnail niet teveel resources in beslag neemt. Gelukkig hebben de ontwikkelaars van timthumb een caching-mechanisme ingebouwd zodat het aanmaken van de thumbs niet elke keer hoeft te worden uitgevoerd. De thumbnails worden gecached en standaard opgeslagen in het mapje thumbs, in dezelfde map als het script. Denk erom dat je de map thumbs genoeg rechten geeft (chmod 777 op de map zou voldoende moeten zijn) zodat er ingeschreven kan worden.

Worden deze afbeeldingen wel geïndexeerd door zoekmachines?

Jazeker! Google indexeert gewoon de meegegeven parameters (de belangrijkste is in dit geval “src” en zorgt ervoor dat de afbeeldingen afzonderlijk geïndexeerd worden. Het is geen verkeerd idee om in Google Webmastertools in te stellen dat de andere parameters genegeerd worden: w, h, q en zc.

Deze vier parameters hebben geen meerwaarde voor de zoekmachines en zorgen ervoor dat de parameter “src” meer waarde krijgt, al is het waarschijnlijk maar een miniem verschil.

Eerlijkheidshalve moet ik wel toegeven dat het optimaler zou zijn om de afbeeldingen als ‘/afbeelding.jpg’ in de code te hebben staan i.p.v. ‘/timthubm.php?src=afbeelding.jpg’ maar het is altijd beter dan de bekende afbeelding-namen die via een hash gegenereerd zijn.

Conclusie

Timthumb is een uitstekende oplossing om snel en eenvoudig thumbnails te maken. Zelf heb ik het zowel in MODx als WordPress installaties gebruikt en tot zover geen problemen ondervonden. Een aanradertje!

Timthumb is gratis te downloaden op Google Code: http://code.google.com/p/timthumb/

WordPress als CMS en webshop

FRAGnSteinVoor bijna alle ‘normale’ sites maak ik gebruik van het MODx CMS. De laatste tijd overweeg ik echter ook steeds vaker WordPress als CMS. Het is natuurlijk vanuit de basis niet bedoeld als CMS en het is voor websites met een complexe navigatie en veel templates ook niet optimaal, maar voor websites met een groot sociaal aspect vind ik het een ideale tool, met alle plugins die beschikbaar zijn. Daarnaast hebben we sinds kort een nieuw soort site waarvoor we WordPress gebruiken: 1-product-shops.

Zo hebben we met Sterc een nieuw product in de markt gezet, een PS3 controller met muis. De site moest er knallend uitzien, de nadruk leggen op het product en een eenvoudig bestelformulier bevatten. Hiervoor hebben we een template ontwikkeld (met een eenvoudig bestelformulier) die we voor meerdere productsites gaan inzetten, naast de hierboven genoemde FRAGnStein shop.

FRAGnStein heb ik zelf ook getest overigens op mijn PS3, die ik voornamelijk gebruik als media server (echt een aanrader trouwens). Het is echt een verademing als je het vergelijkt met het spelen van een shooter met een controller. Richten hoort niet te gebeuren met een controller-pookje, maar met een muis, net als op de PC :) Modern Warfare 2 speel ik om die reden uitsluitend op de PC. Met Modern Warfare 3 zou dat zo maar eens op de Playstation 3 kunnen gaan gebeuren.