Gridelements and CMS 8
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
}
}
}
}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
}
}
}
}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/
}
}
}
}
}
}
}
}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.
Latest Tweets
Recent Tweets
Testimonials
Coders.Care is the logical progression of the cooperation between providers of TYPO3 extensions and their users. Especially the point of communication during the preparation of a project will be optimized thereby. The developers can focus on their strenghts, while Coders.Care deals with questions, answers and management. In the consequence there will be clear statements about maintenance and further development of TYPO3 extensions, so the trust in TYPO3 and the projects implemented with it will be strengthened. As a TYPO3 agency we can only benefit of such a service.
© Copyright 2024 Cybercraft GmbH