Franz Holzinger

autor  
4-07-17 13:53:18 responsive images / lazy loading
Andreas Karnatz
Guten Tag!

Meine Frage betrifft das Thema "responsive images" und um alles gleich komplett zu machen auch das Thema "lazy loading" von Bildern.
Ab Typo3 6.2 ist dies mittlerweile ein Standard-Feature und auch die beliebte Extension "bootstrap_package" bringt es standardmäßig mit.
Ich würde dies gerne auch für tt_products verwenden, da wir sehr viele Produkte auf einer Seite abbilden und sich die Performance durch dieses Feature enorm steigern würde.
Leider klappt das bislang aber nicht, ich habe schon sämtliche Anleitungen im Netz durchforstet.


### Thema "responsive images" explizit:
Hiermit ermöglicht man über ein "srcset"-, "data"- oder "source"-Attribut im eigentlichen Image verschiedene Größen desselben Bildes zu laden - abhängig von der Bildschirmauflösung.

Sehr gut erklärt ist das hier https://typo3worx.eu/2016/03/responsive-images-on-typo3-websites/

Ich wollte das jetzt auch in der setup.text von tt_products unter "plugin.tt_products.image" umsetzen, allerdings tut sich bei mir rein gar nichts.
Hier würde ich mich über ein Feedback freuen, ob dies schon jemandem gelungen ist.



### Thema "lazy loading" explizit:
Würde sich insgesamt schon automatisch erledigen wenn das mit dem "responsive images" klappen würde.

Aber nochmal zu Erklärung: "lazy loading" bedeutet hier faktisch nichts anderes als "lade erst bei Gebrauch".

Beispiel:
Es befinden sich 50 Bilder auf einer Seite. 10 davon befinden sich aber nur im viewport des User, sprich die anderen 40 sieht man erst wenn man runterscrollt. Diese 40 Bilder sollen dann auch bitte erst geladen werden, wenn der User immer weiter runterscrollt.

Und hierfür benutzt man nun ein "lazy loading"-Javascript wie dieses hier http://jquery.eisbehr.de/lazy/

Dafür muss der Grundaufbau des Bildes nun verändert werden

Original: <img alt="ich bin ein Standard-Bild" src="mein_bild.jpg">
Neu: <img alt="Ich bin ein Bild mit lazy loading" data-src="der-original-pfad.jpg" src="dummybild.jpg">

Das "lazy loading"-Javascript übernimmt nun die Aufgabe und ersetzt das "src-Attribut" mit dem "data-src-Attribut" wenn es benötigt wird.

Eine Lösung wäre echt genial, ich würde diese bei korrekter Funktion auch hier detailliert zu Verfügung stellen.

Ich hoffe es ist einigermaßen verständlich formuliert. Bei Fragen erläutere ich gerne nochmal anders.
13-07-17 21:36:45 Test in Produkt Einzelansicht
Franz Holzinger
Ich denke, diese Funktionalität des "lazy loading" sollte zunächst mit einem großen Bild in der Produkt Einzelansicht ausprobiert werden.

plugin.tt_products {

image {
...
}
}

Alle Einstellung sollten in diesem Setup erfolgen. Doch die Beschreibung gibt 3 Varianten für HTML Quelltexte. Doch welche davon soll nun umgesetzt werden und wird auch funktionieren?
Das Setup für CSS Styled Content lässt sich nicht auf eine Extension übertragen. Ich kann nicht darin erkennen, was für die Umsetzung von Responsive Images zuständig wäre.

Was soll das bedeuten?

Neu: <img alt="Ich bin ein Bild mit lazy loading" data-src="der-original-pfad.jpg" src="dummybild.jpg">

Wo ist der Bildname "mein_bild.jpg" hingekommen? Wo gibt es dieses Javascript und ein Anwendungsbeispiel dafür?
13-07-17 22:10:05 jQuery
Franz Holzinger
Ich denke, dass der Link
http://jquery.eisbehr.de/lazy/example_basic-usage
auf jQuery am besten verständlich ist.

Jetzt könnte einfach eine Seiten-Quelltext der Einzelansicht von tt_products in einem Editor abgeändert werden, in dieses Format:

<img class="lazy" data-src="images/3.jpg" />

Und danach die HTML Datei abspeichern. Damit sollte es funktionieren.
Wie muss also die Ausgabe abgeändert werden? Statt "src" einfach ein "data-src" verwenden? Und außerdem 'class="lazy" ' dazugeben.
17-08-17 10:51:06 plugin.tt_products { image { }}
Andreas Karnatz
Hallo Herr Holzinger,

bezüglich Ihrer Frage wie die Ausgabe aussehen muss:
<img class="lazy" src="dummybild.jpg" data-src="images/3.jpg" />

Das Javascript übernimmt dann die Aufgabe und tauscht bei Bedarf den Inhalt von src <--> data-src
Somit wird bei Seitenaufruf für alle Produkte nur ein Bild "dummybild.jpg" geladen, was den Pageload enorm reduziert. Beim runterscrollen wird dann nach Bedarf das dummybild gegen das echte ausgetauscht.

Ich habe mit nachfolgendem TS schon fast erreicht was ich wollte:
---------------
plugin.tt_products {
image {
altText >
altText = TEXT
altText.data = field:title

file {
maxW = 754
import.cObject = TEXT
import.cObject.value = fileadmin/img/logo.png
width = 500
}

**********
params.cObject = IMG_RESOURCE
params.cObject {
file.import.data = TSFE:lastImageInfo|1
file.import.listNum = 0
file.width = 500
stdWrap.wrap = data-src="|" class="lazy"
}
**********
}

listImage< .image
listImageHasChilds< .image
listImageRoot< .image
}

Der Bereich den ich in Sternchen eingefasst habe funktioniert allerdings nicht. Es wird durch "file.import.data = TSFE:lastImageInfo|1" immer nur dasselbe Produktbild für alle Produkte geladen.
25-08-17 12:11:14 Marker für IMAGE Setup
Franz Holzinger
Für das IMAGE Setup von tt_products kann man auch Marker verwenden, die vor der Generierung des Bild-HTML innerhalb von tt_products ersetzt werden.
###FILE### ist die aktuelle Bilddatei.


params.cObject {
file = ###FILE###
}

25-08-17 14:59:56 Marker für IMAGE Setup
Andreas Karnatz
params.cObject {
file = ###FILE###
}

war ###FILE### jetzt nur ein Beispiel? Ich habe eben mal sätmliche Marker für das Image ausprobiert, aber da tut sich rein gar nichts. Das data-src wird dann gar nicht erst im <img> erzeugt

###PRODUCTS_IMAGE###
###PRODUCTS_IMAGE1###
###PRODUCTS_IMAGE2###
###IMAGE_FILE###
25-08-17 20:37:18 alternativer Setup Marker ###IMAGE_FILE###
Franz Holzinger
In älteren tt_products Versionen gibt es für den Dateinamen den Marker ###IMAGE_FILE###.
Die PRODUCT Marker stehen hier nicht zur Verfügung. Es muss statt PRODUCT hier IMAGE als Präfix verwendet werden.
Es stehen allerdings nur die Felder der Tabelle tt_products zur Verfügung.
< BACK TO FORUM