I try to create my first FLUIDTEMPLATE. But the Methode
f:layout
dont get activated.
My structure:
/fileadmin/
/fileadmin/layouts/layout.html
/fileadmin/partials/
/fileadmin/styles/
/fileadmin/templates/template.html
/fileadmin/typoscript/
/fileadmin/typoscript/01_script/setup.ts
/fileadmin/typoscript/02_object/
setup.ts:
page = PAGE
page.typeNum = 0
page.10 = FLUIDTEMPLATE
page.10 {
format = html
file = fileadmin/templates/layouts/layout.html
partialRootPath = fileadmin/templates/partials/
layoutRootPath = fileadmin/templates/layouts/
variables {
content_main < styles.content.get
content_main.select.where = colPos = 0
}
}
page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
default = TEXT
default.value = fileadmin/templates/template.html
}
Layout.html:
<div id="wrapper">
<div id="header">
header
</div>
<div id="top_nav">
top_nav
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="center">
center
</div>
<div id="footer">
footer
</div>
</div>
template.html:
<f:layout name = "Layout" />
template setup:
<INCLUDE_TYPOSCRIPT: source ="DIR:fileadmin/typoscript/">
Now, if i view the webpage i only see a blank page. If i look on the code i get that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2017 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at https://typo3.org/
-->
<title>Fluid</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css" href="typo3temp/Assets/b9db200ac9.css?1491821607" media="all">
</head>
<body>
<f:layout name = "Layout" />
</body>
</html>
I am using TYPO3 v7.6.16.
Templates: Startseite.html
<f:layout name="Default" />
<f:section name="body">
<div id="wrapper">
<div id="header">
{header->f:format.raw()}
</div>
<div id="top_nav">
{top_nav->f:format.raw()}
</div>
<div id="left">
{left->f:format.raw()}
</div>
<div id="right">
{right->f:format.raw()}
</div>
<div id="center">
{center->f:format.raw()}
</div>
<div id="footer">
{footer->f:format.raw()}
</div>
</div>
</f:section>
you can configure same for inner page(Inhaltsseite) layout.
Layouts: Default.html
<f:render section="body" />
Typoscript: (setup.ts)
lib.pageTemplate = FLUIDTEMPLATE
lib.pageTemplate {
templateName = TEXT
templateName.stdWrap.cObject = CASE
templateName.stdWrap.cObject {
key.field = backend_layout
# #todo: setup all page templates
default = TEXT
default.value = Startseite
1 = TEXT
1.value = Inhaltsseite
}
templateRootPaths {
10 = fileadmin/templates/Resources/Private/Templates/
}
partialRootPaths {
10 = fileadmin/templates/Resources/Private/Partials/
}
layoutRootPaths {
10 = fileadmin/templates/Resources/Private/Layouts/
}
variables {
content = CONTENT
content {
table = tt_content
select.orderBy = sorting
slide = -1
select.where = colPos=0
}
}
}
# Page setup Configuration
page = PAGE
page {
# Your TypeNum
typeNum = 0
#Include header data if any
headerData{
}
#Include website meta
meta{
}
#Include stylesheet
includeCSS {
}
#Include Js files(In the header)
includeJS {
}
#Include Js in footer
includeJSFooter {
}
# assign template (copy fluid template object)
10 < lib.pageTemplate
}
Include setup.ts in the template->include->setup.ts from the BE.
<INCLUDE_TYPOSCRIPT:source="FILE:fileadmin/templates/Configuration/TypoScript/setup.ts" />
Greetings!
There are several issues with your example code. Lets go through them:
You should not put your templates in the fileadmin where they are (by default) accessable by web requests and editable by editors. Instead put them inside an extension under Resources/Private/.
You should not specify the layout file as your template. You have
file = fileadmin/templates/layouts/layout.html
Instead of the layout.html you should point to a template like your Template.html inside Resources/Private/Templates
In your template you then may include a layout file. But remove the whitespaces: <f:layout name="Layout" />.
Use UpperCase names for your template, layout and partial files (Template.html instead of template.html).
Use templateRootPaths and layourRootPaths and partialRootpaths instead.
So your TypoScript could look like this:
page.10 = FLUIDTEMPLATE
page.10 {
format = html
file = EXT:my_ext/Resources/Private/Templates/Template.html
partialRootPaths {
10 = EXT:my_ext/Resources/Private/Partials/
}
layoutRootPaths {
10 = EXT:my_ext/Resources/Private/Layouts/
}
templateRootPaths
10 = EXT:my_ext/Resources/Private/Templates/
}
variables {
content_main < styles.content.get
content_main.select.where = colPos = 0
}
}
you first have to create a page object in typoscript (which is missing in the typoscript above):
page = PAGE
this should be the first line in your typoscript.
Related
I am using TYPO3 9.5.20
I try to test a FLUIDTEMPLATE implementation and I get an Oops, ... with Section "PageHeader" does not exist.
Here my template file:
<f:layout name="Layout1ColumnPage" />
<f:section name="WholeContent">
<div id="whole-content">
<f:format.raw>{contentNormal}</f:format.raw>
<f:format.raw>{contentLeft}</f:format.raw>
<f:format.raw>{contentRight}</f:format.raw>
</div>
</f:section>
<f:section name="MainContent">
<div id="main-content">
<f:format.raw>{contentLeft}</f:format.raw>
</div>
</f:section>
<f:section name="SideContent">
<div id="side-content">
<f:format.raw>{contentRight}</f:format.raw>
</div>
</f:section>
<f:section name="PageHeader">
<div id="page-header">
<div class = "body" cellpadding="0" cellspacing="0">
<div class = "header w200">
<div class = "headTD">
<f:image src = "fileadmin/Page/Resources/Public/Images/Country-Radio-2020.jpg" alt="HeaderImage" />
</div>
</div>
--- Ende Image ---
</div>
</div>
</f:section>
<f:section name="PageFooter">
<div id="page-footer">
<div id="footer-notice"> <p>This is the page footer area.</p> </div>
</div>
</f:section>
Here my layout file
<div id="page">
<f:render section="PageHeader" />
<div id="page-body">
<div id="page-title">{data.title}</div>
<f:render section="WholeContent" />
<div id="page-body-end"> </div>
</div>
<f:render section="PageFooter" />
</div>
Here my setup file:
page = PAGE
page.typeNum = 0
page.10 = FLUIDTEMPLATE
page.10 {
format = html
# Pfad zu der HTML Vorlage der Webseite
// file = fileadmin/Page/Resources/Private/Templates/CRtemplate.html
templateName = CRtemplate
# Pfad zu eingebundenen Partials
partialRootPaths.1 = fileadmin/Page/Resources/Private/Partials/
# Pfad zur Layout Datei
layoutRootPaths.1 = fileadmin/Page/Resources/Private/Layouts/
# Pfad zur Layout Datei
templateRootPaths.1 = fileadmin/Page/Resources/Private/Templates/
file.cObject = CASE
file.cObject {
key {
data = levelfield: -1, backend_layout_next_level, slide
override.field = TSFE:page|backend_layout
}
# Einbindung des ersten HTML Templates
1 = TEXT
1.value = fileadmin/Page/Resources/Private/Layouts/Layout1ColumnPage.html
# Einbindung des zweiten HTML Templates
2 = TEXT
2.value = fileadmin/Page/Resources/Private/Layouts/Layout2ColumnPage.html
}
variables {
# Verknüpfung der Inhalte mit dem Backend Layout
contentNormal < styles.content.get
contentNormal.select.where = colPos = 10
contentLeft < styles.content.get
contentLeft.select.where = colPos = 11
contentRight < styles.content.get
contentRight.select.where = colPos = 12
}
}
In my opinion sections are defined in the right way. If I delete in the layout file render of PageHeader then I got the message that he cannot find section WholeContent. So it seems to be a general problem.
EDIT
As Bernd mentioned below, in Typo3 9.5.20 the setting of the rootPath is only possible as an area. example
templateRootPaths.1 = fileadmin/Page/Resources/Private/Templates/
But the 9.5 documentation still says, that both is possible!
Have also edited the above code!
I can't make out an error for sure, but there are some aspects you might consider for your templating:
Your templates miss an header with namespace declartions like
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
data-namespace-typo3-fluid="true">
:
</html>
You only define one path. That was usual in the beginning of fluid and replaced with paths arrays. (I don't know whether this still works with single path declarations)
# Pfad zur Layout Datei
templateRootPaths.1 = fileadmin/Page/Resources/Private/Templates/
# Pfad zu eingebundenen Partials
partialRootPaths.1 = fileadmin/Page/Resources/Private/Partials/
# Pfad zur Layout Datei
layoutRootPaths.1 = fileadmin/Page/Resources/Private/Layouts/
your template declaration is weird:
first you avoid a declaration of file by commenting
then you define a template by templateName
which is asided with a file.cObject where you miss that backend layouts might be declared in pageTS and are no longer just numbers (no default value in case)
Meanwhile you can get the evaluation of backend_layout and backend_layout_next_level with the core defined typoscript data pagelayout which results in the simple declaration:
page.10 {
templateName {
data = pagelayout
ifEmpty = default
}
}
You might add a special fluid variable to debug the values in the backend_layout fields:
page.10 {
variables {
pagelayout = TEXT
pagelayout.data = pagelayout
}
}
minor topics:
Don't store your templates in fileadmin/. Use a site extension.
{variable->f:format.raw()} is shorter and most times more readable than <f:format.raw>{variable}</f:format.raw>
i am trying to use Typo3 Fluid with Backendlayouts. But instead of rendering the Content Elements it renders the Html of the Content elements. For example i have a simple Text-Element in the Backend with "some text". It will show <p>some text</p> in the Frontend not "some text" as expected. The html of the homepage looks like this:
<p>
<p>test</p>
</p>
The viewhelper i used to render the content looks like this:
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '11'}" />
</div>
As you can see there is no <p></p> tag at all in my Default.html.
I know that the Text element itself uses the <p> </p> Tags in the backend but i am surprised they get rendered as text and also included in the html. I just want the html of the Contentelement to be included in the html of the homepage
I guess the mistake could be in this typoscript for the lib.dynamicContent in my custom theme extension:
lib.dynamicContent = COA
lib.dynamicContent {
10 = LOAD_REGISTER
10 {
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
}
}
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
}
stdWrap {
dataWrap = {register:wrap}
required = 1
}
}
30 = RESTORE_REGISTER
}
This is the Default.html
<f:layout name="Default" />
<f:section name="Main">
<main role="main">
<div class="container">
<div class="row">
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="pageUid: '{data.uid}', {colPos: '11'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="pageUid: '{data.uid}', {colPos: '12'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="pageUid: '{data.uid}', {colPos: '13'}" />
</div>
</div>
</div>
</main>
</f:section>
Thank you for your time and please comment if you need more information to be able to help me.
Daniel
I found the mistake and it was a basic one i guess. I did not include the Fluid Content Elements Css - only the Fluid Content Elements. Thanks for your input. If you have this problem include it in your typoscript or in your root-template in the backend. It should appear in "includes"
Probably missing a <f:format.raw> around your Content fluid will htmlescape by default
I use TYPO3 v8.5 with fluid-templating (with layout, partials and template) and fluid-styled-content.
However, as soon as I create a fsc-element e.g. text&media on my site, the partial files are ignored and only the section from the template file is output in the FE.
If I set the content-element to "hide", then the correct site-structure with partials were output in the FE.
My root-template is:
page = PAGE
page.includeCSS {
main = fileadmin/Demo/Resources/Public/Css/main.css
}
page.10 = FLUIDTEMPLATE
page.10 {
layoutRootPaths {
10 = fileadmin/Demo/Resources/Private/Layouts
20 = fileadmin/Demo/Individual/Private/Layouts
}
partialRootPaths {
10 = fileadmin/Demo/Resources/Private/Partials
20 = fileadmin/Demo/Individual/Private/Partials
}
templateRootPaths {
10 = fileadmin/Demo/Resources/Private/Templates
20 = fileadmin/Demo/Individual/Private/Templates
}
variables {
contentMain < styles.content.get
}
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = pagelayout
default = TEXT
default.value = fileadmin/Demo/Resources/Private/Templates/DefaultTemplate.html
pagets__1 < .default
}
}
My page-TSconfig:
mod.web_layout.BackendLayouts {
1 {
title = Default Template
config {
backend_layout {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Main Content
colPos = 0
}
}
}
}
}
}
}
}
DefaultLayout.html :
<f:render partial="Header"/>
<f:render section="Main"/>
<f:render partial="Footer"/>
Footer.html :
<div class="footer-container">
<footer class="wrapper">
Hier steht der Footer-Text
</footer>
</div>
Header.html :
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">LOGO</h1>
<nav>
Hier erscheint die Navigation
</nav>
</header>
</div>
DefaultTemplate.html :
<f:layout name="DefaultLayout"/>
<f:section name="Main">
<div class="main-container">
<div class="main wrapper clearfix">
<article>
<f:format.raw>{contentMain}</f:format.raw>
</article>
</div>
</div>
</f:section>
Does anyone know this behavior and can give me a tip what's wrong with my code.
In TYPO3 v7.6 this code works fine.
There is currently an open bug (see https://forge.typo3.org/issues/77235) regarding this issue. Try to rename your Partials as a workaround until this is fixed.
Is there a way to have the Frontend layout determine the Backend layout, template file and columns?
At the moment I have the following code that allows you to set the Backend layout and it uses the appropriate template file. But this gets very messy when there are different column positions for each layout.
page.10 = FLUIDTEMPLATE
page.10 {
#format = html
file= fileadmin/templates/example/partials/example_home.html
partialRootPath = fileadmin/templates/example/partials/
layoutRootPath = fileadmin/templates/example/layouts/
variables {
# Assign the Columns
main < styles.content.get
main.select.where = colPos = 0
news < styles.content.get
news.select.where = colPos = 1
}
}
}
# Assign the Template files with the Fluid Backend-Template
page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
# Set the default Template
default = TEXT
default.value = fileadmin/templates/example/partials/example_home.html
# Set a second Template
23 = TEXT
23.value = fileadmin/templates/example/partials/example_internal.html
}
Not messy at all, here's a real world example:
page.10 = FLUIDTEMPLATE
page.10 {
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = pagelayout
default = TEXT
default.value = {$customPagesTemplatePath}/Standard.html
1 = TEXT
1.value = {$customPagesTemplatePath}/Home.html
2 = TEXT
2.value = {$customPagesTemplatePath}/Landing.html
10 = TEXT
10.value = {$customPagesTemplatePath}/NewsDetail.html
11 = TEXT
11.value = {$customPagesTemplatePath}/LandingMini.html
12 = TEXT
12.value = {$customPagesTemplatePath}/FullWidth.html
}
layoutRootPath = {$customPagesLayoutPath}
partialRootPath = {$customPagesPartialPath}
}
Think about it like this:
As you say, forget about frontend layout. That's legacy; be layout serves for BE and FE.
If a page was a city, the colPos would be the street. Or rather, imagine the Backend is a map you're drawing, and the frontend is a LEGO City you build according tho that map :-)) If it's OK, I'll stick with that metaphor.
ColPos is a determined part of a page where a record lives. If you can, take a look at the tt_content table in the database: you'll see that colPos is just a column with a number. So in the city "Page 1", there's a street called "colPos 7", and it contains some records (those would be houses). With the be_layout wizard in TYPO3 you'll create an administrative map of that city: how the editor should see these streets.
In the FLUIDTEMPLATE you call depending on the selected be_layout, you will create the city itself; the rendered frontend.
Here's another real world example for such a fluid template (Home.html):
<f:render partial="Mobilenav" />
<f:render partial="Header"/>
<div class="row">
<f:cObject typoscriptObjectPath="lib.home-teaser" />
</div>
<aside>
<div class="row">
<div class="columns">
<div class="row">
<div class="fp-teaser-outer small-48 medium-24 large-12 columns">
<div class="fp-teaser-box-wrapper">
<f:cObject typoscriptObjectPath="lib.home-something" />
</div>
</div>
<div class="fp-teaser-outer small-48 medium-24 large-12 columns">
<div class="fp-teaser-box-wrapper">
<f:cObject typoscriptObjectPath="lib.home-somethingelse" />
</div>
</div>
<div class="fp-teaser-outer small-48 medium-24 large-12 columns">
<div class="fp-teaser-box-wrapper">
<div class="fp-teaser-box">
<f:cObject typoscriptObjectPath="lib.home-news-plugin-title" />
<div class="fp-teaser-hr"></div>
<div class="fp-teaser-content">
<f:cObject typoscriptObjectPath="lib.home-news" />
</div>
</div>
</div>
</div>
<div class="fp-teaser-outer small-48 medium-24 large-12 columns">
<div class="fp-teaser-box-wrapper">
<div class="fp-teaser-box">
<f:cObject typoscriptObjectPath="lib.home-blog-plugin-title" />
<div class="fp-teaser-hr"></div>
<div class="fp-teaser-content">
<f:cObject typoscriptObjectPath="lib.home-blog" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
<f:render partial="Footer"/>
... well, but where's the correlation with the colPos?
Nowhere yet! I (while being positive that there are other approaches) do this in TypoScript:
lib.home-something < styles.content.get
lib.home-something {
select.where = colPos = 7
}
So by this we prepare content for the fluid template: get all content of that page's column 7 (using the extension fluid_styled_content) and put it into a "lib" content object.
That's then inserted into the page via the f:cObject viewhelper:
<f:cObject typoscriptObjectPath="lib.home-something" />
Like this, all houses in 7th street are put into the city in exactly this location – and thus rendered in your page.
Programmatically,
$backendLayout=$GLOBALS['TSFE']->cObj->getData('pageLayout');
If None was selected in the backend [-1], it will output 'none'.
If nothing was selected it will output 'default'. Otherwise it will output the correct backend layout prefixed with your extension, taking into account subpage layouts up the page ancestry chain.
how can I replace programmatically via TypoScript the content of {content_left} in a single page via USER_INT with individual PHP content.
<div class="container">
<div class="header span-28">
<f:format.raw>{header}</f:format.raw>
</div>
<img class="logo" src="../fileadmin/logo.png" alt="logo">
<img class="headerimg" src="../fileadmin/header_img.png" alt="headerimg">
<div class="menu span-28">
<f:format.raw>{main_menu}</f:format.raw>
</div>
<div class="service span-28">
<f:format.raw>{service_menu}</f:format.raw>
</div>
<div class="content span-6 append-1">
<f:format.raw>{content_left}</f:format.raw>
</div>
<div class="content span-22 last">
<f:format.raw>{content_right}</f:format.raw>
</div>
<div class="footer span-28 last">
<f:format.raw>{footer}</f:format.raw>
</div>
</div>
My current TypoScript does look like this:
#
temp.info = USER_INT
temp.info {
userFunc = user_various->listContentRecordsOnPage
reverseOrder = 1
debugOutput = 1
}
page.content_left < temp.info
But it does not work. :( No replacement is done.
Thanks for any help.
Cheers
kk3003
gsnerf is absolutety right, it's a FLUIDTEMPLATE element.
Unfortunately this TYPOSCRIPT set to the single page where it should appear does not work, any ideas please?
# Include the PHP file with custom code
includeLibs.user_various = fileadmin/php/example_listRecords.php
#
temp.info = USER_INT
temp.info {
userFunc = user_various->listContentRecordsOnPage
}
page = PAGE
page {
typeNum = 0
metaCharset = utf-8
includeCSS{
file10 = fileadmin/css/blueprint/screen.css
file20 = fileadmin/css/blueprint/print.css
file20.media = print
file100 = fileadmin/css/main.css
file300 = fileadmin/css/service.css
file400 = fileadmin/css/mainMenu.css
file500 = fileadmin/css/sliding-box.css
file600 = fileadmin/css/gridelements.css
}
includeJS {
file10 = fileadmin/js/accordion.js
}
}
[browser = msie]
page.includeCSS.file30 = fileadmin/css/blueprint/ie.css
page.includeCSS.file30.media = screen
[global]
page.meta {
MSSmartTagsPreventParsing = true
imagetoolbar = false
}
# https_enforcer
page.5 < plugin.tx_httpsenforcer_pi1
# Create a Fluid Template
page.10 = FLUIDTEMPLATE
page.10 {
# Set the Template Pathes
file = fileadmin/templates/html/template.html
partialRootPath = fileadmin/templates/html/partials/
layoutRootPath = fileadmin/templates/html/layouts/
variables {
header < lib.header
content_left < lib.contentLeft
content_right < temp.info
main_menu < lib.mainMenu
service_menu < lib.serviceMenu
footer < lib.footer
}
}
Thanks
I'm not sure what this is supposed to have to do with templavoila? This seems more like fluid to me. If that is the case you have to replace your
page.content_left < temp.info
with the following:
10 = FLUIDTEMPLATE
10 {
[...]
variables.content_left < temp.info
}
Assuming you already have a FLUIDTEMPLATE definition you only need to copy the variables line into that one.