[Frage] FLUID Images mit Lazyload

  • Whizzl Whizzl
    Typ im Roten Hemd
    0 x
    3 Beiträge
    0 Hilfreiche Beiträge
    15. 03. 2019, 11:43

    Guten Tag,

    Ich habe ein Problem Lazyload für meine Bilder einzurichten.

    Standardmäßig (in meinen MASK-Elementen) richte Ich dies wie folgt ein, was auch funktioniert:

    <img src="{f:uri.image(image: data.assets.0, cropVariant: 'default', maxWidth: 550)}"
    data-src="{f:uri.image(image: data.assets.0, cropVariant: 'default', maxWidth: 1920)}"
    class="text-image__image lazyload" alt="{data.assets.alternative.0}"/>

    Nun habe Ich ein Element, in dem meine Bilder mittels einer Schleife aufgebaut werden und Ich bekomme es nicht hin, die Iteration anzuhängen:

    <f:for each="{data.assets}" as="image" iteration="image_counter">
    <figure class="ps_gallery__figure" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="/myext/fileadmin{data.assets.{image_counter.index}.identifier}" itemprop="contentUrl" data-size="600x400">
    <img src="{f:uri.image(image: data.assets.{image_counter.index}, cropVariant: 'default', maxWidth: 550)}"
    data-src="{f:uri.image(image: data.assets.{image_counter.index}, cropVariant: 'default', maxWidth: 1920)}"
    class="ps_gallery__image lazyload" alt="{data.assets.alternative.{image_counter.index}}"/>
    </a>
    </figure>
    </f:for>

    Ohne das anhängen der Iteration {image_counter.index} (hinter dem data.assets. innerhalb des IMG-Tags) funktioniert der Aufbau.

    Kann mit hier jemand helfen?

    LG

  • Hilfreichster Beitrag

  • Norman2k Norman2k
    Jedi-General
    1 x
    1622 Beiträge
    73 Hilfreiche Beiträge
    15. 03. 2019, 14:13 - Hilfreichster Beitrag

    "Ich bekomme es nicht hin" ist wirklich eine sehr aussagekräftige Fehlerbeschreibung ;)

    Wieso greifst du denn überhaupt auf {data.assets} zu und nicht auf {image}?

    {data.assets.{image_counter.index}.identifier} == {image.identifier}


  • 1
  • Norman2k Norman2k
    Jedi-General
    1 x
    1622 Beiträge
    73 Hilfreiche Beiträge
    15. 03. 2019, 14:13

    "Ich bekomme es nicht hin" ist wirklich eine sehr aussagekräftige Fehlerbeschreibung ;)

    Wieso greifst du denn überhaupt auf {data.assets} zu und nicht auf {image}?

    {data.assets.{image_counter.index}.identifier} == {image.identifier}

  • Whizzl Whizzl
    Typ im Roten Hemd
    0 x
    3 Beiträge
    0 Hilfreiche Beiträge
    15. 03. 2019, 15:14

    Hey Norman,

    bitte entschuldige die wage Fehlerbeschreibung.
    Leider bekomme Ich keine Fehlermeldung. Die Bilder werden im Frontend gar nicht erst geladen. Die Seite wird geladen, es wird jedoch kein IMG-Tag angelegt.

    Ich verwende {data.assets} weil die Bilder in dem betroffenen MASK-Element als {assets} definiert wurden und der Wunsch ist, dieses nicht zu verändern. :-/

    Die genaue Problematik liegt in der inline notation:
    {f:uri.image(image: data.assets.{image_counter.index}, cropVariant: 'default', maxWidth: 550)}

    Da Ich auch hier die cropVariants bestehen lassen soll, bin Ich ein wenig auf diesen Aufbau angewiesen.

    Würde Ich die {assets} des Mask-Elements in {image) umwandeln, ließe sich diese inline-notation verwenden?
    {f:uri.image(image: image.identifiert, cropVariant: 'default', maxWidth: 550)}

    Vielen lieben Dank für die Rückmeldung!

  • Norman2k Norman2k
    Jedi-General
    1 x
    1622 Beiträge
    73 Hilfreiche Beiträge
    15. 03. 2019, 15:29

    {data.assets} ist doch das Array/Object mit allen Bildern und in der foreach sagst du <f:for each="{data.assets}" as="image" ... somit steht dir doch das einzelne Bild, auf das der Zeiger gerade zeigt, als {image} zur Verfügung und du musst nicht das gesamte Array ansprechen.

    Also wenn du den ersten Durchlauf hast, steht dir data.assets.0 als image zur Verfügung, ist ja das selbe wie z.B. in PHP

  • Whizzl Whizzl
    Typ im Roten Hemd
    0 x
    3 Beiträge
    0 Hilfreiche Beiträge
    15. 03. 2019, 15:36

    Ach herrje... Ich hatte mich ein wenig in einer falsche Denkweise verlaufen - war ein langer Tag!

    Wie Du schon sagtest hat es mit nur dem {image) wunderbar geklappt!

    Ich danke Dir vielmals Norman. Du hast mir sehr weiterhelfen können.

    Einen schönen Tag noch!

    LG

  • 1