+49 (0)5583 2829973 info(at)coders(dot)care
Shadow

How to get your content to the frontend with Gridelements and TYPO3 CMS 8

Gridelements for TYPO3 CMS 8 will soon be released in the TER. They are already available from Git master on git.typo3.org and function broadly with the current TYPO3 version. This tutorial focuses on innovations of the frontend output with CMS 8.

Estimated time to read: 4 minutes
Translation from German: Colin Hasenau

Due to recent events

and as promised at TYPO3 Camp Stuttgart ...

... here we go with a short tutorial on how to adjust the frontend output of Gridelements for TYPO3 CMS 8. There seem to be one or two misunderstandings regarding the new TYPO3 version. Moreover there are some code snippets going round in forums and social media groups, which claim to be fixes to some problems that supposedly occur with CMS 8.

This tutorial explains crisp and short what to do - or as the case may be, what not to do - when you want to output Gridelements with CMS 8 and CSS styled content, Fluid styled content or a completely own TypoScript setup in your frontend.

The good news: (Almost) Nothing changes

Usage of CSS styled content or Fluid styled content doesn't require any changes.

When you look at the following code of the default grid setup of Gridelements it becomes clear that the output method actually doesn't matter. Independent of CSS styled content, Fluid styled content or your own TypoScript for the frontend output Gridelements uses a relatively minimalistic setup.

lib.gridelements.defaultGridSetup {
  columns {
    default {
      renderObj = COA
      renderObj {
        20 =< tt_content
      }
    }
  }
}

plugin.tx_gridelements_pi1 >
tt_content.gridelements_pi1 >
tt_content.gridelements_pi1 = COA
tt_content.gridelements_pi1 {
  #10 =< lib.stdheader
  20 = COA
  20 {
    10 = USER
    10 {
      userFunc = GridElementsTeam\Gridelements\Plugin\Gridelements->main
      setup {
        default < lib.gridelements.defaultGridSetup
      }
    }
  }
}
Previous and current Gridelements default TypoScript setup

The reference to tt_content gives you independence

As you can see in line 6 a reference to tt_content is set by the Operator =< for the actual output of the child elements. That means that all definitions of tt_content are inherited exactly as given by the setup method you use. Gridelements doesn't carry out any changes.

In line 12 and 13 setups for Gridelements get deleted to make sure that no traces of previous plugin registrations or similar actions remain. Afterwards a minimalistic setup uses a COA within another COA containing a USER object. Within that object the essential function Gridelements->main is located which helps to pull childs and to apply the designated setup for different container versions.

The previously defined default setup is allocated in line 23 and this finally makes Gridelements work just as usual and independent from the base setup you might be using.

The headline with lib.stdheader

Using Fluid styled content or your own setup possibly requires a few adjustments

The output of an own headline for a Gridelements container is not provided by default but can be activated relatively easy. You only need to delete the # in front of 10 =< lib.stdheader to activate a reference to the headline definition of CSS styled content. Within an own definition for the frontend setup you can create a library with identical name and reference it the same way to make things easier.

The setup of lib.stdheader serves just as an example for a definition and is definetly not to be seen as recommendation!

lib.stdheader = COA
lib.stdheader {
  10 = TEXT
  10 {
    field = header
    htmlspecialChars = 1
    typolink.parameter.field = header_link
    dataWrap = <h{field:header_layout}>|</h{field:header_layout}>
    dataWrap {
      override = <h{$content.defaultHeaderType}>|</h{$content.defaultHeaderType}>
      override.if.isFalse.field = header_layout
    }
  }
}

tt_content.gridelements_pi1 {
  10 =< lib.stdheader
  20 = COA
  20 {
    10 = USER
    10 {
      userFunc = GridElementsTeam\Gridelements\Plugin\Gridelements->main
      setup {
        default < lib.gridelements.defaultGridSetup
      }
    }
  }
}
Modified Gridelements setup with your own lib.stdheader

The free style: Fluid templates for Grid containers

Using lib.contentElement of Fluid styled content requires just a few modifications

With CMS 8 a unified output library lib.contentElement was built in for Fluid styled content. Of course you can use this unification on Gridelements too, but for that you need a slightly modified default setup to hand over the content of the child elements to the fluid template.

lib.gridelements.defaultGridSetup {
  columns {
    default {
      renderObj = COA
      renderObj {
        20 =< tt_content
      }
    }
  }
  cObject =< lib.contentElement
  # Fluid Styled Content provides Default only
  # Must be Generic, since there is no Default template
  cObject.templateName = Generic
}

plugin.tx_gridelements_pi1 >
tt_content.gridelements_pi1 >
tt_content.gridelements_pi1 =< lib.contentElement
tt_content.gridelements_pi1 {
    # Fluid Styled Content provides Default only
    # Must be Generic, since there is no Default template
    templateName = Generic
    variables {
        content = COA
        content {
            10 = USER
            10 {
                userFunc = GridElementsTeam\Gridelements\Plugin\Gridelements->main
                setup {
                    default < lib.gridelements.defaultGridSetup
                    1 < lib.gridelements.defaultGridSetup
                    1 {
                        cObject {
                            templateName = OneColumn
                            templateRootPaths {
                                20 = EXT:EXTNAME/Resources/Private/Templates/MyTemplatePath/
                            }
                        }
                    }
                }
            }
        }
    }
}
Modified Gridelement setup for usage with lib.contentElement

The cObject still provides the FLUIDTEMPLATE

Basically there are only minimal differences to the original setup in lines 10, 15 and 20 as well as in the block from line 30.

Since Gridelements worked smoothly with FLUIDTEMPLATE before CMS 8 you simply need to use the integrated cObject in Line 10 as usual. In this case a reference to lib.contentElement is set because a full setup for a FLUIDTEMPLATE is already available there. In line 15 the same lib.contentElement is referenced for the output of the surrounding container too.

Edit: Fluid Styled Content provides templateName = Default within lib.contentElement, but currently that template is missing, which might cause exceptions. As a workaround you can go for templateName = Generic instead.

In order to have the output still working as usual the previous setup including the USER object has to be pushed into a variable named content just as shown in line 20. This variable can then be used in fluid to position the actual content.

In the block from line 30 onwards an example for a single-column container can be seen created within an own extension which has a template named OneColumn. Of course all other possible options of the output of FLUIDTEMPLATE are usable as well. Examples for this can be found in the TypoScript reference.

TL;DR - Conclusion

Using Gridelements with CMS 8 you don't necessarily have to change anything.

When you want to get a fast output in the frontend of CMS 8 you should leave the default setup untouched in any case.

When you want to work outside of CSS styled content with lib.stdheader for the headline output you possibly need to create a library called stdheader.

When you think you need to resort to the new library lib.contentElement of Fluid stlyed content you need at least one additional cObject and some modifications to the default setup.

Jo Hasenau