Zum Inhalt springen

Lazy Load mit Typoscript

Erstellt am 18. Mai 2021 · 2 Antworten · letzte Antwort am 18. Mai 2021

Tags: Frage

Phigiro ·

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:

 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
                    }
                }

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

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="|" />
		}
Phigiro · · Beste Antwort

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 ·

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.