[TYPO3-german] 6.2 und Responsive Images

Wed Apr 23 23:50:20 CEST 2014

Hallo Christian,
am besten nimmst du picturefill dazu.

https://github.com/scottjehl/picturefill/blob/2.0.0a/dist/picturefill.min.js

Das script am besten in den <head></head> bereich.

z.B. page.includeJS = Resources/Public/Template/JavaScript/picturefill.min.js

In dein Setup sollte dann folgendes

tt_content.image.20.1.layout.picturefill {
    element (
      <picture class="first-match">
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        ###SOURCECOLLECTION###

        <img srcset="###SRC###" ###PARAMS### ###ALTPARAMS######SELFCLOSINGTAGSLASH###>
        <!--[if IE 9]></video><![endif]-->

        <noscript>
        <img src="###SRC###" ###ALTPARAMS######SELFCLOSINGTAGSLASH###>
        </noscript>

      </picture>
    )
    source = <source srcset="###SRC###" media="###MEDIAQUERY###"></source>
}

tt_content.image.20.maxW >
tt_content.image.20.maxWInText >
tt_content.image.20.maxWInText = 375
tt_content.image.20.maxW = 500
tt_content.image.20.1.sourceCollection {

    small >
    smallRetina >

    small {
        width = 180
        maxW = 200
        mediaQuery = (min-width: 100px) AND (max-width: 400px)
        srcsetCandidate = 200w
        dataKey = small
    }

    middle {
        width = 
        maxW = 300
        mediaQuery = (min-width: 401px) AND (max-width: 480px)
        srcsetCandidate = 300w
        dataKey = middle
    } 

    smallRetina {
        width =
        maxW = 
        pixelDensity = 2
        mediaQuery = (max-device-width: 601px) AND (min-resolution: 96dpi)
        srcsetCandidate = 600w 2x
        dataKey = smallRetina

    }

    large {
        width =
        maxW < tt_content.image.20.maxW
        srcsetCandidate = 1024w
        mediaQuery = (min-width: 481px) AND (max-width: 1024px)
        dataKey = large
    }
    extralarge_x2 {
        width =
        maxW =
        srcsetCandidate = 1240w
        mediaQuery = (min-width: 481px) AND (max-width: 1024px)
        dataKey = extralarge_x2
    }

#    extralarge_x2.maxW = 100px
#    extralarge_x2.mediaQuery = only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
}

Und in dein Constants dann folgendes

styles.content.imgtext.layoutKey = picturefill

Jetzt kannst du mit den Images Sizes spielen so wie du es für dein Responsive Design benötigst..

Gruß
Matthias