Bereits ab Werk kann man innerhalb seiner WordPress-Themes mit so genannten „Image Sizes“ arbeiten. Verschiedene Bildergrößen sind in WordPress bereits vordefiniert (zu finden in WordPress unter Einstellungen > Mediathek): thumbnail, medium, large. Diese drei Mediengrößen werden auch von WordPress rege genutzt.

Nun kann man zwar eigene solcher Bildergrößen in seinem Theme über die Funktion add_image_size() registrieren, doch das hat einen entscheidenden Nachteil: Jedes Bild – ausnahmslos jedes Bild wohlbemerkt – wird beim Upload in verschiedenen Größen abgelegt. Genauer gesagt: WordPress schaut welche Bildergrößen bzw. „Image Sizes“ registriert sind und legt entsprechend viele Varianten an.

Konkretes Beispiel: Angenommen man hat eine neue Bildergröße „Kontakt“ registriert . Einziger Anwendungszweck ist das Zurechtschneiden eines Fotos, das der Kunde selber auf der Seite „Kontakt“ einpflegen kann. Das Bild in Kontakt wird immer korrekt zugeschnitten. Wunderbar. Allerdings pflegt der Kunde auf anderen Seiten fleißig Bildergalerien mit hunderten Fotos. Das Resultat: Jedes hochgeladene Foto wird ebenfalls in der neu registrierten Bildergröße „Kontakt“ angelegt. Speicherplatz-Verschwendung pur!

In der Praxis ist es zudem so, dass noch deutlich mehr Bildergrößen registriert werden müssten – je nach Komplexität des Templates und des Layouts. Da muss es doch bessere Lösungen geben, oder?

Eine Lösung bietet der „Aqua Resizer“. Das kleine PHP-Script ist schnell eingebunden und leicht zu benutzen. Es kann einfach in ein existierendes WordPress-Theme eingebunden werden und verrichtet zuverlässig seinen Dienst. Der „Aqua Resizer“ erlaubt das individuelle Zurechtschneiden einzelner Fotos direkt dort, wo sie tatsächlich gebraucht werden. Die perfekte Lösung um Fotos also nicht hundertfach in zig Versionen ablegen zu lassen – sondern nur passgenau je nach Bedarf.

Das PHP-Script kann direkt von Github runtergeladen werden

. Nun kann man die PHP-Datei aq_resizer.php zum Beispiel auf der gleichen Ebene wie die Datei functions.php ablegen. Anschließend muss man nur noch die Datei functions.php entsprechend erweitern, damit das Script korrekt eingebunden wird:

Und schon steht die gesamte Funktionalität des Aqua Resizers zur Verfügung.

Möchte man nun innerhalb eines Templates ein Bild individuell zurecht schneiden lassen, reicht es die Bild-Quelle über die Funktion aq_resize() entsprechend generieren zu lassen. Anders ausgedrückt: Ruft man die Funktion aq_resize() mit den entsprechenden Parametern auf, schneidet der „Aqua Resizer“ das Bild entsprechend zurecht und gibt die Quelle des zurecht geschnittenen Bildes zurück:

Zahlreiche Parameter kann man übergeben um das Zurechtschneiden durch den „Aqua Resizer“ granular zu steuern:

$url: Unerlässlich ist natürlich die Quelle des Originalbildes. Diese dient „Aqua Resizer“ als Ausgangspunkt.

$width: Die gewünschte Breite des zurecht geschnittenen Bildes.

$height: Die gewünschte Höhe des zurecht geschnittenen Bildes.

$crop: Soll das Bild „hart“ geschnitten werden? Setzt man dieser Wert auf „true“ oder „1„, werden die Maße „knallhart“ berücksichtigt und das Motiv abgeschnitten. Bei Stimmungsfotos ist das prima. Sind Menschen auf dem Foto zu sehen kann es passieren, dass manche Personen unschön abgeschnitten werden. Welche Option richtig ist, hängt also vom Anwendungszweck ab.

$single: Standardmäßig wird die Quelle des Bilder zurück gegeben. Allerdings kann man diesen Wert auch auf „false“ stellen. Damit wird statt der Bildquelle ein Array zurück gegeben, der die Quelle, Breite und höhe gleichermaßen beinhaltet.

$upscale: Diese Option kann ebenfalls praktisch sein. standardmäßig reduziert „Aqua Resizer“ Fotos. Das heißt er skaliert nach unten. Große Bilder, werden gemäß den mitgeteilten Maßen also verkleinert. Setzt man $upscale auf „true„, kann man kleinere Bilder aber auch „forcieren“ vergrößert zu werden. Ds ist zwar nicht ideal (Qualitätverlust), aber immerhin besser als wenn gar kein Foto ausgegeben würde (zum Beispiel weil der Kunde das Quellfoto schon viel zu klein hochgeladen hat).

Konkret könnte ein realistisches Beispiel also folgendermaßen aussehen:

In diesem konkreten Falle würde „Aqua Resizer“ dafür sorgen, dass das Bild mit der Quelle http://meineseite.de/foto.jpg auf eine Breite von 250 Pixeln sowie eine Höhe von 100 Pixel skaliert würde. Da wir den Wert hinter den Maßen auf „1“ gesetzt haben, wird hart abgeschnitten. Das Ziel-Foto wird also haargenau diese Maße haben. Den folgenden Wert für $single setzen wir auf „0“, da wir nur die Quelle des neuen Fotos brauchen und keinen Array mit mehr Informationen. Ganz zum Schluss setzen wir noch eine „1“. Diese setzt $upscale auf true. Damit sind wir sicher, dass das Bild dennoch generiert wird – auch wenn das Quellmaterial viel zu klein war. Ganz am Ende müssen wir die neu generierte Bildquelle einfach im SRC-Attribut eines Bildes als Bildquelle ausgeben.

Übrigens kann man das ganze auch etwas kürzer gestalten, wenn man auf $upscale entsprechend verzichtet:

Auch wenn der „Aqua Resizer“ viele Vorteile hat, so gibt es natürlich ebenfalls Schattenseiten.

Ein Nachteil betrifft das Aufräumen bzw. Löschen nicht mehr verwendeter Bilder: Das findet schlichtweg nicht statt. Anders ausgedrückt: Lässt man ein Bild via „Aqua Resizer“ erstellen und ändert anschließend die Maße (zum Beispiel weil man auf der Website festgestellt hat, dass andere Maße doch besser passen würden), wird das ursprünglich erstellte – und mittlerweile überflüssige – Bild nicht gelöscht.

Wird die Funktion aq_resize() aufgerufen, prüft „Aqua Resizer“ ob das Bild in diesen Maßen bereits erstellt wurde. Ist dies nicht der Fall, muss das Bild erstmal erstellt werden. Das dauert also etwas und das kann der Besucher der Website mitunter spüren. Zudem werden wertvolle Server-Ressourcen „instant“ benötigt, die unter Umständen nicht zur Verfügung stehen. Allerdings sollte man hier etwas relativieren: Statischere Websites mit Page-Cache, dürften die fertig erstellten Bilder bereits produziert „in der Auslage“ haben. Dort ist das Problem also nicht akut und ein Warten entfällt (im Gegensatz zu hochdynamischen Websites).

Das Team von „Deliciousbrains“ hat sich dieser Thematik angenommen und ein praktisches WordPress-Plugin entwickelt, welches die Vorteile des „Aqua Resizers“ ohne dessen Nachteile aufweisen soll. Das Plugin nennt sich „Image Processing Queue“ und kann kostenlos auf Github geladen werden. Das Prinzip ist ähnlich, aber doch anders: Im Falle von „Image Processing Queue“ wählt das Plugin erstmal das erstbeste Motiv, das „halbwegs passt“. So ist man sicher, dass blitzschnell ein Foto zur Verfügung steht. Im Hintergrund wird das „perfekte“ Motiv dann aber in die „Image Processing Queue“ eingereiht und ressourcenschonend hergestellt (der Server entscheidet in welchem Tempo er diese „Queue“ abarbeitet). Sobald diese Aufgabe erledigt ist, steht das „perfekt angepasste Foto“ dem nächsten Besucher schon zur Verfügung.

Mit der Wahl, kommt die Qual: Welches Tool man nutzt um seine Bilder „auf Vordermann“ zu bringen, muss konkret von Fall zu Fall entschieden werden. Helferlein wie „Aqua Resizer“ oder das Plugin „Image Processing Queue“ helfen allerdings ungemein im Alltag. Gerade wer sehr individuelle Themes mit zahlreichen unterschiedlichen Templates entwickelt – und entsprechend zahlreichen höchst unterschiedlich ausfallenen Bildmotiven – wird froh sein, solche Tools einsetzen zu können. Natürlich ließe sich so manches via Photoshop im Vorfeld zurechtstutzen. Doch das beherrschen halt viele Kunden nicht. Da ist es toll, wenn das Theme soviel Arbeit wie möglich abnimmt.