Thumbnails (engl. für “Daumennagel”, auf die Größe anspielend) sind kleine Vorschaubildchen und heutzutage einfach nicht mehr wegzudenken: das schlanke, schlichte Web-2.0-Design (whatever that means) kommt nicht ohne sie aus, denn niemand gibt sich mehr damit zufrieden, Textlinks auf Bilder zu setzen oder – noch schlimmer – das 1600×1280-Bild mithilfe der hauseigenen HTML-Attribute zu verkleinern und dem User damit großzügig noch einmal Zeit zu geben, zum Colaautomaten im Erdgeschoss zu gehen und sich was zu trinken zu holen… Das ging früher vielleicht noch, aber heute haben wir mit so altmodischem Zeug nichts mehr am Hut – außer es ist Retro und Absicht, dann isses cool;) – und deswegen will ich hier kurz zeigen, wie man auch auf der eigenen Seite mit kleinen Vorschaubildchen angibt.

Die Lösung heißt phpThumb(). phpThumb() ist ein PHP-Script, das mithilfe der Open-Source-GD-Library aus Bilddateien, die auf dem eigenen oder einem anderen Server liegen oder aus einer Datenbank ausgelesen werden, verkleinerte Vorschaubildchen erstellen kann. Es unterstützt die Formate JPEG, PNG, GIF, BMP und ICO und kommt mit einer Reihe an Konfigurationsmöglichkeiten wie Rotation, Cropping, Anti-Aliasing, verschiedene Qualitätsstufen, dem Einfügen eines Wasserzeichens, etc…

Das Script bietet zwei verschiedene Modi zur Erstellung der Thumbnails an: einmal über die Verwendung der Datei “phpThumb.php” als src-Attribut eines img-Tags; oder eben über die Verwendung der phpThumb-Klasse in der eigenen Website.

Aufruf von phpThumb.php

Angenommen wir wollen einen Thumbnail der Datei “gross.jpg” erstellen. Das Ergebnis soll 100×100px groß sein, nur noch in Graustufen daherkommen und zwecks Dateigröße auf eine Qualität von 60% reduziert werden. Das einzige was wir tun müssen, ist es, einen img-Tag in unserem HTML-Dokument zu erstellen, und die Datei “phpThumb.php” (mit allen Optionen) als src-Attribut zu spezifizieren. In unserem Fall:

<img src="[Pfad]/phpThumb.php?src=[Pfad]/gross.jpg&w=100&h=100&q=60&fltr[]=gray" />

Hinter dem “?” stehen die einzelnen Optionen. Eine genaue Auflistung gibt es weiter unten.

Verwendung de phpThumb-Klasse

Hat man die phpThumb-Dateien heruntergeladen, muss man zuallererst die Datei “phpthumb.class.php” einbinden und ein phpThumb-Objekt erstellen:

require_once(dirname(__FILE__)."[Pfad]/phpthumb.class.php");
$pt = new phpThumb();

Anschließend geht es an die Konfiguration: mithilfe von setSourceFilename() geben wir an, woher die Daten genommen werden sollen und mithilfe der setParameter()-Methode legen wir die Einstellungen fest. Für unser “gross.jpg” von oben:

$pt->setSourceFilename("[Pfad]/gross.jpg");
$pt->setParameter("w", 100);
$pt->setParameter("h", 100);
$pt->setParameter("q", 60);
$pt->setParameter("fltr", array("gray"));
$pt->setParameter("config_output_format", "jpg");
$pt->setParameter("config_allow_src_above_docroot", true);

(Die letzte Zeile ist nur notwendig, wenn man nicht im DOCUMENT_ROOT-Verzeichnis arbeitet.)
Nun muss der Thumbnail nur noch erstellt und ausgegeben werden:

if ($pt->GenerateThumbnail()) {
    if (!$pt->RenderToFile("[Ausgabedatei]")) {
        // Mach etwas mit dem Fehler
        echo "<b>".$pt->fatalerror."</b>";
    }
}

Mit diesem Wissen lässt sich sehr leicht eine Funktion schreiben, die das Erstellen eines (einfachen) Thumbnails erledigt:

require_once(dirname(__FILE__)."[Pfad]/phpthumb.class.php");
function ErstelleThumbnail($quelldatei, $ausgabedatei, $breite, $hoehe, $graustufen=false, $format="jpg")
{
    $pt = new phpThumb();
    $pt->setSourceFilename($quelldatei);
    $pt->setParameter("w", $breite);
    $pt->setParameter("h", $hoehe);
    $pt->setParameter("q", 80); // je nachdem
    if ($graustufen) $pt->setParameter("fltr", array("gray"));
    $pt->setParameter("config_output_format", $format);
    $pt->setParameter("config_allow_src_above_docroot", true);
    if ($pt->GenerateThumbnail()) {
        if (!$pt->RenderToFile($ausgabedatei)) {
            // Mach etwas mit dem Fehler
            echo "<b>".$pt->fatalerror."</b>";
        }
    }
}

Quadratische Thumbnails

phpThumb() besitzt eine Einstellungsmöglichkeit namens ZoomCrop, die beim Erstellen des Thumbnails bewirkt, dass das Bild nicht verzerrt wird, wenn die Angaben für Breite und Höhe nicht seinen Proportionen entsprechen. Stattdessen wird einfach ein Ausschnitt aus dem verkleinerten Bild herausgeschnitten (von der Mitte ausgehend), der die entsprechenden Maße hat.

An einem Beispiel will ich das verdeutlichen: Angenommen wir haben ein Bild der Größe 200×400 und wollen einen 100×100-Thumbnail. Das geht nun folgendermaßen vonstatten: Das Bild wird so verkleinert, dass die kleinere der Seiten das gewünschte Maß erhält, d.h.: aus 200×400 wird 100×200. Nun wird aus dem neu entstandenen Bild (vom Zentrum ausgehend) ein Stück herausgeschnitten, sodass auch die zweite Seite das gewünschte Maß erreicht. Dies entspräche in unserem Beispiel einem Rechteck mit den zwei gegenüberliegenden Ecken (0;50) und (100;150). Voilà, fertig ist der Daumennagel!

Die Funktion ZoomCrop wird mithilfe des Parameters “zc” aktiviert, der hierfür den Wert “C” erhält.

Eine Funktion zum Erstellen quadratischer Thumbnails könnte so aussehen:

require_once(dirname(__FILE__)."[Pfad]/phpthumb.class.php");
function ErstelleQuadratischenThumbnail($quelldatei, $ausgabedatei, $seitenlaenge, $format="jpg")
{
    $pt = new phpThumb();
    $pt->setSourceFilename($quelldatei);
    $pt->setParameter("w", $seitenlaenge);
    $pt->setParameter("h", $seitenlaenge);
    $pt->setParameter("q", 80); // je nachdem
    $pt->setParameter("zc", "C");
    $pt->setParameter("config_output_format", $format);
    $pt->setParameter("config_allow_src_above_docroot", true);
    if ($pt->GenerateThumbnail()) {
        if (!$pt->RenderToFile($ausgabedatei)) {
            // Mach etwas mit dem Fehler
            echo "<b>".$pt->fatalerror."</b>";
        }
    }
}

Liste der wichtigsten phpThumb()-Parameter

-
Alle Optionen, z.B. die Filter-Einstellungen finden sich in der phpThumb()-Readme.