[Frage] Lazy Load mit Typoscript [Gelöst] TYPO3-Version: -

  • Phigiro Phigiro
    Padawan
    0 x
    61 Beiträge
    0 Hilfreiche Beiträge
    18. 05. 2021, 07:39

    Typo3 Version 10.4

    Ich möchte folgenden Typoscript-Code umbauen, so dass das src leer ist und der Inhalt dessen in data-src steht.
    Eine Lösung habe ich gefunden mit einem Text-Objekt, allerdings fehlen dann Alttext und Titeltext.

    Also brauche ich entweder eine Lösung für den Code-Schnipsel mit dem Image-Objekt und dem leeren src und befülltem data-src oder eine Lösung für den zweiten Code-Schnipsel, dass Alttext und Titeltext wieder eingebaut werden.

    ICH HABE SCHON GEGOOGELT UND IN DIE API GESEHEN!
    Dort bin ich nicht fündig geworden. Es geht immer nur das eine oder das andere.
    Einen Tip habe ich bekommen, dass das mit einem COA gehen könnte, allerdings übersteigt dies dann meine Typoscript-Fähigkeiten.

    Da dieser Code an vielen Stellen eingetragen ist, kann ich nicht so einfach auf Fluid umstellen.
    Die Lösung muss also mit Typoscript geschehen.
    Gibt es dafür eine Lösung?

    Danke schonmal!!!! :-D

    HIer der momentane Codeschnipsel mit Image-Objekt:

    [code]renderObj = IMAGE
    renderObj {
    file {
    import.data = file:current:uid
    treatIdAsReference = 1
    width = 370c
    height = 200c
    }

    altText {
    data = file:current:alternative // file:current:title
    htmlSpecialChars = 1
    }

    titleText {
    data = file:current:title // file:current:alternative
    htmlSpecialChars = 1
    }

    params = class="lazyload img-autoscaled"
    stdWrap.HTMLparser.tags.img.fixAttrib {
    width.unset = 1
    height.unset = 1
    }
    }[/code]

    Und hier die Lösung mit dem TExt-Objekt:

    [code]renderObj = TEXT
    renderObj {
    stdWrap {
    cObject = IMG_RESOURCE
    cObject{
    file {
    import.data = file:current:uid
    treatIdAsReference = 1
    width = 370c
    height = 200c
    }
    }
    }
    wrap=<img src="" class="lazyload img-autoscaled" data-src="|" />
    }[/code]

  • Phigiro Phigiro
    Padawan
    0 x
    61 Beiträge
    0 Hilfreiche Beiträge
    18. 05. 2021, 07:58 - Lösung

    Ich habe es gelöst und es ist ganz einfach!
    Also in das Image-Objekt einfach folgendes eintragen:
    layoutKey = srcset
    layout {
    srcset {
    element = <img src="" data-src="###SRC###" width="###WIDTH###" height="###HEIGHT###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
    }
    }


  • 1
  • Phigiro Phigiro
    Padawan
    0 x
    61 Beiträge
    0 Hilfreiche Beiträge
    18. 05. 2021, 07:58

    Ich habe es gelöst und es ist ganz einfach!
    Also in das Image-Objekt einfach folgendes eintragen:
    layoutKey = srcset
    layout {
    srcset {
    element = <img src="" data-src="###SRC###" width="###WIDTH###" height="###HEIGHT###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
    }
    }

  • Teisinger Teisinger
    Jedi-Ratsmitglied
    0 x
    502 Beiträge
    37 Hilfreiche Beiträge
    18. 05. 2021, 17:13

    Also Hinweis gedacht:
    Moderne Browser (außer drecks Apple Safari) unterstützen das "loading"-Attribute (<img loading="lazy">).
    Damit solltest du deinen oben erwähnten "Workaround" nicht mehr benötigen.

    https://github.com/groundstack-org

  • 1