Picture/Image-Tag mit weiteren Parametern oder Alternativen?

Hallo zusammen,

mein Usecase ist folgendes:

Ich benötige auf dem <img> Tag des jeweiligen Bildes weitere data-* Attribute zur Filterung über eine externe Library.
Kann ich über das {{picture::*}} oder {{image::*}} Insert-Tag solche Attribute ergänzen? {{image::xxx.jpg?class=test&data-attribute=abc}} übernimmt er mir nicht. (gleiches gilt für picture)

Oder kann ich mir alternativ nur das Thumbnail des Bildes aus den Assets ausgeben lassen um mir drumherum mein eigenes img-tag zu bauen?

Ziel ist letztlich in etwa so:

HTML-Code:

---

<img src="thumbnail aus assets" class="xxx" data-attribute1="xxx" data-attribute2="xxx" data-attribute3="xxx" />

---

Die Suchfunktion hat mich leider nicht wirklich weitergebracht.

Danke! :)

Hi,

laut Dokumentation: https://docs.contao.org/manual/de/ar...g/insert-tags/ kann für das picture-InsertTag ein Template-Parameter übergeben werden.

Somit wäre mein erster Ansatz, das Template 'picture-default' abzuleiten.

Falls deine data-Attribute noch weiter dynamisch sind, dann könntest du dir auch einen eigenen InsertTag schreiben.

Viele Grüße
René

Zitat:

---

Zitat von Fehrmann

Hi,

laut Dokumentation: https://docs.contao.org/manual/de/ar...g/insert-tags/ kann für das picture-InsertTag ein Template-Parameter übergeben werden.

Somit wäre mein erster Ansatz, das Template 'picture-default' abzuleiten.

Falls deine data-Attribute noch weiter dynamisch sind, dann könntest du dir auch einen eigenen InsertTag schreiben.

Viele Grüße
René

---

Soweit habe ich gar nicht gedacht.. Manchmal sieht man den Wald vor lauter Bäumen nicht. Das dürfte tatsächlich mein Problem schon lösen. Vielen Dank!

PS: Gibt es einen Grund, warum lediglich für das picture-InsertTag ein Template übergeben werden kann und für das image-InsertTag nicht? Nicht, dass es einen gravierenden Unterschied machen würde.. Ich kann mir das picture-template ja so anpassen, dass es wie ein 0815 img-Tag arbeitet.

Liebe Grüße :)

Für {{image}} gibt es generell kein Template. {{image}} gibt nur <img> aus - und im Falle von Responsive Images wird das <img> im picture_default Templat ausgegeben.

Ich würde außerdem wenn dann immer denn {{figure}} Insert Tag verwenden.

Zitat:

---

Zitat von Spooky

Für {{image}} gibt es generell kein Template. {{image}} gibt nur <img> aus - und im Falle von Responsive Images wird das <img> im picture_default Templat ausgegeben.

Ich würde außerdem wenn dann immer denn {{figure}} Insert Tag verwenden.

---

Das Figure InsertTag kann ich aktuell auf Grund von Kompatiblitätsproblemen noch nicht verwenden. Da wir erst aufwendig migrieren müssen, updaten wir erst im Q1 von 4.4.57.

Grundsätzlich spricht aber nichts dagegen, mir das picture-InsertTag so umzubauen, dass es mir nur das <img> Tag mit entsprechenden data-attributen ausgibt, oder? Ich brauch es unter Anderem für jQuery Isotope inkl. Kategorien-Filterung und Lazy Loading ( auf Grund von alternativem src-Attribute ) in Kombination mit Infinite Scroll.

Rein aus Interesse. Habe ich ohne die InsertTags die Möglichkeit die Assets-Generierung bei Seitenaufruf manuell anzustoßen, sofern für die Bilder aus der Dateiverwaltung ( Link wird aus uuid->path generiert ) kein entsprechendes thumbnail/asset vorhanden ist?

Das HTML5 loading="lazy" Attribut kann ab Contao 4.9 per Bildgrößenkonfiguration hinzugefügt werden.. ;)

Zitat:

---

Zitat von Spooky

Das HTML5 loading="lazy" Attribut kann ab Contao 4.9 per Bildgrößenkonfiguration hinzugefügt werden.. ;)

---

Das ist mir bewusst. :) bringt mir allerdings erst etwas, wenn wir auf 4.9 switchen :D Danke auf jeden Fall für deinen Support!

Contao 4.4 wird nächste Woche das Lebensende erreichen, also ich würde das Update nicht weiter hinaus schieben und auch keine Energie mehr in solche Dinge stecken.