Image Aspect Ratio Crop Field
Richtige Bildgrößen für mobile Geräte und den Desktop sind immens wichtig.
Damit wir dieses Ziel der richtigen Bildgrößen und des richtigen Seitenverhältnisses erreichen können, hilft uns diese ACF-Erweiterung.
Dieses Plugin kann man ganz einfach auf der WordPress-Plugin Website downloaden und installieren. Nach der Installation erhält man einen weiteren Feldtyp mit dem gleichnamigen Plugin-Namen.
Zu den wichtigsten Feldern zählt „Crop type„, das spezifiziert ob das Bild im Verhältnis oder mittels absoluten Pixelwerten geschnitten werden soll. Außerdem „Width“ und „Height“ zur Angabe des Seiten-Verhältnisses oder der absoluten Pixeln.
Hier als Beispiel haben wir die Werte auf „Aspect Ratio“ mit einer Breite von 16 und einer Höhe von 9 gewählt, was dem Zuschneiden des Bildes auf 16:9 entspricht. Der Upload funktioniert weiterhin über den WordPress File-Upload. Nach dem Auswählen des Bildes bekommt man diesen Dialog zu sehen:
Man kann das 16:9 Feld mit Hilfe der Maus so bewegen wie man möchte. Man kann das Feld verkleinern oder vergrößern, der 16:9 Aspekt bleibt aber immer erhalten! Das ist sehr anwenderfreundlich und intuitiv zu bedienen. Der große Vorteil: Man bekommt ohne viel Aufwand Bilder im entsprechenden Format bereit gestellt, welche optimal für die Website eingesetzt werden können.
ACF Tools – Browser Erweiterung
Die Chrome bzw. Firefox Erweiterung „ACF Tools“ hat einen etwas unscheinbaren Namen, die Funktion ist aber alles andere als unscheinbar!
Sehr nützlich ist die Erweiterung vor allem für ACF Repeater Felder, da diese Felder einiges an Code zur Ausgabe benötigen, aber die Code-Basis eigentlich immer die selbe ist!
Wir haben testweise ein Repeater-Feld erstellt. Nach der Installation der Chrome-Extension bekommt man einen zusätzlichen Button, der es ermöglicht den Code zur Ausgabe zu generieren.
Wählt man den Button „Code mit Unterfeldern“ kopieren, wird der gesamte Code in die Zwischenablage gespeichert. Für den Repeater mit einem Feld für Bild und einem für Text wird folgender Code generiert:
Das spart natürlich an Zeit, wenn die Code-Grundstruktur bereits gegeben ist! Wir müssen uns somit nur noch um die Zusatzfunktionalität selbst kümmern.
Unglücklicherweise wird das „Image Crop“ Plugin noch nicht unterstützt, aber das liegt natürlich daran, dass es kein Standard-Feld von ACF ist!
Zum Funktionsumfang zählt außerdem, dass man direkt im Editor sehen kann, welchen Namen das Feld hat, also wie man es ansprechen kann! Das ist nicht unnützlich, da man so nicht extra den ACF Editor nochmals aufrufen muss. Oftmals ist das einfach mühsam!
Außerdem bietet „ACF Tools“ uns die Möglichkeit die Dokumentation eines Feld-Typen sofort zu sehen, indem wir den entsprechenden Typen im ACF Editor anklickt. Nice-to-have aber natürlich nichts, das wir alltäglich benötigen.
Dieser Artikel ist inspiriert von WP Editorial.