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

Marco Brüggemann marco at schauart.de
Tue Jun 3 20:38:24 CEST 2014


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.



More information about the TYPO3-german mailing list