Weitere Bildgrößen für Artikelbilder beim Hochladen erzeugen

Manche Projekte erfordern weitere Bildgrößen als die Standards, die WordPress von Haus aus generiert. Da diese nicht manuell mit Photoshop (oder einem ähnlichen Programm) erzeugt werden sollen, muss dies während des Uploads geschehen. Für diesen Fall gibt es eine Möglichkeit, die mit wenigen Handgriffen einzurichten ist: beim Upload-Vorgang werden weitere Bildabmessungen erzeugt. Die Grundeinstellung generiert beim Hochladen von Bildern in die Mediathek drei unterschiedliche Bildgrößen: Miniaturbild, Mittelgroß und Groß. Die große Version wird allerdings nur generiert, wenn das Ausgangsbild einer bestimmten Größe entspricht. Um dies umzusetzen, musst du die neuen Formate in der functions.php registrieren.

Fügst du neue Formate in die functions.php ein, so ist WordPress nicht nur in der Lage, diese auf die gewünschten Abmessungen neu zu generieren. Wenn es gewünscht ist, können die Bilder auch beschnitten werden. Dies ist allerdings mit Vorsicht zu genießen, denn oft werden wichtige Bildteile entfernt. Hast du aber Bilder und Grafiken, bei denen es keine so große Rolle spielt, kann diese Funktion von großem Nutzen sein.

Anwendung

In der functions.php – diese findest du in deinem WordPress-Theme Verzeichnis – kannst du beliebige weitere Formate hinzufügen. Die Funktion sieht wie folgt aus:

add_image_size( 'teaser_klein', 240, 160 );

Angenommen, du benötigst für eine spezielle Übersichtsseite einige Bildformate, die etwas größer als die Standardformate sind. Dann kannst du diesen Code deiner functions.php hinzufügen. Hier wird ein Format erstellt, welches den Namen „teaser_klein“ trägt. Die Breite soll 240 Pixel betragen, in der Höhe 160 Pixel. Das Bild wird an dieser Stelle proportional verkleinert, also nicht beschnitten. Die Funktion geht dabei so vor, dass immer die größte verfügbare Kantenlänge des Bildes verwendet wird. So wird ein hochformatiges Bild an dieser Stelle eine Höhe von 160 Pixeln bekommen. Die Breite wird allerdings proportional berechnet; sie wird also kleiner als 240 Pixel.

Wenn die Breite oder die Höhe keine Rolle spielen soll, kannst du für diesen Wert „9999“ eintragen. Ein Bild, welches theoretisch eine unendliche Höhe erhalten kann, würde dann folgendermaßen generiert:

add_image_size( 'teaser_klein', 240, 9999 );

Es kann aber auch nötig sein, dass die Bilder während des Hochladens beschnitten werden müssen. Dazu wird ein weiterer Parameter verwendet und hinter der Größenangabe hinzugefügt. Dieser Wert steht für „crop“ und kann „true“ oder „false“ sein:

add_image_size( 'teaser_klein', 240, 50, true);

Dieses Bild wird nach dem Hochladen die genaue Abmessung von 240px x 50px haben. Beschnitten wird von der Mitte ausgehend. Wenn du ein Bild beschneiden möchtest, achte darauf, dass wichtige Bildteile erhalten bleiben.

Beispiele

Das neue Teaserformat. 240 Pixel breit. Die Höhe wurde proportional gesetzt und beträgt vom Ausgangsbild (800 x 500 Pixel) nun 150 Pixel.

Das beschnittene Bild. Die Größe entspricht exakt den angegebenen 240 x 50 Pixeln.

Das gleiche Bild im Hochformat würde bei der Option „240, 9999“ nicht in der Höhe beschnitten. Lediglich die Breite wird auf 240 Pixel gesetzt: Das Bild im Hochformat hat nun Abmessungen von 240 x 384 Pixel.

Verwenden der neuen Bildformate

Die neu erzeugten Bildformate werden nicht in den Bildoptionen angezeigt und lassen sich somit nicht auswählen. Um diese Bilder auf einer Übersichtsseite anzuwenden, musst du der Funktion post_thumbnail den Namen des generierten Bildes mitgeben.

Hier habe ich bereits darüber geschrieben, wie du Artikelbilder in deinem WordPress-Theme anzeigen und formatieren kannst. Dieser Funktion muss der Bildname mitgegeben werden.

<?php 
if ( has_post_thumbnail() ) { 
  the_post_thumbnail('teaser_klein');
} 
?>

Diesen Code kannst du der index.php, der archive.php oder einer eigenen Template-Seite hinzufügen.

Das Generieren weiterer Bildformate  ist recht schnell umgesetzt und auch die Ausgabe ist nur eine kleine Erweiterung der eigentlichen Artikelbildanzeige. In zukünftigen Projekten kannst du dir mit dieser Funktion viel Arbeit ersparen. Am besten ist es, wenn du dazu einige neue Formate mit unterschiedlichen Abmessungen und der Option „crop“ erstellst. Spiele mit unterschiedlichen Möglichkeiten, am besten auf einem Testsystem.