Ab und zu bringt mich WordPress schon zur Verzweiflung. Diesmal waren es die vorhandenen und fehlenden Bildgrößen (manche sagen auch Bildformate), welche automatisch beim Hochladen von Bildern erzeugt werden. Wir kennen ja die vier von WordPress zur Verfügung gestellten Bildgrößen:
- Vorschaubild (Thumbnail): 150 x 150 px
- Mittelgroß (Medium): 300 x 300 px
- Groß (Large): 1024 x 1024 px
- Vollständige Größe (Full): Originalgröße
Manchmal sind diese Bildgrößen aber nicht ideal oder wir brauchen auch noch eine weitere Größe dazu oder eine könnten wir entfernen.
Die vorhandenen Bildgrößen anpassen
Dies ist der leichteste Schritt: Die von WordPress vorgeschlagenen Pixelwerte für die drei ersten Bildgrößen der Liste anpassen. Dazu gehst du im Dashboard von WordPress in das Menü Einstellungen und dort auf den Unterpunkt Medien. Jetzt kannst du die vorhandenen Bildgrößen nach deinen Wünschen anpassen. WordPress ist hier auch noch so intelligent, dass es die Bilder beim Hochladen proportional umrechnet.
WordPress nimmt bei Bildern im Querformat (Landscape) auch den Wert für die Breite als fixe Pixelangabe und passt die Höhe dementsprechend an. Und genau umgekehrt geht WordPress bei Bildern im Hochformat (Portrait) vor. Damit bleiben die Seitenverhältnisse der Bilder erhalten und auch die Darstellung der Motive wird nicht verzerrt. Du brauchst dich in Zukunft also um nichts kümmern und hast die richtigen Größen immer zur Verfügung.
Ein kleines Problem gibt es aber, wenn dein Blog schon länger besteht und du auch schon eine Reihe von Bildern hochgeladen hast. Diese Einstellungen gelten eben nur für neu hochgeladene Bilder, aber bereits bestehende werden nicht neu erstellt. Falls du nun alle Bildgrößen neu berechnen lassen willst, ist das PlugIn Regenerate Thumbnails ein guter Tipp. Damit kannst du alle vorhandenen Bilder mit den neu eingegebenen Werten wieder neu (zusätzlich) erstellen lassen.
Aber leider bleiben trotz des PlugIns, die alten Dateiformate am Server erhalten. Wenn du genug Speicherplatz (WebSpace) hast, ist das gar kein Problem. Aber wenn du sparen musst und jedes Byte auf deinem WebSpace wichtig ist, dann bleibt dir nichts übrig als mit FTP (zum Beispiel dem Programm FileZilla) die nicht mehr benötigten Bildformate zu löschen. Es gibt auch noch andere Lösungen, aber das ist eine andere Geschichte und wird auch bald erzählt werden.
Neue Bildgrößen hinzufügen
Wie so oft, wenn wir WordPress anpassen wollen, brauchen wir zuerst ein Child-Theme. Denn nur so bleibt dein bestehendes Theme frei von eigenen Quellcode und du kannst es auch problemlos aktualisieren, wenn es mal ein Update gibt (wir nennen das auch update-sicher). Wie du das mit dem Child-Theme machst, habe ich dir in einem eigenen Post beschrieben, denn das würde hier den Rahmen sprengen.
Nun brauchen wir die Datei functions.php. Falls die noch nicht im Child-Theme vorhanden ist, kannst du sie ganz einfach mit einem Texteditor anlegen. Als erstes benötigen wir eine eigene Funktion, welche die neuen Bildgrößen erzeugt.
Bildgrößen festlegen
// neue Bildgroessen festlegen
function tmdn_neue_bildgroessen() {
add_image_size('xsmall', 50, 50, true);
add_image_size('xlarge', 1920, 1080, false);
}
add_action('after_setup_theme', 'tmdn_neue_bildgroessen', 11);
Dazu brauchen wir eigentlich nur den WordPress-Befehl true) oder proportional (false) erzeugt werden soll.
Nun werden die Bilder nach dem Hochladen (Upload) neu berechnet und im passenden Verzeichnis (/wp-content/uploads/...) zur Verfügung gestellt. Aber komfortabel verwenden können wir sie noch nicht. Denn dazu müssen die Bildgrößen auch in der Liste Größe bei der Medienauswahl erscheinen. Auch dazu brauchen wir noch einen kleinen Teil Quellcode (Sourcecode) in der functions.php. Dieses Mal verwenden wir ganz locker den WordPress-Filter
Bildgrößen zur Auswahl hinzufügen
//Bildgroessen zur Auswahl hinzufuegen
function tmdn_bildgroessen_auswaehlen($sizes) {
$custom_sizes = array('xsmall' => 'Mini-Vorschaubild',
'xlarge' => 'HD-Bild');
return array_merge($sizes, $custom_sizes);
}
add_filter('image_size_names_choose', 'tmdn_bildgroessen_auswaehlen');
In der Zeile 9 und 10 siehst du wie die Namen für die Auswahlliste festgelegt werden. Zuerst musst du den internen Namen (wie du ihn in den Zeilen 3 und 4 vergeben hast) angeben und nach dem => gibst du den Namen an, wie er in der Auswahlliste erscheinen soll. Für jede angelegte Bildgröße brauchst du hier auch eine Zeile mit den beiden Namen. Pass aber auf, am Ende der Zeile steht immer ein Komma um die Pärchen zu trennen. Das war der ganze Zauber um neue Bildgrößen in der Auswahlliste zu haben.
