[TYPO3-german] 6.2 und Responsive Images

[Peter Linzenkirchner]

Hallo Christian, 

entscheidend ist, dass das normale Bild das kleinste sein muss. Meine Konfiguration: 

tt_content.image.20.maxW = 200
tt_content.image.20.1.sourceCollection >
tt_content.image.20.1.sourceCollection {

	small {
		width = 200
		srcsetCandidate = 319w
		mediaQuery = (max-width: 319px)
		dataKey = small
	}
	phone {
		width = 400
		maxW = 400
		srcsetCandidate = 599w
		mediaQuery = (max-width: 599)
		dataKey = phone
	}
	tablet {
		width = 660
		maxW = 660
		srcsetCandidate = 
		mediaQuery = 
		dataKey = tablet
	}
	tabletRetina {
		pixelDensity = 2

		width = 1220
		maxW = 1220
		srcsetCandidate = 2x
		mediaQuery = 
		dataKey = tabletRetina
	}
}

Wichtig ist diese Zeile: 
tt_content.image.20.maxW = 200

Damit erhalte ich im <img src="kleinsteDatei.jpg" srcset="die größeren Dateien">

Darüber hinaus brauchst du natürlich das passende JavaScript, welches die Bilder dann auch tauscht. Das hängt davon ab, welche Technik du verwendest. Diese stellst du ja in den Constants ein, ich habe hier z. B. bei "REndering-type für responsive images" die Option "img-tag with alternate sources as srcset-attribute gewählt. 

Dazu gehört dann dieses JavaScript: https://github.com/borismus/srcset-polyfill/

OK, das ist wirklich nicht intuitiv - Anleitung bei http://www.lobacher.de: 
http://lobacher.de/files/TYPO3-CMS-6.2-LTS-Die-Neuerungen-Lobacher.pdf

irgendwo in der Mitte ... 

Gruß
Peter



Am 23.04.2014 um 23:22 schrieb Christian Leicht <usenet at schani.com>:

> Hallo,
> 
> ich versuche gerade eine Seite mit Responsive Images umzusetzen. Die
> 6.2er Möglichkeiten nutze ich auch, habe aber das Problem das alle
> Bilder in den verschiedenen Auflösungen geladen werden. Wenn ich ein
> Bild auf die Seite stelle wird das Original, das ja  überdimensioniert
> in fileadmin abgelegt ist im src des IMG eingetragen. Das bedeutet aber
> auch das das Original geladen wird.
> 
> Wenn ich die Seite z.B. mittels tools.pingdom.com prüfe, wird eine große
> Datenmenge der Bilder angezeigt. Auf einer Langsamen Internetverbindung
> macht sich die Ladezeit auch bemerkbar. Auf dem iPhone lädt es auch
> dementsprechend lange. Das Bild hat ja auch im Original 600kB
> 
> Sollte dieses src Bild nicht komplett weg sein? Die anderen 3 Bilder in
> srcset existieren zwar auf dem Server, werden aber nicht benutzt. Egal
> in welcher Fenstergröße es wird immer nur das Original Bild angezeigt
> und dann über den img {width: 100%} auf die notwendige Größe skaliert.
> 
> <img src="/fileadmin/Bilder%20Dokumente/dummy/Ansicht1.jpg <view-source:http://wwl2014.leicht.info/fileadmin/Bilder%20Dokumente/dummy/Ansicht1.jpg>" 
>     srcset="/fileadmin/_processed_/csm_Ansicht1_1dae772559.jpg 300w,
>             fileadmin/_processed_/csm_Ansicht1_f1178cb7ea.jpg 600w 2x,
>             fileadmin/_processed_/csm_Ansicht1_2664ab2299.jpg 600w" alt="">
> 
> 
> Muss ich noch ein JS einbinden damit das klappt?
> Irgendwie kann ich mir nicht vorstellen wie das ganze funktionieren soll.
> 
> Besten Dank für Infos
> 
> Christian
> Mail: usenet at schani.com 
> 
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german



--
Xing: http://www.xing.com/profile/Peter_Linzenkirchner
Web: http://www.typo3-lisardo.de
Facebook: http://tinyurl.com/lisardo-multimedia