Franz Holzinger

Verse of the day

Weiter, liebe Brüder, was wahrhaftig ist, was ehrbar, was gerecht, was keusch, was lieblich, was wohllautet, ist etwa eine Tugend, ist etwa ein Lob, dem denket nach!
Philipper 4:8

© Bible Gateway's Verse of the Day


autor  
5-11-14 10:30:52 Listview Image und lazyload
Herrmann Meier
Moin Moin,

ich suche gerade eine Möglichkeit die Bilder in der Listview mit einem lazyload-plugin zu verknüpfen. Dafür müssen 2 Dinge mit dem Bild passieren:
1. Muss dem Bild eine Klasse zugewiesen werden (das könnte man per Jquery realisieren aber ich würde es lieber über TS oder direkt im marker machen)
2. Muss im Bild ein "data-original"-Attribut ergänzt werden in dem dann der Bildpfad & Bildbezeichnug+Dateieindung steht

Gibt es dazu schon Lösungen/Ideen oder einen Hinweis wo ich ansetzen kann?

Beste Grüße
5-11-14 11:51:59 File Abstraction Layer
Franz Holzinger
In TYPO3 bis 4.7 gibt es die DAM Extension, die über spezielle Marker in tt_products die Datei Infos mitliefert.
Für TYPO3 6.2 müsste tt_products für den File Abstraction Layer (FAL) um Marker erweitert werden. (Datei view/field/class.tx_ttproducts_field_media_view.php). Mit diesen Markern könnte man das HTML dann wunschgemäß umstalten. Eine Alternative wäre über TypoScript möglich. Doch diese Infos liegen ja in der FAL. Es wäre umständlich, die vorhandenen Informationen nicht zu nutzen.

30-06-15 09:08:06 Ts
Herrmann Meier
Hallo,

ich habe das Thema gerade nochmal auf der Tagesordnung. Mit der Datei class.tx_ttproducts_field_media_view.php kann ich leider nichts anfangen. Die funktion ist einfach zu komplex für mich.

Ich habe jetzt den Typoscript Weg eingeschlagen und mir fehlt jetzt nur noch ein Schritt zum Puzzle. Das data-src Attribut habe ich mit Hilfe eines cObjects hinzugefügt und den Pfad des Bilder per file.import.data = TSFE:lastImageInfo|3 ausgelesen. Der letzte Schritt wäre für mich nun im standard src-attribut nicht mehr das urspüngliche Bild einzutragen sondern ein Defaultbild zu setzen. Hat hier jemand eine idee?

plugin.tt_products {
image {
altText >
altText = TEXT
altText.data = field:title


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


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

}
30-06-15 16:57:32 welches Default Bild
Franz Holzinger
Leider verstehe ich die Anforderung nicht. Wozu wird das aktuelle Bild eingelesen und nicht ein default Bild, wenn das ursprüngliche Bild des Produktes nicht angezeigt werden soll?

Wenn ein Produkt kein Bild hat, dann kann man über noImageAvailable ein default Bild setzen.
1-07-15 07:29:12 lazy loading
Herrmann Meier
Moin Moin,

das ist eben die Funktionsweise von lazy loading. Das Standard src-attribut wird bei allen angezeigten Produkten mit einem Standardbild ausgestattet, damit beim Besuch der Seite a) nur ein Bild gezogen wird um die Seitengröße zu verringer b) und weniger http-requests stattfinden.

Dafür wird der echte Bildpfad in das data-src-attribut ausgelagert (ist ja schon erledigt) und eine Javascriptfunktion blendet das Bild ein, sobald das Produkt im aktuellen viewport erscheint.

Das die komplette image-funktion von tt_products > class.tx_ttproducts_field_media_view.php < aber nirgendwo ein src liefert das man einfach verändern, wollte ich das auf diesem Weg versuchen
1-07-15 10:52:00 TYPO3 IMAGE
Franz Holzinger
tt_products verwendet keine eigene Image Funktion, sondern greift auf jene von TYPO3 zurück. Ich verstehe nicht, welches src-Attribut da fehlen soll. Ist hier das HTML src gemeint oder etwas anderes? Womit sollte das denn geändert werden?

1-07-15 11:43:13 plugin.tt_products { image { }}
Herrmann Meier
ah ok ist wohl falsch verstanden worden. Um es einfach zu machen:

so sieht ein normales Produktbild in der tt_products Listenansicht aus:

<img height="xxx" width="xxx" alt="test" src="mein_bild.jpg">

Das möchte ich erreichen:

<img height="xxx" width="xxx" alt="test" data-src="hier_der_richtige_bildpfad.jpg" src="hier_ein_einheitliches_bild_für_alle_produkte.jpg">
18-07-15 23:30:29 Bildanzeige
Franz Holzinger
Wie funktioniert denn dieses Javascript, damit dann jedes Produkt am Ende sein eigenes individuelles Bild hat? Denn wenn jedes Produkt dasselbe Bild hat, wäre das wenig sinnvoll.

Wenn für jedes Produkt immer dasselbe Bild mit dem Dateinamen hier_ein_einheitliches_bild_für_alle_produkte.jpg angezeigt werden soll, dann müsste tt_products dafür erweitert werden. Denn bisher wird hier von tt_products das Bild des Produktes eingetragen (IMAGE file) und dem img-Attribut src zugewiesen.

Für die anderen Parameter gibt es das IMAGE params.
Dieses ist hier gut beschrieben:

http://www.typo3lexikon.de/typo3-tutorials/tslib/die-tsref-aus-classtslib-contentphp/image.html

< BACK TO FORUM