[TYPO3-german] 6.2 und Responsive Images

[Sebastian Schmal]

@Matthias Eberlein wollte gerade schreiben, dass T3 so ein JS schon 
haben sollte.

@Peter Linzenkirchner muss ich unbedingt auch mal testen und eine 
richtige Anleitung dazu schreiben.

vllt. kann mir wer dabei helfen ;)

grüße,
Sebastian

------------------------------------------

TYPO3 - TIPPS - ANLEITUNGEN - NEWS
unter: http://blog.ingeniumdesign.de/

TYPO3 Webdesign Agentur Wiesbaden - Frankfurt
unter: http://www.ingeniumdesign.de/

Facebook Fan
http://www.facebook.com/ingeniumdesign/

------------------------------------------

Am 23.04.2014 23:55, schrieb 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
>