Vorschaubilder in WordPress mit TimThumb generieren

Mit TimThumb Vorschaubilder (Thumbnails) für WordPress erstellenMit dem PHP-Script TimThumb lassen sich einfach automatische Vorschaubilder (Thumbnails) in WordPress realisieren. So kann man mit nur einer Bild-Datei z. B. in der Artikelübersicht eine verkleinerte Darstellung eines Artikelbildes anzeigen und im Beitrag selbst die Großansicht des Bildes präsentieren. Der Vorteil: Das durch TimThumb generierte Vorschaubild wird nicht nur einfach skaliert, sondern auch die Dateigröße des Bildes verringert sich. Hier eine kurze Erklärung wie sich TimThumb in Dein WordPress-Theme integrieren lässt.

Installation von TimThumb

  • Herunterladen des TimThumb-Skriptes,
  • Erstellung des TimThumb-Ordners (wo ist eigentlich egal, ich bevorzuge diesen direkt im Theme-Ordner zu erzeugen),
  • kopieren der Datei thimthumb.php in den TimThumb-Ordner,
  • Erzeugung des Ordners „cache“ im TimThumb-Ordner,
  • Volle Schreibrechte (777) vergeben für den Timthumb-Ordner inklusive den darin enthaltenen Dateien (timthumb.php und Ordner „cache„).

TimThumb im WordPress-Theme verwenden

Im ersten Schritt legen wir ein benutzerdefiniertes Feld (Custom Field) mit dem Namen ‚artikelbild‘ für das zu verarbeitende Bild an. Als Wert erhält das benutzerdefinierte Feld die URL der Bilddatei (z.B. http://www.domain.de/images/bild.jpg).
Zur Ausgabe eines Custom Field fügst du folgenden Code an gewünschter Stelle in dein Template ein:

<?php echo get_post_meta($post->ID, 'artikelbild', true) ?>

Im Frontend würde nun die zuvor eingefügte URL der Bilddatei ausgegeben werden.

Nun modifizieren wir das Ganze so, dass tatsächlich bei der Ausgabe das Bild erscheint und das TimThumb-Skript dabei angesprochen wird. Dabei wird an dieser Stelle davon ausgegangen, dass das Skript (timthumb.php) im zuvor erstellten Ordner mit dem Namen „timthumb-skript“ liegt und dieser sich im Ordner deines WordPress-Themes befindet.

<img src='<?php bloginfo('template_url'); ?>/timthumb-skript/timthumb.php?src=<?php echo get_post_meta($post->ID, 'artikelbild', true); ?>&amp;w=240&amp;h=160&amp;zc=1&amp;q=80' width='240' height='160' alt='<?php the_title(); ?>' />

Das Bild würde nun in der Größe 240PX*160PX ausgegeben werden. Dabei hat es eine Ausgabequalität von 80 und das Bild wäre beschnitten.

Parameter für die Ausgabe:

  • w: width – Breite des Bildes
  • h: height – Höhe des Bildes
  • zc: zoom crop (kann den Wert 0 oder 1 annehmen) – Beschneidung des Bildes
  • q: Qualität – Ausgabequalität des Bildes (kleinere Bilder können geringere Qualität auweisen ohne optischen Qualitätsverlust)

TimThumb mit dem Plugin Custom Field Template verwenden

Für die übersichtliche Gestaltung der benutzerdefinierten Felder setze ich gerne das Plugin Custom Field Template. Ermöglicht man über ein Custom Field das Hochladen eines Bildes über einen Upload-Button kann das Bild folgendermaßen ausgegeben werden:

<img src='<?php bloginfo('template_url'); ?>/timthumb-skript/timthumb.php?src=<?php $download = get_post_meta($post->ID, 'artikelbild', true); echo wp_get_attachment_url($download); ?>&amp;w=240&amp;h=160&amp;zc=1&amp;q=80' width='240' height='160' alt='<?php the_title(); ?>' />

Fazit: TimThumb ermöglicht es schnell und einfach beliebig viele Thumbnails eines Bildes auszugeben und bewahrt einem davor, dass der Kunde unbearbeitet seine 15 Megapixel Fotos in die Webseite einbaut.

3 Kommentare

  1. Und das alles kann auch die bereits in WordPress integrierte Thumbnail-Funktion!;-)
    Nur einige Denkanstöße:
    – die bereits integrierte Funktion lässt sich leichter umsetzen
    – TimThumb stellte schon einmal eine Unsicherheit dar, bei CHMOD 777 für eine Plugin-Datei stellen sich mir die Nackenhaare zu Berge
    – das Plugin ist meiner Erfahrung nach sehr ressourcenfressend
    – aus SEO-Sicht stellt TimThumb immer wieder ein Problem dar, weil das Bild (von robots) nicht als „echtes“ Bild wahrgenommen wird
    – auch die WordPress-Funktion beschneidet die Bilder und erzeugt somit kleinere (Dateigröße, Stichwort Ladezeiten) Thumbs

    Die WordPress-eigene Funktion ist schlichtweg besser!;-)

  2. Definitely better than TimThumb. I’ve used this mtheod for a bunch of client projects over the past few months and I won’t go back. Really powerful and really simple you just declare a size with add_image_size and then insert it wherever with the_post_thumbnail. (And yet so many ThemeForest themes still tell you to upload files with specific dimensions.)

Schreibe einen Kommentar

Required fields are marked *.