When adding Mask content element it doesn't reflect some setting of the Appearance tab at front-end, like Layout, Frame, Space Before or After, also it doesn't include the uid of content element. How can I make usage of these fields?
By default Mask elements do not use standard wrapping for rendering the content element, fortunately you can easily access them within data variable which contains array of tt_content.
To check what fields of tt_content are available just put the line in FE template of your Mask element:
<f:debug>{data}</f:debug>
So you can make the wrapper div by yourself using simple Fluid syntax
<div class="
{f:if(condition: data.layout, then: 'frame-layout-{data.layout}')}
{f:if(condition: data.frame_class, then: 'frame-{data.frame_class}')}
{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}')} ">
<!-- your markup here -->
</div>
You can use the layouts like fluid_styled_content does - it takes care of headers, frames, spaceBefore, etc. This is also the easiest way.
First step: define the layout directories in TypoScript:
lib.maskContentElement.layoutRootPaths.5 = EXT:fluid_styled_content/Resources/Private/Layouts/
lib.maskContentElement.partialRootPaths.5 = EXT:fluid_styled_content/Resources/Private/Partials/
Second step: use the layout in your template:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">
<!-- your markup here -->
</f:section>
</html>
This also works for DCE (with corresponding TypoScript path)
Of course you can copy the layouts and partials to your theme path and make changes there, but I recommend sticking to the core functionality.
Related
I want to override an extension's fluid template in Typo3 with my own template. My own template contains an if-condition. If not met, I want to include/render the extension's template (i.e. the overridden template) instead.
The actual case: I'm using the Typo3 News Extension which allows custom "template layouts". I want to add my custom template layout but also keep the News Extension's default template:
<!-- my_site_package/Resources/Private/Extensions/News/Templates/News/List.html -->
<f:if condition="{settings.templateLayout} == 2">
<f:then>
My specific list view for news entries
<ul>
<li>
...
</li>
</ul>
</f:then>
<f:else>
<!--
Include the original template here, e.g.
EXT:news/Resources/Private/Templates/Styles/Twb5/Templates/News/List.html
-->
</f:else>
</f:if>
How can I include / render the overridden template itself?
Fluid Is not able to Render the "Original Template" as there might be any number of TemplateRootpaths providing the Template. what you could do:
if the original Template is Part of an extension you controll, best to move the "Repeating" parts to an Partial. and let the Original Template use this partial as well.
if the original template is part of an extension you do not controll. (eg by a third party) you should copy the orignal template as partial in your Extension and then render this Partial. maybe ad a comment that this is an 1:1 copy of the original and shoud not be modified.
You can create another template layouts using page TSConfig, Define this TS in your root Page TSconfig (inside Resources) Tab.
plugin.tx_news {
templateLayouts {
1 = Homepage
2 = Specific list
}
}
then in your template you will get selected template value here in case 1 or 2.
You will find more help here.
https://docs.typo3.org/p/georgringer/news/main/en-us/Reference/TsConfig/General.html#confval-templateLayouts
I made an extension which display some data and I need to send them to my Layout.
In my file list.html I made a left column with some data, but finally I need this column in my layout.
there is some code :
Layouts/MyLayout.html
<f:render partial="Structure/Header" arguments="{_all}"/>
<f:render partial="Menus/Main" arguments="{_all}"/>
<!--the left column should be here -->
<f:render section="default" />
List.html
<f:layout name="Default"/>
<f:section name="main">
<aside>
<h2>Title</h2>
<ul>
<f:for each="{Mydata}" as="data">
<li>{data.title}</li>
</f:for>
</ul>
</aside>
</f:section>
That's why I would need to retrieve my extension data in my layout. It is possible to get I ?
If it's not possible, it is possible to get in list.html the name of the actual backend layout with some typoscript ?
There are multiple options to handle whether there are data for an additional column in layout.
first:
Even if in FLUID the files are stored in three folder (Layouts/, Partials/, Templates/) you are not forced to use it in that way. Meaning: you also can decide the layout in the template files.
In the default layout you just render a mainsection (from the template file). And in the different templates you decide whether a side column exist.
second:
extension data can be provided in multiple ways:
You can do the rendering completely in typoscript - or you use a content element with a plugin. The later would be more transparent for editors.
In your case you can provide a different BackEnd layout where editors can put a plugin in the additional column for that special 'layout'.
The rendering only occurs if that 'layout' is selected and a plugin is stored in that column.
I am using TYPO3 8 and fluid_styled_content.
In am developing an extension with the following requirements: If specific conditions are met (depending on URL query parameter) nothing should be displayed for the plugin in the Frontend. In this case, the fluid output of the plugin will be empty (depending on a variable that is set in the Controller). But TYPO3 still - by default - renders a wrapping div and the header.
So, essentially, what I get is something like:
<div id="c217" class="...">
<header>
<h2 class="...">Header</h2>
</header>
<p> <!-- plugin output here is empty -- > </p>
</div>
How do I (dynamically) prevent that?
This has been asked before, but the solutions I found will not work with fluid_styled_content:
You should use the FSC way.
All content is rendered with templates which use layouts and partials. Aside from the simple CEs you have a template for plugins which requests a layout which renders the header.
Enhance the (global) layout with a special condition for your plugin to avoid the header (be sure to render the header by yourself) or avoid the header if your plugin will not render any output.
EDIT:
add the override template-pathes to FSC:
lib.contentElement {
templateRootPaths {
200 = EXT:your_extension_key/Resources/Private/FSC/Templates/
}
partialRootPaths {
200 = EXT:your_extension_key/Resources/Private/FSC/Partials/
}
layoutRootPaths {
200 = EXT:your_extension_key/Resources/Private/FSC/Layouts/
}
}
now you can copy the default-layout from the FSC folder to your layout folder and add in that layout a condition which skips the header and global wrapping if your plugin is rendered.
<f:if condition="{data.CType} == 'list' && {data.list_type} == 'myPlugin'">
<f:then>
<f:comment> only plugin output </fcomment>
</f:then>
<f:else>
<f:comment> original output with headers and wrap </fcomment>
</f:else>
</f:if>
In the typo3 template I'm using the following line to get the last 5 added items from the backend and this works.
<f:cObject typoscriptObjectPath="lib.lastaddeditmes" />
Only the number of item I want to have it flexible and set in the fluid template. So for example like below where the qty is set to three, is this possible?
<f:cObject typoscriptObjectPath="lib.lastaddeditmes(3)" />
You can't do that in the view, instead you can make a copy of lib.lastaddeditmes in TypoScript and then use it in other place like:
lib.lastaddeditmesOnlyThree < lib.lastaddeditmes
lib.lastaddeditmesOnlyThree.someSetting.items = 3
and in view:
<f:cObject typoscriptObjectPath="lib.lastaddeditmesOnlyThree" />
Remember that TypoScript is just a configuration syntax (not programming language) so it shouldn't give you any huge performance drop.
What is the best way to select a single content element?
I have a static html template like this:
<html>
...
<div class="left clearfix">
<h1><img src="fileadmin/templates/images/ueberschrift_startseite.png" alt="Willkommen" /><span>Willkommen</span></h1>
<p>EINLEITUNGSTEXT 1 EINLEITUNGSTEXT 1</p>
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
</ul>
<h3>HEADLINETEXT 3</h3>
<p>TEXT TEXT TEXT TEXT </p>
</div>
...
</html>
In my Backend I have added
A Content Element for the <h1>
A Content Element that should be displayed between the <p> Tags where now Einleitungstext1 is displayed
A Content Element that contains the LI for the UL Section
and so on.
All Elements are in the same column.
I what to take my static HTML Template and fill several SPECIFIC parts with elements that can be edited in the backend.
I hope I could explain what my problem is.
How do you configure your templates? Is there a much better way to replace only specific parts of a static template?
Regards,
Max
I assume that you know how to use marks and subparts in TypoScript, in such case what you have to do is set marks in your template, put each CE in separate column (maybe you'll need to add custom columns if all left, default, right and border (0-3) columns are used for other things) and finally just map these columns to the marks.
tip: TemplaVoila allows for more combinations as you can map not only container for CE's but also other things (header fields, image fields, TS snippets etc.)