Mit Einführung der Version 2.1 wurde auch das Breakdance-Builder-Image-Element generalüberholt. Das führt zu einem cleaneren Code, leider aber auch zum Verlust einiger Funktionen, was in vielen Foren erstmal zu einiger Verwirrung geführt hat.
Vorweg: Keine Angst, man kann diese Funktionen auf andere Art und Weise hinzufügen.
Was es also genau mit dem neuen Image-Element auf sich hat und wie du es benutzen kannst, zeige ich dir hier im Artikel.
1. Warum wurde das Image Element in Breakdance verändert?
Wenn man es genau nimmt, wurde das Element nicht verändert, sondern es ist ein gänzlich neues Image Element, das nur ab Version 2.1 verwendet werden kann.
Ziel war es, den Code zu „verschlanken“. So benutzt das neue Element keine Container mehr, sondern lediglich einen einfachen IMG Tag. Das ist wesentlich besser, wenn du lediglich ein einfaches Bild ohne große Schnörkel und Extras anzeigen lassen möchtest.
Hinweis: Das bisherige Image-Element heißt ab sofort „Image V1“ und kann weiterhin verwendet werden, zumindest wenn es bereits zuvor auf einer Seite implementiert wurde.
2. Was ist der Vorteil des neuen Image-Elements?
Da der Wegfall von Containern natürlich einige Veränderungen nach sich zieht (darauf komme ich im nächsten Punkt), muss es trotzdem natürlich auch Vorteile geben, ansonsten hätte man die Veränderung ja nicht vorgenommen. Diese lauten:
- Du kannst Bilder nicht nur per Mediathek, sondern ganz einfach auch durch Eingabe der URL einbinden
- Endlich ist der Alt-TAG des Bildes mit der Mediathek verbunden und aktualisiert sich nun auch selbständig, wenn dieser nachträglich in der Mediathek angepasst wird. (Das war zuvor nicht so und echt nervig)
- Falls gewünscht, kannst du nun die WordPress „Srcset & Sizes“ Option abschalten, die dafür zuständig ist, daß verschiedene Bildgrößen auf unterschiedlichen Bildschirmformaten ausgegeben werden. Damit kannst du z.B. das Beibehalten derselben Bildschirmgröße über alle Ausgabegeräte hinweg selbst bestimmen.
3. Was ändert sich in der Bedienung?
Da es wie bereits erwähnt keine Container mehr im Element gibt, können manche Funktionen auch nicht mehr direkt über das Element selber gesteuert werden. Jedoch kannst du natürlich selber einen Container hinzufügen und dir die Funktionen wieder „zurückholen“.
3.1 Link oder Lightbox
Möchtest du einen Link auf dein Bild legen, dann benötigst du dafür nun das Wrapper Link Element.
Lege dein Bild in dieses Element und lege den Link direkt im Wrapper-Link-Element fest (Link-Symbol)
Möchtest du eine Lightbox anzeigen lassen, dann legst du das ebenfalls hier drin fest. Du musst jetzt lediglich das Zahnrad-Symbol anklicken und aus dem Dropdown „Lightbox“ auswählen.
3.2 Caption
Man mag es glauben oder nicht, aber es gibt keine Caption (Bildunterschrift) mehr.
Diese musst du nun selber nachbauen, indem du dein Bild und ein Textelement zusammen in einen Container (Div) steckst.
3.3 Zoom on Hover
Diesen Effekt konntest du in Image V1 ganz einfach anlegen. Auch hier brauchst du jetzt einen kleinen Umweg.
- Stecke zuerst dein Bild in einen Container (Div oder Wrapper-Link-Element) und stelle in diesem den Overflow auf „hidden“ (Advanced > Wrapper > Layout > Advanced > Overflow)
- Beim Image-Element selbst legst du in den Advanced Wrapper Hover Settings > Effects eine Transition (z.B. Duration: 400ms und Timing Function: ease) und einen Transform > Scale – Effekt an.
- Fertig!
3.4 Maskieren
Hier ist der Wegfall der Maskieren-Option aus dem Image-Element nicht so schlimm, da du hier einfach nur das Masker-Element benutzen musst.
4. Fazit
Ja, es ist definitiv eine kleine Umgewöhnung, vor allem, da man nun Funktionen „nachbauen“ muss, die man zuerst bequem über das Element erreichen konnte.
Aber: Wie oft haben wir Bilder einfach nur so – ganz ohne fancy Optionen – in Beiträge oder Seiten eingebaut? Ich für meinen Teil zu 95%, entsprechend freue ich mich mehr über cleanen Code, als daß ich mich über Workarounds ärgern würde.
