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
    uid.data = page:uid
    fieldName = media
  }

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

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

    20 = IMG_RESOURCE
    20 {
      file.import.data = 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 (
    	 /></figure>
    )
    stdWrap.typolink.parameter.data = file:current:publicUrl
    stdWrap.typolink.title.stdWrap.data = file:current:title
    stdWrap.typolink.tile.data = 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.

Comments