WordPress: eigene Thumbnail-Größe einrichten und auswählen

Ihr wollt unter WordPress ein sogenanntes Artikelbild (Featured Image) mit einer ganz bestimmten Größe nutzen? Oder ihr möchtet in einer Galerie Vorschaubilder (Thumbnails) nutzen, die eine bestimmte Größe haben, und aber die Standard-Wordpress-Elemente nicht in Mitleidenschaft ziehen? Kein Problem!

Wir wollen euch heute zeigen, wie ihr eurem eigenen Template (oder einem vorgefertigten) weitere Bildgrößen hinzufügen könnt. Im nächsten Schritt wird es darum gehen, diese Bilder auch über den Dialog im Editor aufzurufen. Doch eins nach dem anderen.

Thumbnail-Größe ändern

Wolltet ihr vorhandene Thumbnail-Dimensionen verändern, ginge das einerseits über die Einstellungen im WordPress-Backend selbst oder über die jeweilige functions.php eures Themas und zwar mit der Funktion set_post_thumbnail_size()¹. Doch diese Funktion interessiert uns an dieser Stelle nicht.

Neue Bildgrößen hinzufügen

Denn wir möchten gerne zusätzliche Bildgrößen hinzufügen, sei es, um eine Portfolio-Ansicht mit Bildern auszustatten, oder um etwa Artikelbilder passgenau in der Breite zu erzeugen, die das Webseiten-Layout vorgibt. Dazu benötigen wir die Funktion add_image_size()².

Ihr könnt den neuen Bildgrößen, die ihr eurem Theme hinzufügt, eigene Namen geben. Am sinnvollsten ist es, wenn diese Namen ausdrücken, wofür das Bild später genutzt wird. Nicht verwenden dürft ihr die Bezeichnungen „thumb“, „thumbnail“, „medium“, „large“ und „post-thumbnail“, da diese von WordPress bereits reserviert sind.

Wenn ihr ein Theme habt, das die Artikelbilder-Funktion unterstützt, müsst ihr nicht extra noch eine Zeile zur functions.php hinzufügen. Ansonsten ist es notwendig, das eigene Thema mittels add_theme_support('post-thumbnails'); darauf vorzubereiten.

Artikelbild in voller Breite

Für ein Beispiel, das wir verwenden, haben wir ein Artikelbild erzeugt, das die volle Breite der Inhaltsspalte einnehmen soll. Auf unserer Webseite wollten wir entsprechend die voll Breite von 760 Pixel ausnutzen, und um nicht zu viel Platz in der Höhe wegzunehmen, sollte das Bild maximal 400 Pixel hoch sein.

Wir haben also zunächst unser Thema auf den Support für Thumbnails vorbereitet und dann die eigene Bildgröße hinzugefügt:

add_theme_support('post-thumbnails');
add_image_size('fullsize', 760, 400, true);

Das Ergebnis schaut wie folgt aus:³

WordPress bietet ein paar Möglichkeiten, die Bilder zu beschneiden. Oft, aber nicht immer, ist das sinnvoll und/oder gewünscht. Wie ihr bei unserem Funktionsaufruf von add_image_size() erkennt, haben wir 4 Parameter genutzt. Der erste (in einfachen Anführungszeichen) gibt den Namen an (fullsize), der zweite (760) die Breite in Pixeln, der dritte (400) die Höhe in Pixeln und der vierte (true) ist optional. Es ist ratsam, den Parameter „true“ aber eher zu oft als zu selten zu nutzen. Dieser führt nämlich dazu, dass WordPress die Bilder „in jedem Fall“ beschneidet. Lasst ihr den Parameter weg, dann versucht WordPress das Bild auf den kleinsten gemeinsamen Nenner zu reduzieren. Da unsere Bildmaße mit 760 und 400 Pixeln für Breite und Höhe nicht identisch (also quadratisch) sind, bestimmt eine Größe immer die andere, und zwar die Höhe in unserem Fall immer die Breite. Das führt dazu, dass, je nach Ausgangsgröße des Bildes, es zwar 400 Pixel hoch wird, aber nur sehr sehr schmal. Das Bild wirkt dann eher miniaturisiert. Für unseren Verwendungszweck innerhalb eines Artikels wollten wir das gerade vermeiden. Denn unsere Idee war, die gesamte Inhaltsspalte auszufüllen, ähnlich wie ihr es auf dem Screenshot erkennen könnt.

Noch ein Hinweis: Die zusätzlichen Bilder, bzw. Bildgrößen werden immer dann erzeugt, wenn ihr ein neues Bild hochladet. Alte Bilder bleiben von den Veränderungen unberührt. Es gibt ein paar Plugins, die diesen Umstand zu beheben versuchen, aber eher schlecht als recht funktionieren. Ihr solltet euch dessen bewusst sein.⁴

Eigene Bildgröße in Medienauswahl verwenden

Nun ist es ja schön und gut, dass man Bilder in der passenden Größe hat, doch dann sollte man sie in der Medienbibliothek, bzw. in den Dialogen beim Artikelschreiben zum Einfügen in den Artikel verwenden können. Dazu müsst ihr der functions.php in eurem Theme-Verzeichnis einen Filter hinzufügen, den ihr mit einer Funktion füttert.

Angepasst auf unser Beispiel mit dem „fullsize“-Bild lauten die zusätzlichen Zeilen in der Functions-Datei wie folgt:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array( 'fullsize' => __('Im Artikel'), ) );
}

Den Filter namens „image_size_names_choose“ gibt es bei WordPress intern. Er ist für die Auswahlbox, bzw. das Dropdown-Feld zuständig, bei dem ihr die Bildgröße wählen könnt, von Bildern, die ihr in eure Artikel einfügen wollt. Der zweite Parameter bei add_filter() lautet „my_custom_sizes“, er könnte auch anders heißen, muss nur identisch sein mit dem Namen der Funktion, die eure zusätzliche Bildgröße dem Array der anzuzeigenden Bildgrößen hinzufügt, in unserem Fall eben my_custom_sizes().

Und zwar ist $sizes ein globales Array von WordPress mit den unterschiedlichen Bildgrößen. Eure und unsere Funktion my_custom_sizes() erhält dieses Array schon beim Funktionsaufruf übergeben (my_custom_sizes( $sizes )). Der Sinn der Funktion ist, die vorhandenen Daten des $sizes-Arrays mit euren zusätzlichen zu ergänzen. Das geschieht mittels array_merge()⁵, einer PHP-Funktion. Ihr erkennt im obigen Codebeispiel den Namen „fullsize“ unserer individuellen Bildgröße. Rechts davon heißt es „Im Artikel“. Das ist die Bezeichnung, die im Dropdownfeld erscheint.

Eigene Bildgröße im Template verwenden

Für unser Beispiel weniger wichtig, aber der Vollständigkeit halber noch erwähnt, ist die Möglichkeit, die auf diese Weise zusätzlich erzeugte Bildgröße innerhalb der eigenen Templates einzusetzen.

Komplett mit HTML-IMG-Tag würde unser obiges Beispiel mittels the_post_thumbnail('fullsize'); aufgerufen. Der Weg über die PHP-Ausgabe würde ein echo wp_get_attachment_image ($attachmentID, 'fullsize'); erzeugen und wer das Ganze noch weiter aufdröseln will, der kann mittels wp_get_attachment_image_src($attachmentID, 'fullsize'); nur den URL erhalten und muss zusätzlich die übrigen Informationen, wie den ALT- oder TITLE-Tag und die Bildgröße mit weiteren Funktionen ausgeben. Das würde aber an dieser Stelle zu weit führen.

Ähnliche Nachrichten