Standardmäßig bietet uns WordPress vier verschieden Bildergrößen an, welche wir nach belieben in unseren Themes verwenden können – thumbnail, medium, large, full. Es mag manchmal sehr praktisch sein, zusätzliche Bildergrößen zur Verfügung zu haben. Wie man zusätzliche Größen zu einem Theme hinzufügt erkläre ich in diesem Artikel.
Wie bei so vielen anderen Anpassungen auch, so wird auch hier wieder die Bearbeitung der functions.php des verwendeten Themes erforderlich. Wir machen uns hier der WordPress-Funktion add_image_size() zu nutze.
Sehen wir uns diese Funktion genauer an. Wie wir der Referenz zu add_image_size() entnehmen können, werden zusätzliche Bildformate nach folgenden Kriterien angelegt.
add_image_size( $name, $width, $height, $crop )
$name– der Name der benutzerdefinierten Bildgröße$width– die festgelegte Bildbreite$height– die festgelegte Bildhöhe$crop– harte oder weiche Skalierung (alternative Angabe)
Legen wir mal 2 verschiedene Bildformate an.
add_image_size( 'image', 800, 800 ); // soft-crop - weiche Skalierung add_image_size( 'gallery', 250, 250, true ); hard-crop - harte Skalierung
Beim ersten Beispiel haben wir nun das zusätzliche Bildformat image mit einer maximalen Höhe und Breite von je 800 Pixeln. Aus einem hochgeladenen Bild von 1600×1200 Pixel wird in diesem Fall ein Bild mit 800×600 Pixel, bei einem Bild im Hochformat von 1200×1600 Pixel wird ein Bild von 600×800 Pixel erzeugt, welches wir nun in WordPress einsetzen können.
Beim zweiten Beispiel mit der harten Skalierung erzeugen wir das Bildformat gallery mit der maximalen Höhen und Breite von je 250 Pixeln. Das hochgeladene Bild von 1600×1200 Pixel wird in diesem Fall immer zu 250×250 Pixeln voll ausgefüllt skaliert, sofern die ursprüngliche Auflösung des Bildes mindestens je 250 Pixel beträgt. Der rest des Bildes wird bei der harten Skalierung einfach vom Zentrum ausgehend weggeschnitten.
Wir können jetzt noch festlegen, welchen Bereich wir von diesen hartskalierten Bildern anzeigen wollen, indem wir true mit einem array( $x, $y ) ersetzen.
Mögliche Werte für die X-Achse wären 'left', 'center' und 'right', für die Y-Achse können wir 'top', 'center' und 'bottom' verwenden.
Möchten wir also bei der harten Skalierung immer den rechten unteren Bereich des hochgeladenen Bildes anzeigen, so würde sich folgendes Ändern.
add_image_size( 'gallery', 250, 250, array( 'right', 'bottom' ) );
Über den Theme Hook after_setup_theme können wir jetzt diese Bildformate hinzufügen und im Theme verwenden. Als Beispiel erweitere ich meine Version von dem Tutorial.
function zoechbauer_theme_features() {
// Beitragsbilder hinzufügen
add_theme_support( 'post-thumbnails' );
// Standard Beitragsbilder-Größe - Optional
set_post_thumbnail_size( 600, 200, true );
// zusätzliche Bildformate
add_image_size( 'image', 800, 800 ); // soft-crop - weiche Skalierung
add_image_size( 'gallery', 250, 250, true ); hard-crop - harte Skalierung
// Die verfügbaren Post-Formate hinzufügen
add_theme_support( 'post-formats', array( 'aside', 'audio', 'chat', 'gallery', 'image', 'link', 'quote', 'status', 'video' ) );
// Feed Links hinzufügen
add_theme_support( 'automatic-feed-links' );
// Den TITLE-Tag automatisch von WordPress hinzufügen lassen - ab WP 4.1
add_theme_support( 'title-tag' );
// HTML5 Unterstützung hinzufügen
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// Textdomain für Übersetzungen hinzufügen
load_theme_textdomain( 'zoechbauer', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'zoechbauer_theme_features' );Die hinzugefügten Bildgrößen in der WordPress Mediathek verfügbar machen.
Bis hierher haben wir zwar die Bildgrößen bereits angelegt, jedoch können wir noch nicht über die Mediathek direkt darauf zugreifen. Direkt im Theme jedoch könnten wir diese Formate aber bereits verwenden zB als Beitragsbild.
the_post_thumbnail( 'gallery' );
Über den WordPress Hook image_size_names_choose können wir nun die angelegten zusätzlichen Bildformate auch in der Mediathek des Dashboards von WordPress hinzufügen. In der Referenz zu add_image_size finden wir den erforderlichen Code für die functions.php. Angepasst an die in diesem Artikel erstellten Bildformate würde dieser so aussehen.
function zoechbauer_image_sizes_to_media( $sizes ) {
return array_merge( $sizes, array(
'image' => __( 'Beitragsbildgröße', 'zoechbauer' ),
'gallery' => __( 'Galleriebildgröße', 'zoechbauer' ),
) );
}
add_filter( 'image_size_names_choose', 'zoechbauer_image_sizes_to_media' );Zusätzlich habe ich hier noch die Textdomain – zoechbauer – hinzugefügt, um das Theme für eine eventuelle Übersetzung vorzubereiten. Ein kleiner Hinweis noch zum Schluss.
Für bereits vorhandene Bilder unserer WordPress-Installation, müssen diese Bildgrößen zuerst erzeugt werden zB mit dem Plugin Force Regenerate Thumbnails oder ähnlichen Plugins. Ansonsten würden die Bildgrößen nur für nachträglich hinzugefügte Bilder zur Verfügung stehen.
Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.