WordPress-Blog mit Thumbnails


Ein schöner und bewährter Weg, um Informationen ansehnlich aufzubereiten, sind Bilder. Doch wenn man zu viele davon hat, zieht es die Ladezeit einer Homepage schnell wie Kaugummi in die Länge. Erst recht, wenn man keine Thumbnails verwendet, sondern die Bilder in voller Größe einfach nur mit Angabe von width– und height-Attribut des HTML img-Tags skaliert.

Klingt nun nach einer ziemlich kruden Lösung, aber ich muss gestehen, dass ich bis gerade auch noch so gearbeitet habe! Grund dafür ist die doch eher mangelhafte Thumbnail-Funktion von WordPress. Sicherlich kann mir das CMS/Blogsystem automatisch kleine Vorschaubildchen in unzähligen Formaten generieren. Doch woher soll ich nun wissen, wie die Thumbnail-Datei zu dem großen Bild meines Blogeintrags heißt? Auch dass nicht automatisch das erste Bild meines Artikels als Post-Image verwendet wird, ist nicht gerade das gelbe vom Ei. Dies konnte ich vor längerer Zeit aber schon mit einem kleinen Trick lösen.

Nun wollte ich – zu Gunsten der Ladezeiten – auch mal dafür sorgen, dass für die Vorschau eines Artikels ein verkleinertes Bild erzeugt wird. Unter den offiziellen Plugins von WordPress bin ich leider nicht fündig geworden. Doch etwas Recherche brachte mich bei Webdemar auf TimThumb!

Dieses kleine PHP-Script erlaubt es mir, beliebige Thumbnails für meine Bilder zu erstellen. Dabei kann ich Größe, Qualität, ob beschnitten werden soll, oder nicht und wo das Beschneiden ausgerichtet wird angeben. Natürlich werden die erstellen Thumbnails gecached, so dass auch wieder ein Geschwindigkeitsvorteil entsteht, weil die Bilder nicht bei jedem Aufruf generiert werden müssen.
Auf die Details in der Handhabung gehe ich nun nicht weiter ein, da bieten Webdemar, die Projektseite bei Google und der BinaryMoon-Blog genug Infos.

Ich für meinen Teil bin begeistert, nun muss ich nur noch Gravatars in mein Theme einbinden, und meine ToDo-Liste ist erstmal abgearbeitet!

http://code.google.com/p/timthumb/
http://www.binarymoon.co.uk/category/web-design/timthumb/