Brightside – TYPO3 web design & development agency

Open knowledge

Retina ready page media images with some TypoScript math

Simple math with TypoScript constants makes it easier to control custom image sizes for high res displays.

Been working on the basic TYPO3 dev package through 8 years now. It's something to kickstart new developments with least possible effort. Nowadays it surely has to come with high res screen support built in. So everything got looked over including the pure TS image galleries I have been using.

There was simple constants to control thumbnail sizes but it was bit too much having two different constants, one for the regular and other for the retina displays. So here's some TS for the FAL compliant and retina ready list of page images using constant for image width and height.

I'm using it with the unveil.js lazy loading script but surely the TS is easy to modify for your own needs.

TypoScript setup

galleryImages = FILES
galleryImages {
  stdWrap.wrap = <div class="galleryImages csc-textpic-imagewrap">|</div>

  references {
    table = pages = page:uid
    fieldName = media

  renderObj = COA
  renderObj {
    1 = TEXT
    1.value = <figure><img class="unveil" src="clear.gif"

    15 { = file:current:publicUrl
      file.width = {$galleryThumbWidth}c
      file.height = {$galleryThumbHeight}c
      stdWrap.noTrimWrap = | data-src="|" |

    20 { = file:current:publicUrl
      file.width.stdWrap.wrap = {$galleryThumbWidth}*2
      file.width.prioriCalc = intval
      file.width.wrap = |c
      file.height.stdWrap.wrap = {$galleryThumbHeight}*2
      file.height.prioriCalc = intval
      file.height.wrap = |c

      stdWrap.noTrimWrap = | data-src-retina="|" |

    1000 = TEXT
    1000.value (
    ) = file:current:publicUrl = file:current:title = file:current:title
    stdWrap.wrap = <div class="item">|</div><div class="spacer"></div>


Don't forget to set your galleryThumbWidth and galleryThumbHeight in TS constants!

Oh yes, and here's the real life example. And combining it with the subpages gallery/page teaser script you can build yourself a nice little image gallery using TYPO3 page structure and TypoScript only.