DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Developer Corner

TypoScript Reference

Registers in use

In order to compute the width of images, we are using five register values:

  • width_xxs Width of layout < xs breakpoint
  • width_xs Width of layout between xs and sm breakpoint
  • width_sm Width of layout between sm and md breakpoint
  • width_md Width of layout between md and lg breakpoint
  • width_lg Width of layout >= lg breakpoint

Setting up fluid templates

The number of columns of a template is given by variables in the templates, according bootstrap classes. Default to max number of columns when not set:

  • col_xs
  • col_sm
  • col_md
  • col_lg

Templates variables

<div class="col-md-9" role="main">
  <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '0', col_md:'9', col_lg:'9'}"/>
</div>
<div class="col-md-3">
  <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '2', col_md:'3', col_lg:'3'}"/>
</div>

Tip

When a breakpoint change default witdh by "col-breakpoint-numberOfColumns" class, all the breakpoints greater are influenced by this change. So if breakpoint class is col_md-9 we have to add both col_md:9 and col_lg:9

lib.registerFrameSize

This library provides a way to take account of content frames to compute image width. Any container modifying width of content should call this one before inserting content and clean up register after (using lib.restoreFrameSize).

Implemented modifiers are :

  • indent 1/12
  • indent 33/66
  • indent 66/33
  • well
  • jumbotron
  • bootstrap_package panel

Adding customs modifiers with typoscript :

lib.registerFrameSize {
  # width modifier in xxs layout
  width_xxs{
    cObject{
      # bootstrap panel implementation as reference
      30 = TEXT
      30{
        value = -2
        stdWrap.if{
          value = bootstrap_package_panel
          equals.field = CType
        }
      }
      # Your own modifier
      50 = TEXT
      50{
        # the width of the frame of the custom element (on both sides)
        # -2 for a 1 pixel border in both sides same for padding, margins..
        value = -2
        stdWrap.if {
          value = 2
          equals.field = layout
        }
      }
    }
  }

  # width modifier in xs layout
  width_xs.cObject.50.value = -5

  # width modifier in sm layout omitted if the same as xs
  # width_sm.cObject.50.value = -5

  # width modifier in md layout only when change
  width_md.cObject.50.value = -8

  # width modifier in lg layout only when change
  width_lg.cObject.50.value = -10
}


lib.restoreFrameSize = RESTORE_REGISTER

Implementation in image and textpic as reference:

tt_content.image.5    = < lib.registerFrameSize
tt_content.image.30   = < lib.restoreFrameSize
tt_content.textpic.5  = < lib.registerFrameSize
tt_content.texpic.30  = < lib.restoreFrameSize

Using on Gridelements is pretty simple :

tt_content.gridelements_pi1.20{
   5 = < lib.registerFrameSize
   10.setup {
   ...
   }
   15 = < lib.restoreFrameSize
}

Using gridelements columns layouts

As gridelements columns layouts change the width of your containers, a specially crafted version of the coulumns containers should be used to allow computing of the image width in any nested layout.