TYPO3 Responsive Imagehandling

constants.ts

styles.content.imgtext.captionSplit = 1

setup.ts

########################################
# Responsive Bilder
########################################
tt_content.image.20.1.layout.picturefill {
  element (
    <picture class="first-match">
      <!--[if IE 9]><video style="display: none;"><![endif]-->
      ###SOURCECOLLECTION###
      <!--[if IE 9]></video><![endif]-->
      <img class="img-responsive" src="###SRC###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
      
      <noscript>
        <img class="img-responsive" src="###SRC###" ###ALTPARAMS######SELFCLOSINGTAGSLASH###>
      </noscript>
    </picture>
  )
  source = <source srcset="###SRC###" media="###MEDIAQUERY###"></source>
}

tt_content.image.20.maxWInText = 960
tt_content.image.20.maxW = 1170

tt_content.image.20.1.sourceCollection {
  small {
    width = 768
    maxW = 768
    maxWInText = 768
    mediaQuery = (max-width: 991px)
    srcsetCandidate = 768w
    dataKey = small
  }

  middle {
    width = 992
    maxW = 992
    maxWInText = 992
    mediaQuery = (max-width: 1199px)
    srcsetCandidate = 992w
    dataKey = middle
  }

  large {
    width = 1200
    maxW = 1200
    maxWInText = 1200
    mediaQuery = (min-width: 1200px)
    srcsetCandidate = 1200w
    dataKey = large
  }
  
  # Für ein Retina Query
  # pixelDensity = 2
  # srcsetCandidate = 2x
}