Responsive Bilder mit Typoscript
  • Typo3 Version 6.2 LTS

Damit Bilder in Typo3 responsive dargestellt werden darf der Quellcode keine Tags wie "width" und "height" erhalten. 

Eine Möglichkeit, um Bilder in Typo3 Layouts darzustellen, ist  "Picturefill".

https://github.com/scottjehl/picturefill

Folgender Codeschnipsel kommt dazu im Template Setup:

#damit picturefill.js eingebunden wird im head bereich: page.includeJS = my/path/to/js/picturefill.min.js tt_content.image.20.1.layout.picturefill{ element{ ###SOURCECOLLECTION### } source= <span data-src="###SRC###" data-media="###MEDIAQUERY###"> } tt_content.image.20.1.sourceCollection{ small.maxW = 300px small.mediaQuery = (max-width:400px) middle.maxW = 600px middle.mediaQuery = (min-width: 401px) AND (max-width: 600px) large.maxW = 900px large.mediaQuery = (min-width: 601px) }

Folgender Codeschnipsel unter Konstanten:

styles.content.imgtext.responsive=1 styles.content.imgtext.layoutKey= srcset styles.content.imgtext.maxWInText = 0