I'm using Typo3 7.6.10 with Gridelements 7.0.5. I'm trying to wrap the gridelement output with the following code but the wrapping is not working. Both files are loaded. The 2-cols-50-50 element is available in the backend and the static gridelements template is loaded. The content of the gridelement is displayed without the wrap defined in the gridelements.ts file.
I would be happy for every help.
tsconfig.ts
tx_gridelements {
overruleRecords = 1
setup {
2-cols-50-50 {
title = 2-Columns
description = 2-columns contentelement
topLevelLayout = 0
config {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Left
colPos = 11
}
2 {
name = Right
colPos = 12
}
}
}
}
}
}
}
}
gridelements.ts
tt_content.gridelements_pi1.20.10.setup >
tt_content.gridelements_pi1.20.10.setup {
2-cols-50-50 < lib.gridelements.defaultGridSetup
2-cols-50-50 {
columns {
11 < .default
11.wrap = <div class="left">|</div>
12 < .default
12.wrap = <div class="right">|</div>
}
wrap = <div class="well">|</div>
}
}
I found the mistake. The static gridelements template has to be included before the extension template. Otherwise the static template overwrites tt_content.gridelements_pi1.
Related
I'm running a Typo3 v9.5.4 Onepager style Website. The content is loaded directly from the tt_content. The Website has two FE languages (German/English).
I have a CTA button which has an anchorlink. The button is create with typoscript. I created one button for the German version and one for the English verson bc they have another value and another ancorlink.
I'm not sure if I can access a tt_content field directly from a fluid viewhelper. This is my code i've tried
<f:if condition="{tt_content.sys_language_uid} == 1">
<f:then>
<f:format.raw>{buttonEn}</f:format.raw>
</f:then>
<f:else>
<f:format.raw>{buttonDe}</f:format.raw>
</f:else>
</f:if>
This is my Typoscript for the two button Objects
lib.buttonDe = TEXT
lib.buttonDe {
value = German Text
stdWrap.typolink.parameter = #anchorlinkDE
stdWrap.typolink.ATagParams = class="button"
}
lib.buttonEn = TEXT
lib.buttonEn {
value = English Text
stdWrap.typolink.parameter = #anchorlinkEN
stdWrap.typolink.ATagParams = class="button"
}
And this is the typoscript that loads the Content, the Languages Menu and the Fluidtemplate (the Onepager Content is loaded without a Fluidtemplate, it loads the content directly from tt_content):
//--------------------- One Pager Content
lib.sectionContent = HMENU
lib.sectionContent {
excludeUidList = 12,13,16,17,29
1 = TMENU
1 {
NO = 1
NO {
doNotLinkIt = 1
stdWrap >
stdWrap {
cObject = COA
cObject {
if.value = 4
if.equals.field = doktype
if.negate = 1
10 < temp.titleSectionId
10.wrap = <section id="|">
20 = CONTENT
20 {
table = tt_content
select {
pidInList.field = uid
orderBy = colPos,sorting
# Only selects Content where CE Layout is 0
where = (tt_content.layout = "0")
}
wrap = <div class="container">|</div>
renderObj < tt_content
}
30 = TEXT
30 {
wrap = </section>
}
}
}
}
}
}
//---------------------
// Language Selector
lib.langmenu = HMENU
lib.langmenu {
special = language
addQueryString = 1
special.value = {$config.language.uids}
1 = TMENU
1 {
wrap = <ul class="dg-langmenu row">|</ul>
NO = 1
NO {
stdWrap.current = 1
stdWrap.setCurrent = {$config.language.labels}
allWrap = <li class="col s6">|</li>
}
ACT < .NO
ACT.doNotLinkIt = 1
ACT.allWrap = <li class="act col s6">|</li>
}
}
page = PAGE
page{
10 = FLUIDTEMPLATE
10 {
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 = onePager
}
templateRootPaths {
10 = {$path.privat}Templates/
}
layoutRootPaths {
10 = {$path.privat}Layouts/
}
partialRootPaths {
10 = {$path.privat}Partials/
}
variables{
buttonDe < lib.buttonDe
buttonEnd< lib.buttonEn
}
}
So I'd like to load the buttonEn if the content has the sys_language_uid 1 (English) else I want it to load the buttonDe.
Do I need to create an Typoscript Object and then load this Object into the f:if viewhelper? If so how do I create this Typoscript Object.
Thanks for your help!
The easy way (pure typoscript)
lib.button = TEXT
lib.button {
value = English text
lang.de = Deutscher Text
stdWrap.typolink.parameter = #anchorlinkDE
stdWrap.typolink.ATagParams = class="button"
}
[siteLanguage("locale") == "en_EN.UTF-8"]
lib.buton.stdWrap.typolink.parameter = #anchorlinkEN
[global]
but the professional solution is configuring your labels in a language file (see answer from Thomas Löffler) and use:
lib.button = TEXT
lib.button {
lib.button.data = LLL:EXT:site_extension/Resources/Private/Language/locallang.xlf:button_label
stdWrap.typolink.parameter = #anchorlinkEN
stdWrap.typolink.ATagParams = class="button"
}
[siteLanguage("locale") == "de_DE.UTF-8"]
lib.buton.stdWrap.typolink.parameter = #anchorlinkDE
[global]
For language dependent constant data you might use typoscript conditions to redefine a value for your non default languages. (or define a fallback and conditions for each language.)
You should use a locallang file and refer to it in TypoScript.
Create a locallang file (copy an existing and remove all values) named locallang.xlf
Add your english label in there
Create a locallang file in the same folder with prepending de. in the filename (de.locallang.xlf) and add the german label
Refer to it in the TypoScript by using lib.button.data = LLL:EXT:your_ext/path/to/locallang/locallang.xlf:buttonLabel, see https://docs.typo3.org/typo3cms/TyposcriptReference/DataTypes/Index.html#lll
This TS getText function gets the label depending on the set language ID automatically and you only need one TS for the button.
Example: https://docs.typo3.org/typo3cms/TyposcriptIn45MinutesTutorial/UsingGetText/Index.html
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'd like to change the way elements are rendered depending on the page's backend layout.
Changing the fluid styled content template depending on the backend layout works as following:
[globalVar = TSFE:page|backend_layout = 1][globalVar = TSFE:page|backend_layout = 2]
lib.fluidContent.templateRootPaths.10 = EXT:ds_res/Resources/Private/Templates/ContentTemplates/
[global]
If it's 1 or 2, then use the other templates.
However, this only works if the BE layout is set directly at the page and not when it's inherited from its parent.
How to fix this?
Running TYPO3 7.6.15
In TYPO3 7.5 "Backend Layout"-Conditions has been simplified with "pagelayout" in Typoscript. Example:
page.10 = FLUIDTEMPLATE
page.10 {
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = pagelayout
default = TEXT
default.value = EXT:sitepackage/Resources/Private/Templates/Home.html
3 = TEXT
3.value = EXT:sitepackage/Resources/Private/Templates/1-col.html
4 = TEXT
4.value = EXT:sitepackage/Resources/Private/Templates/2-col.html
}
}
Instead of:
field = backend_layout
field.data = levelfield:-2,backend_layout_next_level,slide
field.ifEmpty = default
Maybe this also works in your conditions like this:
[globalVar = TSFE:page|pagelayout = 1]
However, you should not change the used template file with [xy]-conditions and prefer using a CASE shown in the example above. Each number is the UID of a backend_layout by the way.
In TYPO3 9.5+ you can use typoscript conditions like:
[page["backend_layout"] == 'pagets__2']
page.bodyTagCObject.value.wrap = <body id="uid|" class="fullpage">
[end]
Edit:
As Bernd has mentioned use backend_layout only if you need the real defined field. If you need the computed value (e.g. for a sub page getting its layout from the backend_layout_next_level from a parent page) use pagelayout with a case like:
bodyTagCObject = TEXT
bodyTagCObject.value.field = uid
bodyTagCObject.value.wrap.cObject = CASE
bodyTagCObject.value.wrap.cObject{
key.data = pagelayout
default = TEXT
default.value = <body id="uid|" class="standard">
pagets__2 = TEXT
pagets__2.value = <body id="uid|" class="fullpage">
}
We use this solution
page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
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 = Index
}
layoutRootPaths {
10 = EXT:yourext/Resources/Private/Layouts
}
partialRootPaths {
10 = EXT:yourext/Resources/Private/Partials
}
templateRootPaths {
10 = EXT:yourext/Resources/Private/Templates
}
}
This approach is when u do not have the Backendlayouts in the DB (made through the backend) but include them from files. As there is no uid then you go by the templatename.
Example:
If you use this PageTS:
mod.web_layout.BackendLayouts {
Blankpage {
title = Blankpage
name = Blankpage
icon = EXT:yourext/Resources/Public/Icons/BackendLayouts/Blankpage.jpg
config {
backend_layout {
colCount = 1
rowCount = 2
rows {
1 {
columns {
1 {
name = Nameofthecolumn
colPos = 0
colspan = 1
}
}
}
2 {
columns {
1 {
name = Nameofthesecondcolumn
colPos = 1
colspan = 1
}
}
}
}
}
}
}
You will need a Template.html with the name Blankpage.html within your EXT-Templates.
So you can add more Templates and Backendlayouts without touching the TS again. Simply add PageTS and a html-template.
There is a feature available which avoids having that code duplicated
page.10 = FLUIDTEMPLATE
page.10 {
templateName = TEXT
templateName.stdWrap.cObject = CASE
templateName.stdWrap.cObject {
key.data = pagelayout
....
As you can not handle the inherited layouts in conditions you need to use typoscript. My solution is this:
page.10 = FLUIDTEMPLATE
page.10 {
templateRootPaths.1 = {$resDir}/Private/Templates
partialRootPaths.1 = {$resDir}/Private/Partials
layoutRootPaths.1 = {$resDir}/Private/Layouts
templateName = TEXT
templateName.cObject = CASE
templateName.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
#Default Template
default = TEXT
default.value = subpage
# homepage
pagets__homepage = TEXT
pagets__homepage.value = homepage
pagets__subpage = TEXT
pagets__subpage.value = subpage
}
variables {
:
pageLayout = TEXT
pageLayout.data = levelfield:-1, backend_layout_next_level, slide
pageLayout.override.field = backend_layout
// since TYPO3 7 this already is computed by the core and this gives the same:
pageLayout = TEXT
pageLayout.data = pagelayout
:
}
}
Avoid using file for better implementation with ..RootPaths.
As we use backendlayouts defined in files (which gets included in the pageTSconfig) the key names starting with pagets__, you also might use the numbers of backend_layout records.
I use the constant {$resDir} to define the root of resources which can be changed in an easy way. In a siteextension this could be:
resDir = EXT:site_project1/Resources
I also define a fluid variable with the currently active page layout for further differentiation in the templates.
If you want the ...RootPaths to be different for each layout you need to build cObject with a CASE obejct similar to my selection of the template name.
In general: all this could be handled in the fluid templates if you have the backend layout available in your variables: you only need to have one starting template, which calls a layout where all further calls to partials are individualized by the current layout like
<f:render partial="{pageLayout}/header" arguments="{_all}" />
TYPO3 11.x:
[tree.pagelayout == 2]
...
[global]
https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/11.0/Feature-88276-TypoScriptConditionForPageLayout.html
In TYPO3 CMS we have left, normal, right and border columns as default. Is it possible to create your own columns in the BE?
please go to listview and click new element
there should be backend layout available
put in konfiguration something like
backend_layout {
colCount = 3
rowCount = 3
rows {
1 {
columns {
1 {
name = oben
colPos = 10
colspan = 3
}
}
}
2 {
columns {
1 {
name = linke Spalte
colPos = 0
}
2 {
name = mittlere Spalte
colPos = 1
}
3 {
name = rechte Spalte
colPos = 2
}
}
}
3 {
columns {
1 {
name = unten
colPos = 11
colspan = 3
}
}
}
}
}
i think this is a good example how you can make usage of rows and cols
then go to a page where you want to use this layout go to page --> edit and choose the layout
you see in my example that i have colPos = 11 for example
to get the content from colPos = 11 you need to tell your template that
index.html:
<div class="wrapper">
<div class="col9 last contentInner">
<f:cObject typoscriptObjectPath="lib.title" />
<f:format.raw>{normaleseitecolpos0}</f:format.raw>
</div>
</div>
this is your fluidtemplate
first <f:cObject .... links to a lib that you can use in setup.ts
second <f:format.raw.... links to a colpos related variable
if you add this to the setup.ts
page {
10 = FLUIDTEMPLATE
10 {
file = fileadmin/templates/knowhow/layout/index.html
variables {
# Einspalter
normaleseitecolpos0 < styles.content.get
normaleseitecolpos0.select.where = colPos = 11
}
}
}
I'm using gridelements as an extension, but I'm sure this doesn't matter regarding my question.
I have an element like:
tt_content.gridelements_pi1.20.10.setup {
1 < lib.gridelements.defaultGridSetup
1 {
columns {
10 < .default
10.wrap = <div class="class1">|</div>
}
wrap = <div class="class3"><div class="class2">|</div></div>
}
}
What I want to achieve is to insert a menu, which will exist as a Typoscript object at this place:
wrap = <div class="class3"><div class="class2">[>>MENU<<]|</div></div>
I tried this:
wrap.cObject = COA
wrap.cObject {
10 = TEXT
10.value = <div class="class3"><div class="class2">
20 < temp.menu
30 = TEXT
30.value = </div></div>
}
Which works as it shows the menu, but it also fails, as it destroys the wrap itself.
How can I solve this?
I finally solved it using prepend, append and a blank wrap:
tt_content.gridelements_pi1.20.10.setup {
1 < lib.gridelements.defaultGridSetup
1 {
columns {
10 < .default
10.wrap = <div class="class1">|</div>
}
wrap = |
prepend = COA
prepend {
10 = TEXT
10.value = <div class="class3"><div class="class2">
20 < temp.menu
}
append = COA
append {
10 = TEXT
10.value = </div></div>
}
}
}