Zuschneiden und Ausrichten von Thumbnails in WordPress

Da es jetzt schon das ein oder andere Mal vorgekommen ist, dass befreundete Fotografen mich bei unterschiedlichsten Problemen im Zusammenhang mit WordPress um Hilfe gebeten haben, habe ich mir überlegt, dass sich möglicherweise auch andere WordPress-Nutzer für meine Lösungswege bei bestimmten Problemen sowie Tipps und Tricks im Umgang mit Plugins und Themes für WordPress interessieren.

Daher habe ich die neue Rubrik „WordPress-Tipps und Tricks“ erstellt, in der ich in Zukunft in unregelmäßigen Abständen – eben wann immer mal wieder ein Problem auftaucht, das es zu beheben gilt – Beiträge mit Tipps und Tricks bzw. Hilfestellungen im Umgang mit WordPress veröffentlichen werde. Im Internet gibt es natürlich endlos viele Guides, Anleitungen, Howtos, die meisten sind jedoch ziemlich allgemein gehalten und meistens ausschließlich in englischer Sprache verfasst. Meine deutschsprachigen Anleitungen sollen sich vor allem – aber nicht ausschließlich! – an Fotografen bzw. Betreiber eines Foto-Blogs richten.

Wordpress Thumbnails

Den Anfang macht heute ein Problem, das vermutlich nicht nur Fotografen, sondern auch viele andere WordPress-Nutzer kennen: Das automatische Zurechtschneiden von Thumbnails, das nicht immer die gewünschten Ergebnisse liefert.

Was sind eigentlich Thumbnails?

Thumbnails sind kleine Miniautansichten eines Fotos, die von WordPress automatisch erzeugt werden.

Wofür sind Thumbnails gut?

Thumbnails sind dazu da, um das Laden einer Webseite – insbesondere bei der Verwendung von vielen Fotos – zu beschleunigen, da auf diesem Weg nur die verkleinerten Miniaturbilder und nicht die deutlich größeren Original-Auflösungen der Dateien heruntergeladen werden müssen.

Dies mag dem ein oder anderen in Zeiten von immer schnelleren Internet-Leitungen zwar eher vernachlässigbar vorkommen, jedoch sollte man nicht vergessen, dass viele Menschen heute nicht nur von zuhause sondern auch unterwegs entweder mit dem Smartphone oder Tablet im Internet surfen, wo nicht immer solch zügige Datenübertragungen wie im heimischen Netzwerk garantiert sind und erst recht nicht jeder unterwegs eine Internet-Flatrate besitzt. Hinzu kommt, dass wir in den westlichen Länden zwar beinahe überall Internet in DSL-Qualität oder besser haben, aber auf anderen Kontinenten ist noch lange nicht überall flächendeckend schnelles Internet verfügbar. Insofern kommt man auch in Zukunft so schnell nicht um Thumbnails herum.

Wie erstellt WordPress Thumbnails?

Grundsätzlich gilt: Wann immer man eine Bilddatei in WordPress hochlädt, erstellt WordPress automatisch etliche verkleinerte Versionen der Datei; unter anderem eben auch ein Miniaturbild, das sog. Thumbnail – auch als „Crop-Faktor“ bezeichnet (von engl. „to crop“ – beschneiden).

Üblicherweise gibt es außerdem noch eine mittlere und eine große Version sowie das Bild in Original-Größe. Je nach verwendetem Theme können Bilder auch in weiteren Größen (etwa für die  Beitrags-Vorschau) beschnitten werden.

Die Größe der Miniaturbilder kann unter „Einstellungen“ -> „Medien“ eingesehen und geändert werden – üblicherweise sind die Miniaturbilder quadratisch und 100 x 100 bis 200 x 200 Pixel groß (die Werte können je nach verwendetem Theme variieren). Damit die Miniaturansichten nicht perspektivisch verzerrt werden, sollte der Haken bei „Beschneide das Miniaturbild auf die exakte Größe (Miniaturbilder sind normalerweise proportional)“ gesetzt werden.

Einstellungen für Miniaturbilder

Lädt man nun ein Foto hoch, das nicht quadratisch ist, erstellt WordPress das Thumbnail immer aus dem Mittelpunkt des Bildes heraus.

Dies kann mitunter unschöne Folgen haben. Gerade bei Hochkant-Aufnahmen von Menschen kommt es relativ häufig vor, dass z.B. Gesichter einfach zur Hälfte abgeschnitten werden. Hier ein Beispiel für äußerst unschönes Zuschneiden von Thumbnails:

Unschönes Zuschneiden von Thumbnails

Lange habe ich dieses Problem einfach ignoriert, bis mich vor einigen Tagen ein befreundeter Fotograf auf das Zuschneiden von Thumbnails ansprach. Dadurch wurde mein Ehrgeiz geweckt und ich habe mich einmal schlau gemacht und gleich mehrere Lösungswege gefunden.

Lösungsweg 1 – manuelle Anpassung

Seit der WordPress-Version 3.9 gibt es die Möglichkeit, Thumbnails nach dem Upload manuell zu verändern bzw. anzupassen.

Dies ist sehr einfach, allerdings auch ziemlich zeitaufwändig, wenn man bereits etliche hundert oder gar tausende Fotos in seinem Blog hochgeladen hat, da man die Miniaturansicht für jedes Foto separat ändern muss. Der Vollständigkeit halber erkläre ich dieses durchaus sinnvolle Feature natürlich trotzdem:

Sucht zunächst das Foto, für das ihr die Miniaturansicht ändern wollt, in eurer Mediathek oder klickt im Beitrags-Editor von WordPress auf das Bearbeiten-Icon. Anschließend klickt ihr auf „Bild bearbeiten“. Für meine Anleitung habe ich das mittige Foto aus dem Beispiel-Bild von oben ausgewählt.

Bild bearbeiten

Dann solltet ihr dieses Fenster mit diversen Bearbeitungsfunktionen angezeigt bekommen:

Bild bearbeiten2

Ganz wichtig: Da wir nur das Thumbnail bzw. die Miniaturansicht ändern wollen, unbedingt den Haken bei „Änderungen anwenden auf:“ auf Miniaturbild setzen!

Anschließend könnt ihr in das größere Bild linksklicken und mit der Maus ein Rechteck ziehen, das später euer Thumbnail werden soll. Damit das Thumbnail auch das richtige Format hat (wir erinnern uns: im Normalfall quadratisch), solltet ihr bei Bildauschnitt am besten ein Bildformat von 1:1 oder eine gleiche Pixelzahl eingeben. Je nachdem wie viel von dem Foto ihr als Thumbnail anzeigen wollt, müsst ihr die Pixelanzahl entsprechend vergrößern oder verkleinern. In meinem Beispiel habe ich die Werte 533 x 533 Pixel eingegeben.

Bild bearbeiten3

Nun solltet ihr den eingestellten Ausschnitt, der euer Thumbnail werden soll, per Drag-and-Drop an die richtige Stelle verschieben. Darauf hin müsst ihr nur noch ganz oben links auf das Freistellen-Symbol klicken, damit das zukünftige neue Miniaturbild zugeschnitten wird.

Bild bearbeiten4

Zum Abschluss das Speichern nicht vergessen!

Wenn ihr jetzt das Bearbeitungsfenster schließt und den Blog-Eintrag in eurem Browser aktualisiert (Taste F5), sollte das neue Thumbnail auch direkt angezeigt werden.

Mit angepassten Thumbnails sieht das Beispiel von oben doch gleich viel besser aus:

Schönes Zuschneiden von Thumbnails

Hinweis: Im Administrationsbereich bzw. in der Mediathek von WordPress wird unter Umständen weiterhin das alte Thumbnail angezeigt, in den Beiträgen und Seiten eures Blogs werden jedoch stets die aktualisierten Miniaturansichten gezeigt.

Dieser Ansatz bietet sich also vor allem an, wenn ihr mit dem Zuschneiden aus der Mitte heraus grundsätzlich zufrieden seid und nur bei einzelnen Fotos nachträglich das Thumbnail ändern wollt.

Lösungsweg 2 – Anpassung mit Plugin

Für alle weiteren Uploads käme z.B. das Plugin „Thumbnail Crop Position“ in Frage. Einfach das Plugin installieren und aktivieren, schon lässt sich bereits vor dem Upload festlegen, von welchem Punkt aus (etwa links oben, mitte oben, rechts unten usw.) das Miniaturbild ausgeschnitten werden soll.

Dazu muss einfach vor dem Upload der Bilder das jeweilige Kästchen mit der gewünschten Ausrichtung angeklickt werden. Dadurch werden alle Thumbnails gemäß der getroffenen Auswahl direkt beim Hochladen zurechtgeschnitten.

Auswahl der Zuschneideposition

Dies Methode setzt natürlich voraus, dass man im Voraus bereits weiß, welche Stelle sich am besten eignet, um die Ausschnitte anzusetzen.

Lösungsweg 3 – Rückwirkende Änderung mit Plugins

Um die Thumbnails auch von bereits hochgeladenen Bildern nachträglich zu ändern, kann man das äußerst beliebte und bewährte Plugin „Regenerate Thumbnails“ in Kombination mit dem im Lösungsansatz 2 vorgestellten Plugin „Thumbnail Crop Position“ verwenden.

Zunächst beide Plugins installieren und aktivieren. Daraufhin einfach im Menü zum Bilderupload (wie in Lösungsansatz 2) ein Kästchen mit den verschiedenen zur Verfügung stehenden Ausrichtungsmöglichkeiten anklicken.

Auswahl der Zuschneideposition

Um die getroffene Ausrichtung nun auf alle bestehenden Bilder in der Mediathek anzuwenden, müsst ihr lediglich im Menü „Werkzeuge“ auf „Regen. Thumbnails“ klicken. Abschließend in diesem Fenster nur noch unten auf „Regenerate All Thumbnails“ klicken und schon werden alle Miniaturansichten gemäß der zuvor getroffenen Auswahl neu generiert.

Thumbnails generieren

Dieser Vorgang kann beliebig oft wiederholt werden. Die Bildqualität wird nicht beeinträchtigt, da die Thumbnails jedes Mal neu aus den Originaldateien generiert werden.

Lösungsweg 4 – für Fortgeschittene WordPress-Nutzer

Der letzte Lösungsweg richtet sich eher an fortgeschrittene WordPress-Nutzer.

Man kann auch neue Thumbnail-Größen und -Crop-Faktoren selbst definieren. Dazu muss man in der Datei „function.php“ ein paar Code-Zeilen einfügen.

[Ausführliche Anleitung folgt…]

Habt ihr noch weitere Tipps oder Anmerkungen für den Umgang mit Thumbnails? Dann schreibt mir doch einfach einen Kommentar.

Hinweis: Dieser Guide wurde für WordPress Version 4.1.1 erstellt. In früheren oder späteren Versionen können Funktionen etwas variieren und/oder anders aussehen.

Hier geht es zur Übersicht über alle Beiträge zum Thema WordPress.

Veröffentlicht in Wordpress-Tipps und verschlagwortet mit , , .