WordPress Beitragsbild bearbeiten und Bildausschnitt selbst auswählen

In diesem Teil meiner Artikelserie über Beitragsbilder zeige ich, wie du das WordPress Beitragsbild bearbeiten und zuschneiden kannst. Den Bildausschnitt selbst auswählen zu können ist häufig sehr hilfreich, weil WordPress die Bilder oft ungünstig zuschneidet.

Dafür stelle ich kurz das WordPress Core Feature zum Bearbeiten von Bildern vor und gehe dann ausführlicher auf das Crop Thumbnails Plugin ein, mit dem du für jede festgelegte Bildgröße individuell einen Bildausschnitt wählen und das Beitragsbild zuschneiden kannst.

Neben den Möglichkeiten zur Anpassung von Bildern direkt in WordPress können Fotos natürlich auch vor dem Hochladen mit einem Grafikprogramm bearbeitet und auf die richtige Größe gebracht werden. Als Blog mit dem Fokus WordPress gehe ich aber auf externe Programme nicht näher ein.

Szenario: Twenty Fifteen mit Panoramabild

Zum Ausprobieren der Bildbearbeitung habe ich mir ein wunderschönes Panoramabild von Florenz ausgesucht, welches als gemeinfreies Bild unter Pixabay zur Verfügung steht.

Als Theme habe ich diesmal Twenty Fifteen verwendet. Twenty Fifteen legt eine Größe von 825 x 510 Pixel für Beitragsbilder fest.

Wenn wir nun unser Originalbild von Florenz mit der Größe von 1920 x 814 Pixel hochladen, schneidet WordPress das Bild auf die definierte Größe im Theme zurecht. Dabei wird das Bild von der Mitte aus zugeschnitten, d.h. gleichmäßig von links und rechts.

Als Ergebnis erhalten wir unser Beitragsbild:

Hier wird auch gleich das Problem ersichtlich.

Die Kathedrale von Florenz – rechts im Bild – wurde einfach abgeschnitten. Deshalb wollen wir das WordPress Beitragsbild bearbeiten und den Bildausschnitt selbst wählen können.

Neben dem eigentlichen Beitrag wird das Beitragsbild auch in einem Widget genutzt, welches das Bild als Thumbnail in der Größe 150 x 150 Pixel darstellt:

Auch hier würden wir gerne die Kathedrale als zentralen Punkt auswählen können.

WordPress Beitragsbild zuschneiden mit Core Feature

WordPress Core bietet die Möglichkeit, jedes hochgeladene Bild in der Mediathek zu bearbeiten. Beim Auswahl eines Beitragsbilds im Mediathek-Popup findet man dafür den Link Bild bearbeiten in der Sidebar rechts:

Wir können nun mit den Buttons das Bild auf Wunsch drehen sowie horizontal und vertikal spiegeln. Mit der Skalierungsfunktions rechts kann das Bild auch verkleinert werden.

Zusätzlich kann mit einem Klick auf das Bild und dem Ziehen des gewünschten Ausschnitts das Bild auch zugeschnitten und ein anderer Bildausschnitt gewählt werden.

Die WordPress Beitragsbilder können damit auch komplett ohne Plugin angepasst werden.

Ich persönlich bin aber kein Fan des Core Features zur Bildbearbeitung. Ich weiß nicht, ob es an mir liegt, aber ich komme mit der Bedienung des Tools nicht gut klar und finde die Usability verbesserungswürdig. Das Eingeben des Bildformats hat nicht wirklich funktioniert und WordPress hat das Bild partout 1 Pixel kleiner zugeschnitten als gewünscht.

Auch bei der Anpassung der Beitragsbilder für verschiedene Bildgrößen stößt man mit der Bildbearbeitung des Cores an Grenzen – es lassen sich nur alle Bildgrößen oder das Thumbnail bearbeiten, aber nicht individuell jedes Bild für alle festgelegten Größen.

Wie immer existieren aber passende Plugins, die wir nutzen können.

Alternative: Crop Thumbnails Plugin

Nachdem Post Thumbnail Editor nicht mehr weiter gepflegt wird, ist mein empfohlenes Plugin inzwischen Crop-Thumbnails.

Das Plugin wird aktiv weiterentwickelt, ist auf 10.000+ Websites installiert und hat in meinen Tests mit WordPress 4.8.3 reibungslos funktioniert.

WordPress Beitragsbild bearbeiten und zuschneiden

Das Plugin fügt direkt in der Metabox für das Beitragsbild einen neuen Button zum Zuschneiden des Artikelbilds hinzu.

Das Plugin zeigt dann alle definierten Bildgrößen in der rechten Spalte an. Diese können nach der Reihe ausgewählt werden, um für jede Bildgröße einzeln einen Bildausschnitt zu wählen.

Links oben kann für die ausgewählte Bildgröße ein Ausschnitt vom Originalbild gewählt werden und das Artikelbild wird individuell zugeschnitten.

Ergebnis: Individueller Ausschnitt für WordPress Beitragsbilder

Als Ergebnis haben wir nun ein Beitragsbild in der erforderlichen Größe von 825 x 510 Pixel für TwentyFifteen erhalten, welches die komplette Kathedrale anzeigt. Durch den gewählten Bildausschnitt am rechten Rand wurde das Originalbild nur links abgeschnitten.

Für die zweite, festgelegte Bildgröße von 150 x 150 Pixel für das Vorschaubild (Thumbnail) haben wir ebenfalls einen Bildausschnitt gewählt, der die Kathedrale im Fokus hat:

Damit ist nun auch das kleine Vorschaubild aussagekräftiger.

Plugin Einstellungen

Unter Einstellungen → Crop-Thumbnails im WordPress Backend kann konfiguriert werden, für welche Bildgrößen und Post Types das Feature zur Verfügung stehen soll.

Falls das Theme oder Plugins zu viele Bildgrößen definieren, kann hier das Feature für das Zuschneiden für bestimmte Bildgrößen ausgeblendet werden.

Achtung: Falls die Beitragsbilder nachträglich mit den bereits vorgestellten Plugins regeneriert werden, gehen die individuell ausgewählten Bildausschnitte verloren, weil ja alle Bildergrößen wieder neu erstellt werden. Vielen Dank an Ralph Stenzel für den Hinweis auf dieses Problem.

Überblick über alle Beiträge dieser Serie