Smartere Bildgenerierung und Handling für Wordpress

sascha fuchs
webdevs.xyz
Published in
1 min readFeb 4, 2017

Ich liebe CraftCMS, bin ein bekennender Fan aber ich muss wie viele andere auch mit Wordpress arbeiten. Das Leben ist kein Ponyhof :D Im Zuge der derzeitigen Arbeiten an Kittn 4.0 (aktuell noch im Alpha Status), baue ich aktuell Starterpacks für Wordpress und CraftCMS, um den Aufbau der Seiten zu beschleunigen.

Damit das ganze etwas Handlicher wird, lasse ich mehrere ImageCrops anfertigen die ich dann über eine zweite Funktion ins Template lade. Der Ausgabeblock arbeitet mit Lazysizes.js. Für mich wichtig war das ich die Größen und die Crops nicht mehrfach definieren muss, sondern von einer zentralen Stelle aus verwalte.

Zuerst die Generierung der Imagesets (das könnt ihr euch in eure function.php laden).

Einer der größeren Vorteile ist das wir Arrays mit den Größen und Crops definiert haben, womit andere Funktionen arbeiten können. Denn damit kann man mit einer zweiten Funktion (ich nenne das mal Macro weil man sich das von CraftCMS so angewöhnt hat), den Bildblock generieren in dem Bildformat das ich brauche.

In der Funktion, lasse ich den Bild-Array des ACF Felds einfließen, der Rest erledigt sich wie von Zauberhand von alleine.

<?php macro_mediaImageSet(get_field('photo'), 'media-image__image', 'rect'); ?>

Wer möchte kann auch mit Background Images arbeiten, in dem Fall erweitert sich der Aufruf, um ein `true` am Ende.

<?php macro_mediaImageSet(get_field('photo'), 'media-image__image', 'rect‘, true); ?>

--

--

sascha fuchs
webdevs.xyz

Software Engineer, Nerd, Code Yoda, Gamer, Star Wars Geek