[TYPO3-german] Klappt nicht: Responsive Image Rendering in, TYPO3 CMS 6.2

[Patrick Bauer]

Hallo Marco,

ich hab damit auch schon gekämpft und habs jetzt hinbekommen.

Du musst ein Javascript laden das den Austausch handelt.
Nach langer Suche hab ich das hier gefunden und es funktioniert einwandfrei.

Link Picturefill: http://scottjehl.github.io/picturefill

Picturefill funktioniert bei mir mit allen Rendering-types die man im 
Contant Editor einstellen kann.

Viele Grüße

Patrick
Am 03.06.14 23:46, schrieb typo3-german-request at lists.typo3.org:
> Hallo Leute,
>
> habt ihr schon erfolgreich das Responsive Image Rendering in TYPO3 CMS
> 6.2 in euren Projekten umgesetzt?
>
> Ich habe schon lange auf eine solche L?sung gewartet, aber es
> funktioniert nicht bei mir.
>
> Ich habe in meiner TS-Konfiguration das hier eingegeben um Responsive
> Image Rendering in TYPO3 CMS 6.2 zu akrivieren:
>
> styles.content.imgtext.responsive = 1
> styles.content.imgtext.layoutKey = srcset
>
> und dieses hier ins TypoScript-Setup, nur um es mal zu probieren:
>
> tt_content.image.20.1.sourceCollection {
>       small {
>           width = 200
>           srcsetCandidate = 600w
>           mediaQuery = (max-device-width: 600px)
>           dataKey = small
>       }
>       middle {
>           width = 400
>           srcsetCandidate = 800w
>           mediaQuery = (max-device-width: 800px)
>           dataKey = middle
>       }
>       lage {
>           width = 600
>           srcsetCandidate = 1000w
>           mediaQuery = (max-device-width: 1000px)
>           dataKey = lage
>       }
>       smallRetina {
>           if.directReturn = 1
>           width = 200
>           pixelDensity = 2
>           srcsetCandidate = 600w 2x
>           mediaQuery = (max-device-width: 600px) AND (min-resolution: 192dpi)
>           dataKey = smallRetina
>       }
>       smallHires {
>           if.directReturn = 1
>           width = 300
>           pixelDensity = 2
>           srcsetCandidate = 800w 2x
>           mediaQuery = (min-device-width: 800px) AND (min-resolution: 192dpi)
>           dataKey = smallHires
>           pictureFoo = bar
>       }
> }
>
> Die Ausgabe meines Bildes sieht auch schon recht erfolgversprechend aus,
> denn der Quelltext f?r das Bild sieht dann so aus:
>
> <img src="fileadmin/user_upload/TEST.png"
> srcset="fileadmin/_processed_/csm_TEST_72c0bd69f1.png
> 600w,fileadmin/_processed_/csm_TEST_8ade9d5d7e.png 600w
> 2x,fileadmin/_processed_/csm_TEST_b6bbcf44de.png
> 800w,fileadmin/_processed_/csm_TEST_4c9c335a20.png
> 1000w,fileadmin/_processed_/csm_TEST_32d225455b.png 800w 2x" alt=""
> title="Test-Titel f?r das Bild">
>
> Es werden auch die ganzen kleineren Bilder generiert, sie werden aber
> nicht ausgetauscht.
>
> Dazu habe ich meine Seite auf dem ipone geladen und dort das Bild
> kopiert und per iphone an meinen Rechner per Mail gesendet. Es ist immer
> noch das originale gro?e Bild.
>
> Daher meine Frage: muss, damit das funktioniert, eine bestimmte
> Javascript-Datei geladen werden?
>
> Danke f?r eure Hilfe,
> Marco.