Imagrgrid V2.1 - Lazy Loading

  • Hallo Mario,

    ZP 16 unterstützt ja das Lazy Loading. Wäre es möglich, dies bei deinem Tool auch zu implementieren? Ich kann es natürlich händisch in den Code eintragen, aber es wird ja dann bei der nächsten Bearbeitung im ZP vermutlich gelöscht werden.

    Besten Dank

    Tobias

    • Offizieller Beitrag

    Hallo Mario,

    ZP 16 unterstützt ja das Lazy Loading. Wäre es möglich, dies bei deinem Tool auch zu implementieren? Ich kann es natürlich händisch in den Code eintragen, aber es wird ja dann bei der nächsten Bearbeitung im ZP vermutlich gelöscht werden.

    Besten Dank

    Tobias

    Stimmt das macht hier durchaus Sinn. Werde ich nachrüsten.




    Und wo ich gerade frage: Implementierung von WebP - wäre das möglich? Mit Fallback JPG? Weiß aber gar nicht, ob ZP überhaupt mit WebP umgehen kann...

    Leider kann ZP noch nicht mit "WebP" umgehen.

    Man könnte zwar etwas tricksen und versuchen die WebP-Datei als "Datei-Import" einfügen, das wäre allerdings mit erheblichem Aufwand verbunden, zumal die Bild-Attribute auch mit eingefügt werden müssten. Und die "Fallback-Datei müsste ja auch noch dazu. Da warte ich lieber bis ZP das impementiert.


    Ich könnte das ja mal mit einem Bild probieren, für Imagegrid aber im Moment keine Option.

  • Super Mario, besten Dank

    Das Widget "Bild WebP" funktioniert einwandfrei. Wäre super, wenn man bei der WebP-Datei noch Titel und ALT eintragen könnte. Ist mir bewusst, dass das ein Anwendungsbruch darstellt, da dies ja sonst in der ZP Bilderverwaltung passiert, hier aber im Widget selbst erfolgen müsste.

    Viele Grüße

    Tobias

    • Offizieller Beitrag

    Genau das hatte ich eigentlich vor, das geht aber nicht bzw. ist nicht nötig.

    Ich habe gestern auch eine ganze Weile gebraucht bis ich raus gefunden habe das alle Einstellungen inkl. der Bild-Attribute für den IMG-Tag auch für die WebP gelten.


    Einfach mal in der Bildverwaltung für die JPEG ein "Title-Attribut" (Bildbeschreibung) vergeben. Und anschließend in der Browservorschau mit der Maus kurz über dem WebP-Bild verweilen, dann müsste das "Title-Attribut" angezeigt werden.


    Ich habe hier mal Alt- und Title-Attribut nachgereicht. LINK



    Kurz zur Erklärung, der Code sieht ja ungefähr so aus.

    Code
    <source srcset="media/files/webp/q1.webp" type="image/webp">
    <source srcset="media/images/q1.jpg" type="image/jpeg">
    <img loading="lazy" class="wzp-webP_id3118" src="media/images/q1.jpg" alt="Frau Hut" title="Frau mit Hut" />
    • Die erste Zeile schnappt sich der Browser der WebP kann.
    • Die zweite Zeile schnappt sich der Browser der die erste nicht lesen kann.
    • Die Formatierung (CSS-Klasse), das Lazyload sowie die Bildattribute nehmen alle Browser aus dem IMG-Tag der 3. Zeile.