Brightside – TYPO3 web design & development agency

Open knowledge

FAL compliant and retina ready subpages gallery / page teaser with TypoScript

My old school subpages gallery/page teaser needed update to be FAL compliant and not to use the content adapter that slows down the CMS.

Let's cut it short, here's the code:

TypoScript setup


galleryList = CONTENT
galleryList {
  wrap = <div class="galleryList">|</div>
  table = pages
  select {
    pidInList = {leveluid:2}
    pidInList.insertData = 1
    orderBy = sorting
    selectFields=title,media
#  max = 1
  }
  renderObj =  FILES
  renderObj {
#  begin = 0
    maxItems = 1
    references.fieldName = media
    renderObj = COA
    renderObj {
      1 = TEXT
      1.value = <figure><img class="unveil" src="clear.gif"
      2 = IMG_RESOURCE
      2 {
        file {
          import.data = file:current:publicUrl
          width = {$galleryListImageWidth}c
          height = {$galleryListImageHeight}c
        }
        stdWrap.noTrimWrap = | data-src="|" |
      }
      3 = IMG_RESOURCE
      3 {
        file {
          import.data = file:current:publicUrl
          width.stdWrap.wrap = {$galleryListImageWidth}*2
          width.prioriCalc = intval
          width.wrap = |c
          height.stdWrap.wrap = {$galleryListImageHeight}*2
          height.prioriCalc = intval
          height.wrap = |c
        }
        stdWrap.noTrimWrap = | data-retine-src="|" |
      }
      4 = TEXT
      4.field = title
      4.wrap = alt="|">
      5 = TEXT
      5.field = title
      5.wrap = <figcaption>|</figcaption></figure>
    }
    stdWrap.typolink.parameter.field = uid
    stdWrap.wrap = <div class="item">|</div><div class="spacer"></div>
  }
}


And here you find the real life example. Combining it with this script here it makes a nice little image gallery using pure TypoScript, regular TYPO3 page structure and page media.

Be noted! I'm using the unveil script for lazy loading the images, change the renderObj = COA for your own needs.

Comments