TYPO3: Responsive images in Fluid using TypoScript

Felix Nagel - 30. März 2016 - English, Webentwicklung, Extbase & Fluid

Supporting responsive images in TYPO3 CMS is a fairly easy task when using good old css_styled_content and TypoScript for content rendering. Sadly this neat feature is not available in Fluid for usage in Extbase extensions.

Until Fluid will support RWD images as a built in feature, it's possible to use a view helper based solution like EXT:vhs's Media Image Viewhelper.

Another option is to use the above mentioned built-in approach together with an ordinary cObject view helper.

No need to add another extension as a dependency to your project! This way you could even re-use your sourceCollection configuration to achieve matching results with your CSC based output.

The following code snippets outline how to do that with just a few lines of TypoScript.

# Very basic CSC example configuration for images
tt_content.image.20.1 {
  # Default max image size
  file.maxW = 1140

  # Add your own config here!
  sourceCollection >
  sourceCollection {
    # Default, same as max default
    default {
      maxW = 1140
      pixelDensity = 1
      dataKey = default
    }

    # Retina (only for smaller devices)
    retina {
      maxW = 720
      pixelDensity = 2
      srcsetCandidate = 720w
      dataKey = retina
    }
  }
}

CSS Styled Content: Configure responsive image rendering

# Library for use in Fluid: render RWD images like CSC does
lib.responsiveImage = IMAGE
lib.responsiveImage {
  # Make use of CSC file configuration
  file < tt_content.image.20.1.file

  file.import.current = 1
  file.treatIdAsReference = 1

  # Make use of CSC configuration
  layoutKey = {$styles.content.imgtext.layoutKey}
  layout < tt_content.image.20.1.layout
  sourceCollection < tt_content.image.20.1.sourceCollection
  params < tt_content.image.20.1.params

  # Add alt and title tag
  altText = TEXT
  altText {
    field = alternative
    htmlSpecialChars = 1
  }

  titleText < .altText
  titleText.field = title
}

TypoScript library for later use in Fluid

<f:comment>someModel.image should return \TYPO3\CMS\Core\Resource\FileReference</f:comment>
<f:cObject typoscriptObjectPath="lib.responsiveImage" data="{someModel.image.properties}" currentValueKey="uid" />

Fluid cObject ViewHelper for rendering the image

0 Kommentare Permalink