Tutorial: Automatische Thumbnails mit TimThumb
Im Webdesign allgemein und in WordPress-Themes ist es sehr praktisch, automatische Thumbnails eines Fotos zu erstellen und es in der Größe an das Layout anzupassen. So kann man z. B. auf der Startseite einen Thumb anzeigen und im Post selbst eine Großansicht – und alles mit einer Bilddatei.
Das Ganze hört sich kompliziert an, ist aber dank nützlicher Open-Source-Skripte heller Köpfe relativ einfach in eine Website zu integrieren.
Besagtes Skript, das ich häufig zum Image-Resizing nehme, heißt TimThumb und wurde ursprünglich für das WordPress-Theme Mimbo Pro geschrieben und letztes Jahr als Open-Source-Projekt für jedermann zugänglich gemacht.
Dem Skript TimThumb muss man lediglich sagen, welche Datei bearbeitet und wie diese ausgegeben werden soll. Folgende Parameter stehen dafür zur Verfügung.
Parameter:
- w: width – Breite des Bildes
- h: height – Höhe des Bildes
- zc: zoom crop (0 oder 1) – Beschneidung des Bildes (wenn nötig)
- q: quality (default ist 75 und max ist 100) – Ausgabequalität
Anwendung
<img src="/skripte/timthumb.php?src=/img/bild.jpg&h=180&w=180&zc=1&q=95" alt="" />
Bemerkung:
Im obigen Beispiel nehmen wir an, dass wir z. B. in einer index.html ein Bild eingefügt werden soll. Der Bilderordner ist /img/ und das Skript TimThumb liegt im Ordner /skripte/. Wir sprechen das Skript an und übergeben die nötigen Parameter.
Installation
- Herunterladen des Skriptes – TimThumb
- Erzeugen des Ordners /cache/ – muss im selben Ordner liegen wie timthumb.php und volle Schreibrechte (777) besitzen
- Auch der Ordner, der TimThumb enthält, sollte volle Schreibrechte (777) besitzen
- Optional: Um die Performance zu verbessern, kann die .htaccess noch erweitert werden
Automatische Thumbnails in einem WordPress-Theme
Unser Ziel ist es nun, einen Post mit einer Bilddatei zu erstellen und zum Einen einen Thumbnail und zum Anderen eine Großansicht dieses Bildes zu erzeugen.
Voraussetzungen sind:
- Das Bild liegt im Ordner /img/ im Hauptverzeichnis der WordPress-Installation
- timthumb.php liegt im Order (Chmod 777) /skripte/ des WordPress-Theme-Ordners
- Der Ordner /skripte/ enthält den Unterordner (Chmod 777) /cache/
Damit wir das Bild mit dem Skript erfassen können, legen wir uns einen Post mit einem Spezialfeld namens ‘post-img’ an. Als Wert bekommt dieses Spezialfeld die URL des zu verarbeitenden Bildes (z. B. ‘http://webdemar.com/img/bild.jpg’).
Den Spezialfeld des Posts können wir innerhalb des Loops in unserem WordPress-Theme ausgeben – z. B. in der home.php (genauer möchte ich darauf an dieser Stelle nicht eingehen, da dies zu weit führen würde).
<?php echo get_post_meta($post->ID, 'post-img', true) ?>
Bemerkung:
Mit diesem Aufruf würde die URL des Bildes ausgegeben. Das machen wir uns zunutze und konstruieren damit die erforderliche Ausgabe (s. Anwendung) zum Ansprechen von TimThumb.
<img src="<?php bloginfo('template_url'); ?>/skripte/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&w=120&h=80&zc=1&q=95" width="120" height="80" alt="<?php the_title(); ?>" />
Bemerkung:
Hiermit geben wir das Bild, das wir im Spezialfeld des Posts angegeben haben, als Thumbnail 120×80px, wenn nötig zugeschnitten und in einer Qualität von 95 (von 100) aus.
Breite und Höhe lassen sich nun beliebig anpassen, so dass z. B. in der single.php des Themes dasselbe Bild mit einer Größe von 240×160px ausgegeben werden kann. Wichtig ist dabei, dass width und height des img-Tags ebenfalls angepasst werden.
Man kann das Ganze nun noch einen Schritt verbessern, indem man vor dem Aufruf des Bildes mit der URL aus dem Spezialfeld zunächst abfragt, ob dieses auch vorhanden ist. Wenn das Spezialfeld in einem Post leer bleibt, würde sonst ein img-Tag ohne src erzeugt.
<?php if(get_post_meta($post->ID, "post-img", true)) { ?>
<img src="<?php bloginfo('template_url'); ?>/skripte/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&w=120&h=80&zc=1&q=95" width="120" height="80" alt="<?php the_title(); ?>" />
<?php } // endif post-img ?>
Bemerkung:
Bei einem leeren Spezialfeld wird nun einfach nichts ausgegeben.
Fazit:
Mit TimThumb lassen sich also automatisch über das Theme gesteuert beliebig viele Thumbnails eines einzigen Bildes erstellen.
Relevante Links:
Simon [webdemar]
Moin, ich bin Simon und betreibe webdemar.com als meine ernstgemeinte Spielwiese für WordPress, Webdesign und so.
14 Kommentare
2 Trackbacks
- peternolte.com » Blog Archive » “Vintage Green” ein child theme für Mimbo 3.0 - [...] Darren Hoyt sehr. Das Theme ist nicht nur sehr schick, es bietet auch durch die Einbindung des TimThumb-Scripts eine ...
- TimThumb-Script in WP Theme einbauen | funkygog Blog - [...] Tutorial von WebDeMar [...]
Kommentar schreiben
24. Januar 2009
Schöner Tipp, werde heute im Laufe des Tages für einen Kundenprojekt einbauen. Gehe ich richtig in der Annahme, dass die bereits erzeugten Thumbs gecached werden, um die wiederholte Generierung zu ersparen? Sonst wäre ja der Ordner Cache nicht da, gell?
P.S. Keine Benachrichtigung für Comments in deinem schicken Blog?
24. Januar 2009
Moin Sergej,
ganz genau. Die einmal erzeugten Thumbs werden gecached. Das Skript ist echt schön einfach und lässt sich hervorragend in WordPress integrieren.
P.S.: Danke für die Erinnerung. Jetzt weiß ich, was ich noch tun wollte.
24. Januar 2009
Danke für die Auskunft.
24. Januar 2009
Jetzt mach aber mal Wochenende!
30. Januar 2009
da ist deine annahme richtig
31. Januar 2009
Na, denn sind wir uns ja alle einig
24. Juni 2009
Hallo,
super Artikel!
Nun wollte ich aber nicht auf den Bilderuploder von Wp verzichten.
Wenn ich das richtig sehe müsste ich alle meine Bilder in einen Ordner hochladen und selbst einstellen(breite und höhe).
Jetzt habe ich mir den Code so umgeschrieben das, dass Bild 1. verlinkt und 2. automatisch das hochgeladene aus dem Post nimmt.
Leider klappt es nicht und ich weiß nicht woran es liegen soll, vllt. hat jemand von euch einen Tipp!
Hier der Code im Template:
24. Juni 2009
Hey Nick,
auf den Uploader brauchst Du auch nicht zu verzichten. Du lädst das Bild ganz normal über den Image-Editor hoch. Anstatt es jedoch in den Artikel einzufügen, kopierst Du Dir nur die URL (bei Link des Bildes -> Datei-URL) und setzt diese in das Custom Field ein.
Wenn Du die Schreibrechte richtig gesetzt hast, kann ich schwer sagen, woran es liegen könnte. In Deinem Code kann ich auf den ersten Blick keinen Fehler erkennen. Hast Du mal ne URL zur Seite, wo Du das Skript im Einsatz hast?
15. August 2009
Sehr guter Tipp, danke dafür
10. September 2009
super Tut! würde nur das echo – wenn er die meta Daten abfragt – weglassen
7. November 2009
Danke für dieses schöne Tutorial ! Habe schon einige Zeit damit verbracht, eine derartige Lösung zu finden ! Funktioniert einwandfrei !!!
13. November 2009
Habe mimbo und das timthumb, allerdings quetscht er die Bilder in das festgelegte Format. Wie kann ich es machen, daß die ursprünglichen Proportionen beibehalten werden und bei bestimmten Ansichten nur eine bestimmte Breite ODER Höhe angezeigt wird?
13. November 2009
Du könntest dann jeweils die Höhen- oder Breitenangabe weglassen. Bei fester Breite also im Skriptaufruf die Höhe
h=[deineHoehe]und im img-Tagheight="[deineHoehe]"rausnehmen. Das funktioniert, ist aber kein valides HTML mehr, da img-Tags laut W3C immer Höhe und Breite brauchen.4. Januar 2010
Hi und hallo,
mein problem dabei ist, daß meine Bilder abgeschniten werden – mal fehlen Teile des Kopfes etc.
Was mache ich falsch?
Danke für eine kurze RM
Andy