In my general page setup, I define the template as follows: page.10.template.file = fileadmin/template.html
Is there a way to call a MVC ViewHelper in this template? The snippet
{namespace xyz=PATH\TO\MY\ViewHelpers}
<xyz:myhelper argument="abc" />
does not work in the above template, it is surfaced as is.
It is not 100% clear for me, which cObject you use for your page template. If you would like to use Fluid ViewHelpers in your page template, then I would recommend to use FLUIDTEMPLATE for your page template.
1. FLUIDTEMPLATE
If you use FLUIDTEMPLATE for your page template, then you can use any available ViewHelper (from FLUID or any other ExtBase/Fluid extension) directly in your template (see example below).
TypoScript
page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/template.html
partialRootPath = fileadmin/templates/Partials/
layoutRootPath = fileadmin/templates/Layouts/
variables {
content < styles.content.get
content.select.where = colPos=1
}
}
Content of file: fileadmin/templates/template.html
{namespace xyz=NAMESPACE\EXTENSION\ViewHelpers}
<f:layout name="Main" />
<f:section name="Content">
<xyz:myhelper argument="abc" />
<f:format.html parseFuncTSPath="">{content}</f:format.html>
</f:section>
Content of file: fileadmin/templates/Layouts/Main.html
<f:render section="Content" />
2. TEMPLATE
If you use TEMPLATE (with markers and subparts), then you can't directly use Fluid ViewHelpers in that template. But you could define a marker which renders the FLUID ViewHelper like shown below.
TypoScript
page = PAGE
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/template.html
marks {
CONTENT < styles.content.get
VIEWHELPER = FLUIDTEMPLATE
VIEWHELPER {
template = FILE
template.file = fileadmin/templates/viewhelper.html
partialRootPath = fileadmin/templates/Partials/
layoutRootPath = fileadmin/templates/Layouts/
}
}
workOnSubpart = DOCUMENT
}
Content of file: fileadmin/templates/template.html
<!--###DOCUMENT### Start-->
###VIEWHELPER###
###CONTENT###
<!--###DOCUMENT### end-->
Content of file: fileadmin/templates/viewhelper.html
{namespace xyz=NAMESPACE\EXTENSION\ViewHelpers}
<f:layout name="Main" />
<f:section name="Content">
<xyz:myhelper argument="abc" />
</f:section>
Content of file: fileadmin/templates/Layouts/Main.html
<f:render section="Content" />
Related
I am trying to get an Image from a custom content element into my fluid template. To achieve this I am using FilesProcessor.
custom element
Here is the corresponding code snippet from my setup.typoscript:
tt_content {
heiner_newcontentelement =< lib.contentElement
heiner_newcontentelement {
templateName = Default
dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
dataProcessing.10 {
as = images
references.fieldName = image
references.table = tt_content
sorting = title
sorting.direction = descending
}
}
}
Showing what's available via f:debug-Viewhelper provides the following:
available variables in fluid template
So far, so good, what I have tried was to simply output the image in my fluid template with the following code:
<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"></html>
<f:layout name="Default" />
<f:section name="content">
<ul class="Das ist gut">
<f:for each="{images}" as="image">
<f:debug>{image}</f:debug>
<f:image image="{image}" height="250c" width="200c"/>
</f:for>
</ul>
</f:section>
</html>
although the variable "image" in the for-each loop is not empty, the image-viewhelper wont render anything. I am so desperate :( Somebody knows whats going wrong here? A lot of thx :)
According to the documentation, File Reference information are not always available in the fluidtemplate (see also https://docs.typo3.org/m/typo3/reference-coreapi/9.5/en-us/ApiOverview/Fal/UsingFal/Frontend.html#fluidtemplate).
What happens if you try this:
<ul class="Das ist gut">
<f:for each="{images}" as="image">
<f:debug>{image}</f:debug>
<f:image image="{image.originalFile}" height="250c" width="200c"/>
</f:for>
</ul>
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've a very strange behavior and a question for TYPO3 experts: Some HTML tags are not rendered, the output is like: <form enctype="multipart/form-data" />
But only with the tags <form>, <input>, <label>, <figure>
All the other tags <div>, <p>, <span>, <button>, <h2>, even <script> are working perfectly.
Btw. it has nothing to do with <f:format.html> or <f:format.raw> because I don’t have an output from the system, it’s directly in the template.
Here is my template:
<html xmlns:f="https://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="content">
<f:flashMessages />
<figure class="test">NOT working - tags rendered as text</figure>
<form action="">NOT working - tags rendered as text</form>
<div class="employees">working</div>
<p class="paragraph">working</p>
</f:section>
Another interesting thing is: The problem also occurs with the official “form” extension from TYPO3 8.7! Exactly the same problem, the mentioned tags are not rendered as HTML!
I hope somebody can help me with this problem. I’m getting crazy with this.
Environment
TYPO3: 8.7.22
PHP: 7.2
Extensions: realURL, DCE, Extensions Builder,
Grid Elements, VHS Fluid ViewHelpers, Yoast SEO, news
--- update: added TypoScript and layout file ---
TypoScript my extension (generated by the Extension Builder)
plugin.tx_rmdataschulungen_rmdataschulungen {
view {
templateRootPaths.0 = EXT:rmdata_schulungen/Resources/Private/Templates/
templateRootPaths.1 = {$plugin.tx_rmdataschulungen_rmdataschulungen.view.templateRootPath}
partialRootPaths.0 = EXT:rmdata_schulungen/Resources/Private/Partials/
partialRootPaths.1 = {$plugin.tx_rmdataschulungen_rmdataschulungen.view.partialRootPath}
layoutRootPaths.0 = EXT:rmdata_schulungen/Resources/Private/Layouts/
layoutRootPaths.1 = {$plugin.tx_rmdataschulungen_rmdataschulungen.view.layoutRootPath}
}
persistence {
storagePid = 106{$plugin.tx_rmdataschulungen_rmdataschulungen.persistence.storagePid}
#recursive = 1
}
features {
#skipDefaultArguments = 1
ignoreAllEnableFieldsInBe = 0
requireCHashArgumentForActionArguments = 1
}
mvc {
#callDefaultActionIfActionCantBeResolved = 1
}
}
Layout file (generated by the Extension Builder)
<html xmlns:f="https://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="tx-rmdata-schulungen">
<f:render section="content" />
</div>
</html>
TypoScript (output page content)
page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
templateName = Default
templateRootPaths.1 = fileadmin/Resources/Private/Templates/Page
variables {
content < styles.content.get
nav < Navigation
searchbox < lib.searchField
}
}
You shouldn't use the concept of variables for such dynamic content because of not only this issue.
Check out this question and my answer for a detailed feedback
I solved my problem: The problem was indeed <f:format.html> BUT in the main template.
I always edited my extension template -> but with <f:format.raw> in my website template (for the general output) everything works fine (although I don’t understand why this special behavior regarding the HTML tags occurs).
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.
I try to pass dynamic data from TypoScript to a Partial.
Is it possible and how can I do that?
TS:
lib.mydata = TEXT
lib.mydata.value = 470
HTML Template:
<f:render partial="mypartial" arguments="{dataitem: lib.mydata}" />
HTML Partial:
<section id="mypartial">
<div class="xy">
mehr ...
</div>
</section>
Please use TypoScript typolink for generating Links!
<f:cObject typoscriptObjectPath="lib.mydata" />
With TypoScript
lib.mydata = TEXT
lib.mydata.value = mehr ...
lib.mydata.typolink.additionalParams = &data=470
Or use the typolink viewhelper
<f.link.page pageUid="1" additionalParams="{data:470}">mehr ...</f:link.page>
(untested)