Trying to understand the right way to do templating in typo3, I came from typo3 6.2 to typo3 v9.5 and everything is new. I've achieved to use DCE, create a backend layout, and now I'm trying to create a repetitive element to use on multiple pages with different templates for instance.
Comparing with a fresh typo3 installation with the main template provided with typo3, I can see they use a file inside
:
ext/your_template/Resources/Private/Partials/Page/Structure/Footercontent
Then in the template, they render the html file that loads the elements from the home template (I guess).
Here you can see the render
My problem comes when I try to replicate this in my own page. It doesn't render in my page, not even the html base structure.
FooterContent.html inside as I show in this picture
and the render call in my main template like in this picture
Home.html (Template)
<f:section name="Footer">
<f:render partial="Structure/FooterContent" arguments="{_all}" />
</f:section>
FooterContent.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<section class="section footer-section footer-section-content">
<div class="beez_footer">
<div class="beez_footer_top beez_section">
<div class="beez_ft_left">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '5'}" />
</div>
<div class="beez_ft_right">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '6'}" />
</div>
</div>
<div class="beez_footer_middle beez_section">
<div class="beez_ft_left">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '7'}" />
</div>
<div class="beez_ft_middle">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '8'}" />
</div>
<div class="beez_ft_right">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '9'}" />
</div>
</div>
<div class="beez_footer_bottom beez_section">
<div class="beez_ft_left">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '10'}" />
</div>
<div class="beez_ft_right">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: 11}" />
</div>
</div>
</div>
</section>
</html>
setup.typoscript in (ext/your_template/Configuration/Typoscript/):
######################
#### DEPENDENCIES ####
######################
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:fluid_styled_content/Configuration/TypoScript/setup.typoscript">
################
#### HELPER ####
################
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:nubis_theme/Configuration/TypoScript/Helper/DynamicContent.typoscript">
##############
#### PAGE ####
##############
page = PAGE
page {
typeNum = 0
shortcutIcon = EXT:nubis_theme/Resources/Public/Icons/favicon.ico
10 = FLUIDTEMPLATE
10 {
# Template names will be generated automaticly by converting the applied
# backend_layout, there is no explicit mapping nessesary anymore.
#
# BackendLayout Key
# subnavigation_right_2_columns -> SubnavigationRight2Columns.html
#
# Backend Record
# uid: 1 -> 1.html
#
# Database Entry
# value: -1 -> None.html
# value: pagets__subnavigation_right_2_columns -> SubnavigationRight2Columns.html
templateName = TEXT
templateName {
cObject = TEXT
cObject {
data = pagelayout
required = 1
case = uppercamelcase
split {
token = pagets__
cObjNum = 1
1.current = 1
}
}
ifEmpty = Default
}
templateRootPaths {
0 = EXT:nubis_theme/Resources/Private/Templates/Page/
1 = {$page.fluidtemplate.templateRootPath}
}
partialRootPaths {
0 = EXT:nubis_theme/Resources/Private/Partials/Page/
1 = {$page.fluidtemplate.partialRootPath}
}
layoutRootPaths {
0 = EXT:nubis_theme/Resources/Private/Layouts/Page/
1 = {$page.fluidtemplate.layoutRootPath}
}
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = media
}
20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
20 {
levels = 2
includeSpacer = 1
as = mainnavigation
}
}
}
meta {
viewport = {$page.meta.viewport}
robots = {$page.meta.robots}
apple-mobile-web-app-capable = {$page.meta.apple-mobile-web-app-capable}
description = {$page.meta.description}
description {
override.field = description
}
author = {$page.meta.author}
author {
override.field = author
}
keywords = {$page.meta.keywords}
keywords {
override.field = keywords
}
X-UA-Compatible = {$page.meta.compatible}
X-UA-Compatible {
attribute = http-equiv
}
# OpenGraph Tags
og:title {
attribute = property
field = title
}
og:site_name {
attribute = property
data = TSFE:tmpl|setup|sitetitle
}
og:description = {$page.meta.description}
og:description {
attribute = property
field = description
}
og:image {
attribute = property
stdWrap.cObject = FILES
stdWrap.cObject {
references {
data = levelfield:-1, media, slide
}
maxItems = 1
renderObj = COA
renderObj {
10 = IMG_RESOURCE
10 {
file {
import.data = file:current:uid
treatIdAsReference = 1
width = 1280c
height = 720c
}
stdWrap {
typolink {
parameter.data = TSFE:lastImgResourceInfo|3
returnLast = url
forceAbsoluteUrl = 1
}
}
}
}
}
}
}
includeCSSLibs {
}
includeCSS {
nubis_theme_layout = EXT:nubis_theme/Resources/Public/Css/layout.min.css
}
includeJSLibs {
}
includeJS {
}
includeJSFooterlibs {
}
includeJSFooter {
nubis_theme_scripts = EXT:nubis_theme/Resources/Public/JavaScript/Dist/scripts.js
}
}
################
#### CONFIG ####
################
config {
absRefPrefix = auto
contentObjectExceptionHandler = 0
no_cache = {$config.no_cache}
uniqueLinkVars = 1
pageTitleFirst = 1
linkVars = L
prefixLocalAnchors = {$config.prefixLocalAnchors}
renderCharset = utf-8
metaCharset = utf-8
doctype = html5
removeDefaultJS = {$config.removeDefaultJS}
inlineStyle2TempFile = 1
admPanel = {$config.admPanel}
debug = 0
cache_period = 86400
sendCacheHeaders = {$config.sendCacheHeaders}
intTarget =
extTarget =
disablePrefixComment = 1
index_enable = 1
index_externals = 1
index_metatags = 1
headerComment = {$config.headerComment}
// Disable Image Upscaling
noScaleUp = 1
// Compression and Concatenation of CSS and JS Files
compressJs = 0
compressCss = 0
concatenateJs = 0
concatenateCss = 0
}
Then, inside my website I get only the content I've been able to display from the template.
In other words, everything except the render partial.
I couldn't see any problem related to this and the documentation from typo3 doesn't clarify this.
I must be missing something but I don't know what.
Edit: Added setup.typoscript (I'm using the default setup provided by when installing the theme package from: https://sitepackagebuilder.com)
From the comments the solution should be to add the section to the default page layout file.
By default (from sitepackagebuilder) a layout file is used, so sections defined in a template must be defined in the layout file.
In the default layout file you find only a Section "main" which is rendered.
To add the Footer section, place a RenderViewHelper somewhere in your layout:
<f:render section="Footer" />
If you want to make it optional you can add the attribute optional="true" to the ViewHelper so you dont have to define the Footer Section in every Template if you dont need this.
The structure of a FLUIDTEMPLATE looks like this:
Templates can contain Partials and can have Sections
Partials can contain other Partials
Layouts are enclose the Templates can render Sections and can also contain Partials
If you want to render a footer to your global page, place the footer Partial in your Layout file. If you want a footer depending on the template used, place the footer in a Section of your template and let render the Section in your Layout.
just for clarification of René's answer:
Fluid Templates:
templates - this is the entry into fluid. if you call fluid, you call a template (<f:layout name="layoutname" />). A template can determine a layout; if it does so, the rendering starts with the layout
layouts - they are meant to give a general structure. This can be achieved by inserting different sections from the determining template and/ or from partials.
partials - these are the flexible building blocks your page will be build. everytime you have a block of data which might occur more often, or which is an unit for itself, make a partial from it, so you can reuse it and structure your fluid.
sections can occur in templates and partials as a subblock.
If you insert sections like <f:render section="sectionname" /> the section is expected to be in the current file - except for layouts, they expect their sections in the template.
If you want to insert a section from another file you only can insert sections from a partial: <f:render section="sectionname" partial="partialname" />.
If you ommit the section name you insert the whole partial (<f:render partial="partialname" />)
In general all insertions with f:render transmit no data (fluid variables), except: a layout gets all data known to the determining template, and a section in the template which is inserted from a layout knows all data of the initial template.
For all other insertions you may need to transfer data with the arguments parameter of the f:render viewhelper:
<f:render section="sectionname" arguments="{ind1:'data1', ind2:'data2'}" />
A special case: you can transfer all (localy known) data with arguments="{_all}"
Thanks to René Pflamm and Bernd Wilke for their explanation. Since I came from tpyo3 v6.2, I used mark records there to repeat the same item over multiple templates with the:
LOGO = RECORDS
LOGO.tables = tt_content
LOGO.source = 1
And then in template
<div class="myClass">###LOGO###</div>
This allowed me to get some elements from a folder inside typo3 that matched their id.
I don't know if this can still be used, but I created a simple function
(located at
ext/your_theme/Configuration/Typoscript/Helper/DynamicContent.typoscript)
to use in partials where I call typoscriptObjectPath="lib.dynamicContentFunction" and this allow me to call through data parameters the id of the element I'd like to render. Here's an example and the function:
<f:cObject typoscriptObjectPath="lib.dynamicContentFunction" data="{Uid: '11'}" />
AND
lib.dynamicContentFunction = COA
lib.dynamicContentFunction {
5 = LOAD_REGISTER
5 {
Uid.cObject = TEXT
Uid.cObject {
field = Uid
}
}
20 = CONTENT
20 {
table = tt_content
select {
includeRecordsWithoutDefaultTranslation = 1
orderBy = sorting
where = {#uid}={register:Uid}
where.insertData = 1
pidInList = -1
recursive = 99
}
stdWrap {
dataWrap = {register:wrap}
required = 1
}
}
90 = RESTORE_REGISTER
}
Warning: This may impact your website speed if you have many elements.
Also, I'd like to know what do you guys think. Is there a better way to do this?
Purpose: Render a determinated content element created in typo3 and editable from there where I can call in partials by selecting their id. The function must search if posible from a determinated typo3 page/folder(id) and select the desired content element through data parameters. So this way I can use an editable footer element that will repeat on every page for instance.
Related
I've a jumbotron with a background image and a header inside.
The background image comes from the site properties, the header from a specific backend layout column.
current state
The jumbotron works perfectly with the background image and the header. But now I would like to change the css class of my header depending on whether an image is in the site properties or not.
how the result should look like (pseudo code)
if there is an image:
<div class="jumbotron" style="background-image: url(...)
<h1 class="header-type1">My header with standard styling</h1>
</div>
else:
<h1 class="header-type2">My header with different styling</h1>
This is my typoscript code
lib.jumbo < lib.dynamicContent
lib.jumbo {
20.renderObj = COA
20.renderObj {
5 = IMG_RESOURCE
5 {
file {
import = uploads/media/
import.data = levelmedia:-1
treatIdAsReference = 1
import.listNum = 0
width = 1022
height = 472
}
stdWrap {
wrap = <div class="jumbotron" style="background-image: url(|);">
required = 1
}
}
10 = TEXT
10 {
stdWrap {
field = header
required = 1
# if there is one image in the site properties use this wrap
wrap = <h1 class="header-type1">|</h1>
# if there is no image:
wrap < h1 class="header-type2">|</h1>
}
}
# this one should only be displayed too, if there is an image
90 = TEXT
90.value = </div>
}
}
lib.DynamicContent comes from the bootstrap package
Here we have a case where the typoscript solution will be a little complicated. But meanwhile we have alternatives:
Why don't you use FLUID for your rendering?
lib.jumbo < lib.dynamicContent
lib.jumbo {
20.renderObj = FLUIDTEMPLATE
20.renderObj {
template = Header
templateRootPaths.0 = EXT:my_site_ext/Resources/Private/page/Templates
variables {
header = TEXT
header.field = header
jumboImage = IMG_RESOURCE
jumboImage {
file {
import = uploads/media/
import.data = levelmedia:-1
treatIdAsReference = 1
import.listNum = 0
width = 1022
height = 472
}
}
}
}
and in the referenced fluid template file:
<f:if condition="{jumboImage}">
<f:then>
<div class="jumbotron" style="background-image: url({jumboImage})">
<h1 class="header-type1">{header->f:format.raw()}</h1>
</div>
</f:if>
<f:else>
<h1 class="header-type2">{header->f:format.raw()}</h1>
</f:else>
</f:if>
note:
the image generation could be optimized
I assume you even do not need this typoscript at all as you probably use the lib.jumbo like <f:cObject typoscriptObjectPath="lib.jumbo" arguments="..." />
At that place you could use a partial or just a section with a call to the {f:uri.image image="..."} viewhelper.
Can I add a custom field to each content-element where I can add a string?
In typoscript I would be able to read this string and print it in class="" attribute is that possible?
There is the note field for each content element Can I red this in typoscript and paste it in the class attribute?
CONTENT < styles.content.get
CONTENT.renderObj.stdWrap.dataWrap=<div class="{NOTE??}">|</div>
Thanks
UPDATE:
Is something like this possible:
CONTENT < styles.content.get
CONTENT.renderObj.stdWrap {
key.field = layout
4 = TEXT
4.value = <div class="csc-default blue">|</div>
5 = TEXT
5.value = <div class="csc-default meineklasse2">|</div>
6 = TEXT
6.value = <div class="csc-default meineklasse3">|</div>
}
As to stay with a given CI it normally is no good option to enable editors to enter CSS-class names by hand. A better way would be to have a set of possible classes the editor can choose from.
This can be done if you use the already available field layout in the tt_contentrecord.
As the layoutfield is type int you might need a 'translation' to your expected class names, or you stay with numbered classes like frame-layout-1 to frame-layout-3. This is the (in FSC) build in solution and available option.
You can enhance this option and also modify it.
Enhancing the selection is done in page TSconfig:
// Adding more layouts:
TCEFORM.tt_content.layout.addItems {
4 = my special layout
5 = my other special layout
}
// Modifying layouts names:
TCEFORM.tt_content.layout.altLabels {
1 = my default layout
}
// remove items
TCEFORM.tt_content.layout.removeItems = 2,3
In FSC this field is evaluated in the layout template (Resources/Private/Layouts/Default.html) (if you also use a frame_class ????)
[...]
<div id="c{data.uid}" class="frame frame-{data.frame_class} frame-type-{data.CType} frame-layout-{data.layout}{f:if(condition: data.space_before_class, then: ' frame-space-before-{data.space_before_class}')}{f:if(condition: data.space_after_class, then: ' frame-space-after-{data.space_after_class}')}">
[...]
But you can override the Default.html file with your own, like in every fluid templating system. Just copy the original file to your own space and add the new location to the template (Layout) paths.
That could end in something like:
[...]
<div id="c{data.uid}" {f:render.section(name:'layout-selection', arguments={layout:'layout'})} ... >
[...]
<f:section name="layout-selection">
<f:switch expression="{layout}">
<f:case value="1">class="normal"</f:case>
<f:case value="4">class="special"</f:case>
<f:case value="5">class="very-special"</f:case>
<f:defaultCase>class="default"</f:defaultCase>
</f:switch>
</f:section>
based on the version of your TYPO3 the template paths of FSC can be configured like:
(up to TYPO3 7):
lib.fluidContent {
templateRootPaths {
20 = EXT:my_extension/Resources/Private/Templates/
}
partialRootPaths {
20 = EXT:my_extension/Resources/Private/Partials/
}
layoutRootPaths {
20 = EXT:my_extension/Resources/Private/Layouts/
}
}
or (since TYPO3 8): (Manual)
lib.contentElement {
templateRootPaths {
20 = EXT:my_extension/Resources/Private/Templates/
}
partialRootPaths {
20 = EXT:my_extension/Resources/Private/Partials/
}
layoutRootPaths {
20 = EXT:my_extension/Resources/Private/Layouts/
}
}
I found a solution which works for me.
tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
key.field = layout
4 = TEXT
4.value = <div class="blue"><div class="container-fluid"><div class="design">|</div></div></div>
5 = TEXT
5.value = <div class="white"><div class="container-fluid"><div class="design">|</div></div></div>
6 = TEXT
6.value = <div class="grey"><div class="container-fluid"><div class="design">|</div></div></div>
}
I'am new to typo3 and I want to integrate my HTML template in it. but I can't add my content to the pages threw the dashboard all I get is a blank page.
I'am using TYPO3 v8
Greetings!
The steps you need to do for template integration in TYPO3 8
TYPOSCRIPT
Tell TYPO3 by where the templates should be get.
page = PAGE
page.10 {
templateRootPaths {
10 = PATH TO YOUR TEMPLATES
}
layoutRootPaths {
10 = PATH TO YOUR LAYOUTS
}
partialRootPaths {
10 = PATH TO YOUR PARTIALS
}
templateName = TEXT
templateName.stdWrap {
cObject = TEXT
cObject {
data = levelfield:-2,backend_layout_next_level,slide
override.field = backend_layout
split {
token = pagets__
1.current = 1
1.wrap = |
}
}
ifEmpty = Home
}
}
LAYOUTS
It's not required to create a layout, but i suggest to do it, also if you have just one type of template.
The layouts ( in TYPO3 called Backend Layouts ) can be created in TYPO3 backend and the backend layouts are saved in database. But you can save the backend layouts configuration in a file.
Hint: Try save the backend layouts configuration in files so you can add to
git
Example of backend layout configuration:
mod.web_layout.BackendLayouts {
Home # identified by this name {
title = Home # this is shown in backend when you select the layout
icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
config {
backend_layout {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Content
colPos = 1 # this is important, i'm talking about colPos below
}
}
}
}
}
}
}
}
ColPos meaning: you can have multiple columns in a layout, and the colPos is used to render the content in frontend. This is what will be used later in template <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: 1}" />
The above configuration should be included in PageTs. This is found if you edit a page and go to Resources tab.
Typoscript configuration of lib.dynamicContent
lib.dynamicContent = COA
lib.dynamicContent {
5 = LOAD_REGISTER
5 {
colPos.cObject = TEXT
colPos.cObject {
field = colPos
ifEmpty.cObject = TEXT
ifEmpty.cObject {
value.current = 1
ifEmpty = 0
}
}
pageUid.cObject = TEXT
pageUid.cObject {
field = pageUid
ifEmpty.data = TSFE:id
}
contentFromPid.cObject = TEXT
contentFromPid.cObject {
data = DB:pages:{register:pageUid}:content_from_pid
data.insertData = 1
}
wrap.cObject = TEXT
wrap.cObject {
field = wrap
}
maxItems.cObject = TEXT
maxItems.cObject {
field = maxItems
ifEmpty =
}
}
20 = CONTENT
20 {
table = tt_content
select {
includeRecordsWithoutDefaultTranslation = 1
orderBy = sorting
where = {#colPos}={register:colPos}
where.insertData = 1
pidInList.data = register:pageUid
pidInList.override.data = register:contentFromPid
max.data = register:maxItems
// select.languageField setting is needed if you use this typoscript in TYPO3 < v7
// languageField = sys_language_uid
}
stdWrap {
dataWrap = {register:wrap}
required = 1
}
}
90 = RESTORE_REGISTER
}
lib.dynamicContentSlide < lib.dynamicContent
lib.dynamicContentSlide.20.slide = -1
lib.dynamicContentFirst < lib.dynamicContent
lib.dynamicContentFirst.20.select.max = 1
Home layout html integration
<f:render section="main" />
Home template integration
<f:layout name="Home" />
<f:section name="content">
// content
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: 1}" />
</f:section>
Now we have the setup of layouts and templates. Hope that you have a basic setup of TYPO3 ( a root page at least and a template setup )
If you don't have this setup already, follow the next steps:
Create a root page
Go with list on root page
Create a Template record - go in Options tab and check Clear -> Constants and Clear -> setup and check also Rootlevel
Go in Includes tab and select from the multiple selectbox fluid_styled_content
Paste the TYPOSCRIPT configuration in the created template ( check General Tab )
Edit Root page and go to the Appearance tab to select the Backend Layout.
I recently changed form css_styled_content to fluid_styled_content. In my custom grid element I would like to render 'Content Element Layout' to this container. After switching to FSC it's not working anymore. How to get the fluid style content classes of an element via typoscript in my custom element? I render the element purely via typoscript like this:
Right now:
<div class="row test"> ... </div>
Via typoscript:
plugin.tx_myplugin.setup.my_1col {
preCObject = LOAD_REGISTER
preCObject {
containerClasses.cObject = COA
containerClasses.cObject {
10 = TEXT
10 {
value = equal-height
fieldRequired = flexform_equalHeight
noTrimWrap = | ||
}
...
stdWrap.insertData = 1
stdWrap.trim = 1
}
containerAttributes.cObject = COA
containerAttributes.cObject {
10 = TEXT
10 {
data = register: containerClasses
noTrimWrap = | class="row test |"|
}
}
}
..
}
How to get the fluid style content classes of an element via typoscript in custom element ... e.g.?:
Goal:
<div class="row frame frame-default frame-layout-0"></div>
On TYPO3 version 8 those fields are frame_class and layout
Should something like this be sufficient?
plugin.tx_myplugin.setup.my_1col{
stdWrap.wrap= <div class="frame frame-{field:frame_class} frame-layout-{field:layout}">|</div>
insertData=1
}
I'm trying to add a "user controlled" footer in the main layout of a Typo3 Fluid based template.
This means that I've added a backend layout with four columns in a special back-end page called "footer page". A user is able to add content elements in those columns using the WEB > PAGE module.
Whenever a user adds a content element (text, text w/images, bullet lists, etc...) in one of the columns, everything works and the content is correctly displayed.
But when the user tries to add a special menu content element, the menu isn't displayed and the column container stays empty.
the main layout
<body>
...
<div id="footer">
<f:cObject typoscriptObjectPath="lib.footer" />
</div>
</body>
main PAGE typoscript
page = PAGE
page {
# Regular pages always have typeNum = 0
typeNum = 0
10 = FLUIDTEMPLATE
10 {
#file = {$filepaths.templates}index_f.html
partialRootPath = {$filepaths.templates}partials/
layoutRootPath = {$filepaths.templates}layouts/
variables {
...
footer < lib.footer
...
}
}
}
lib.footer typoscript
lib.footer = COA
lib.footer {
10 = CONTENT
10 {
table = tt_content
select.pidInList = {$contentpage.footerPID}
select.where = colPos = 901
select.orderBy = sorting
stdWrap.wrap = <div id="footer-widget-1" class="col205">|</div>
}
20 = CONTENT
20 {
table = tt_content
select.pidInList = {$contentpage.footerPID}
select.where = colPos = 902
select.orderBy = sorting
stdWrap.wrap = <div id="footer-widget-2" class="col205">|</div>
}
...
}
Am I doing something wrong or is it a bug?
Typo3 version is 6.0.4
You may want to have a look at the VHS extension for TYPO3 - it contains one ViewHelper in particular which would let you render content elements from any column on any page (by UID). It can even render content elements from a list of content element UIDs (which you could specify in TypoScript, select in a FlexForm, make editable in the constants editor etc.):
http://fedext.net/viewhelpers/vhs/Content/RenderViewHelper.html
Many times the ViewHelpers from VHS will let you do exactly the same as TS lets you do, but do so directly in Fluid and with the option to manually control the HTML that is output.
Cheers,
Claus aka. NamelessCoder