Is there a way to dynamically create elements in fluid like so:
<f:section name="foo">
<{tag} />
</f:section>
what should be used somewhere like that:
<f:render section="foo" arguments="{ tag: 'f:form.textfield' }" />
what should result in output, containg: <input type="text" … />, not <f:form.textfield … /> as it does.
Not like that, but you could do something with f:switch:
<f:section name="foo">
<f:switch expression={tag}>
<f:case value="f:form.textfield"><f:form.textfield /></f:case>
<f:case value="etc">...</f:case>
</f:switch>
</f:section>
Related
I'm trying to get the layout field of the content object data inside an ext:form content element, to add a css class if a specific layout has been chosen. But nether the content object data is added to the fluid template (typo3/sysext/form/Classes/Controller/FormFrontendController.php:73) nor the frame container from fluid_styled_content is rendered for this element.
My layout field is configured like this:
TCEFORM.tt_content {
layout {
types.form_formframework {
addItems {
200 = Blue Form
}
removeItems = 1,2,3
}
}
}
I have also tried to add a new layout field to the form configuration itself:
TYPO3:
CMS:
Form:
########### FORMEDITOR CONFIGURATION ###########
prototypes:
standard:
########### DEFAULT FORM ELEMENT DEFINITIONS ###########
formElementsDefinition:
Form:
formEditor:
editors:
9000:
identifier: 'layout'
group: select
templateName: 'Inspector-SingleSelectEditor'
label: 'Layout'
propertyPath: 'properties.layout'
selectOptions:
0:
value:
label: Normal
1:
value: form--blue
label: Blau
This works great in the backend but is leading to an The options "properties" were not allowed error in the frontend as properties for the form element are hardcoded in typo3/sysext/form/Classes/Domain/Model/FormDefinition.php:382.
Any ideas how to add a layout selection here? Best would be on the content element, as this would allow me to use the same form configuration with different layouts instead off making a duplicate form configuration which only distinguish in the layout.
The content object data is available in the Generic-Template from fluid_styled_content. Here you can check if the Ctype is 'form_formframework' and wrapping the form with your css class.
<f:if condition="{content}">
<f:then>
{content -> f:format.raw()}
</f:then>
<f:else>
<f:if condition="{data.CType} == 'form_formframework'">
<f:then>
<div class="{data.layout}">
<f:cObject typoscriptObjectPath="tt_content.{data.CType}.20" data="{data}" table="tt_content"/>
</div>
</f:then>
<f:else>
<f:cObject typoscriptObjectPath="tt_content.{data.CType}.20" data="{data}" table="tt_content"/>
</f:else>
</f:if>
</f:else>
</f:if>
We can add the fluid template layout like this({f:if(condition:'{data.layout}',then:'blue')}), in to default fluid_style_content/Resource/Private/Layouts/default.html (we Can override the fluid template in our site template) - without thinking for override the finisher and Flexform values of form:
<f:if condition="{data.CType} == 'form_formframework'">
<f:then>
<section id="c{data.uid}" class="form-section {f:if(condition:'{data.layout}',then:'blue')}">
<f:if condition="{data._LOCALIZED_UID}">
<a id="c{data._LOCALIZED_UID}"></a>
</f:if>
<f:render section="Before" optional="true">
<f:render partial="DropIn/Before/All" arguments="{_all}" />
</f:render>
<f:render section="Header" optional="true">
<f:render partial="Header/All" arguments="{_all}" />
</f:render>
<f:render section="Main" optional="true" />
<f:render section="Footer" optional="true">
<f:render partial="Footer/All" arguments="{_all}" />
</f:render>
<f:render section="After" optional="true">
<f:render partial="DropIn/After/All" arguments="{_all}" />
</f:render>
</section>
</f:then>
<f:else>
<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}')}">
<f:if condition="{data._LOCALIZED_UID}">
<a id="c{data._LOCALIZED_UID}"></a>
</f:if>
<f:render section="Before" optional="true">
<f:render partial="DropIn/Before/All" arguments="{_all}" />
</f:render>
<f:render section="Header" optional="true">
<f:render partial="Header/All" arguments="{_all}" />
</f:render>
<f:render section="Main" optional="true" />
<f:render section="Footer" optional="true">
<f:render partial="Footer/All" arguments="{_all}" />
</f:render>
<f:render section="After" optional="true">
<f:render partial="DropIn/After/All" arguments="{_all}" />
</f:render>
</div>
</f:else>
</f:if>
I hope it helpful to all!
Is it possible to create an array or an object with f:variable in TYPO3 9.x?
The example below does not work, because it treat the object as an string.
<f:variable name="person">{firstname:'Max', lastname:'Mustermann'}</f:variable>
Update: This example is working:
<f:variable name="person" value="{firstname:'Max', lastname:'Mustermann'}" />
Why is the tag syntax treaten differently?
What's interesting, is the fact that you can 'build' arrays in fluid and pass them as arguments to a partial.
Example:
<f:render partial="Components/ImageGallery" section="ImageGallery" arguments="{
imageGallery: {
0:{imageurl:'https://www.placehold.it/640x480',imagealt:'First Image', },
1:{imageurl:'https://www.placehold.it/640x480',imagealt:'Second Alt'}
}
}" />
It would be great, if it is possible in fluid to build this object with f:variable. Yes i know, i could assign this object, but that is not my intention.
Here you have an example partial from https://github.com/Startpiloten/startpilot
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{file}">
<f:if condition="{breakpoints}">
<f:else>
<f:variable name="breakpoints" value="{settings.breakpoints}" />
</f:else>
</f:if>
<f:link.typolink parameter="{file.link}" class="picturelink">
<picture>
<f:for each="{breakpoints}" as="breakpoint" iteration="i_breakpoints">
<f:if condition="{i_breakpoints.isLast}">
<f:else>
<source srcset="{f:uri.image(image: file, maxWidth: breakpoint.maxWidth, cropVariant: breakpoint.cropVariant)}" media="({breakpoint.media}: {breakpoint.size}px)">
</f:else>
<f:then>
<source srcset="{f:uri.image(image: file, maxWidth: breakpoint.maxWidth, cropVariant: breakpoint.cropVariant)}" media="({breakpoint.media}: {breakpoint.size}px)">
<img class="img-fluid" src="{f:uri.image(image: file, maxWidth: breakpoint.maxWidth, cropVariant: breakpoint.cropVariant)}" alt="{file.alternative}" title="{file.title}">
</f:then>
</f:if>
</f:for>
</picture>
</f:link.typolink>
</f:if>
<f:comment>
<!---Render Image with custom sizes from TS settings--->
<f:render partial="ImageRender" arguments="{file:file, breakpoints:settings.breakpoints}" />
<!---Render Image with custom sizes -- START --->
<f:variable name="breakpoints" value="{
0:{media:'max-width', size:375, maxWidth:375, cropVariant:'mobile'},
1:{media:'max-width', size:480, maxWidth:480, cropVariant:'mobile'},
2:{media:'max-width', size:767, maxWidth:767, cropVariant:'tablet'},
3:{media:'max-width', size:991, maxWidth:991, cropVariant:'tablet'},
4:{media:'max-width', size:1279, maxWidth:1279, cropVariant:'default'},
5:{media:'max-width', size:1479, maxWidth:1479, cropVariant:'default'},
6:{media:'min-width', size:1480, maxWidth:2000, cropVariant:'default'}
}"/>
<f:render partial="ImageRender" arguments="{file:image, breakpoints:breakpoints}" />
<!---Render Image with custom sizes -- END --->
<!---Render Image with default sizes -- START --->
<f:render partial="ImageRender" arguments="{file:image}" />
</f:comment>
</html>
I have the following Flux Template:
<f:section name="Configuration">
<flux:form id="galleria" enabled="TRUE" label="Galleria image & video plugin">
<flux:form.sheet name="data" label="Images / Videos">
<flux:form.section name="settings.items" label="Items" inherit="0">
<flux:form.object name="item" label="Gallery item" inherit="0">
<flux:field.select name="type" label="Type"
items="{0: 'Please select', 1: 'Image', 2: 'Video', 3: 'IFrame', 4: 'Flickr', 5: 'Picasa', 6: 'Folder', 7: 'File Collection'}"
default="0"
requestUpdate="TRUE"/>
<f:debug>{type}</f:debug>
<f:comment>Image configuration fields</f:comment>
<flux:field.file name="original" label="Main image" displayCond="FIELD:type:=:1"
required="TRUE"/>
</flux:form.object>
</flux:form.section>
</flux:form.sheet>
</flux:form>
</f:section>
The displayCond does not work. The Input Field is never been shown, even if I select Image from the select List named type.
The Output of the debug statement says "NULL"
How can I use displayCond with a field inside a flux:form.object?
You are using requestUpdate="TRUE". This is good, so you can use the following:
<f:if condition="{type}==1">
<flux:field.file .... />
</f:if>
<f:if condition="{type}==2">
[...]
</f:if>
The <f:if> not only works in the preview- or main-section. You can also use it in the configuration-section.
Note: This does not work for TYPO3 7.6.x, but only for 6.2.x.
I made this minimal example FCE and it works. No need to go through the section.object structure as long as you're in the configuration section.
type is a reserved name in many cases and it is not telling much about the properties behaviour. Therefor I changed it to mediatype:
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers">
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form id="example" label="displayCond example" enabled="1">
<flux:form.section name="slides" label="slides">
<flux:form.object name="slide" label="slide">
<flux:field.select name="mediatype" label="Media type"
items="{0: 'Please select', 1: 'Image', 2: 'Video', 3: 'IFrame', 4: 'Flickr', 5: 'Picasa', 6: 'Folder', 7: 'File Collection'}"
default="0"
requestUpdate="TRUE"/>
<flux:field.input name="title"
label="Title"
displayCond="FIELD:mediatype:=:1" />
</flux:form.object>
</flux:form.section>
</flux:form>
</f:section>
<f:section name="Preview">
</f:section>
<f:section name="Main">
</f:section>
</div>
Hope this works for you!
I've followed https://fluidtypo3.org/documentation/templating-manual/templating/creating-templates/page-template.html to create an extension holding all my templates and layouts. I's working fine exept my backend layout doesn't change to the grid layout I've defined in my template:
{namespace vhs=FluidTYPO3\Vhs\ViewHelpers}
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
<f:layout name="Default" />
<f:section name="Configuration">
<flux:form id="Default" label="Homepage">
<flux:grid>
<flux:grid.row>
<flux:grid.column colPos="0" name="Content" label="Main content" />
<flux:grid.column colPos="1" name="Sidebar" label="Sidebar" />
</flux:grid.row>
</flux:grid>
</flux:form>
</f:section>
<f:section name="Main">
<div id="main_content">
<vhs:content.render column="0" />
</div>
<div id="aside">
<vhs:content.render column="1" />
</div>
</f:section>
I've selected this template in the "page layouts" tab, but the layout is the default 4-grid-layout. Did I forget something?
my setup.txt:
plugin.tx_myext.view {
templateRootPath = EXT:tx_myext/Resources/Private/Templates/
partialRootPath = EXT:tx_myext/Resources/Private/Partials/
layoutRootPath = EXT:tx_myext/Resources/Private/Layouts/
}
had the same problem.
Solution:
Edit root page -> Appearance tab -> Backend Layout -> Fluidpages
I'm using the latest beta5 of Typo3 6.2, with the development branch of fluidcontent, flux and vhs.
The Fluid Content Element is visible, but no type:
https://www.evernote.com/shard/s254/sh/e6af43fa-be0f-498f-88f9-27655bf8afea/b63bb23242890430c906a136123f5a39
Typoscript file is included.
Here is my TS:
plugin.tx_kpcolcontent {
view {
label = Column Content
extensionKey = kpcolcontent
templateRootPath = {$plugin.tx_kpcolpages.view.templateRootPath}
partialRootPath = {$plugin.tx_kpcolpages.view.partialRootPath}
layoutRootPath = {$plugin.tx_kpcolpages.view.layoutRootPath}
}
}
The template is in EXT:kpcolcontent/Resources/Private/Templates/Content/Columns.html
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
<f:layout name="Default" />
<f:section name="Configuration">
<flux:flexform id="columns" label="Columns">
<flux:flexform.grid>
<flux:flexform.grid.row>
<flux:flexform.grid.column>
<flux:flexform.content name="left" label="Left content" />
</flux:flexform.grid.column>
<flux:flexform.grid.column>
<flux:flexform.content name="right" label="Right content" />
</flux:flexform.grid.column>
</flux:flexform.grid.row>
</flux:flexform.grid>
</flux:flexform>
</f:section>
<f:section name="Preview">
<flux:widget.grid />
</f:section>
<f:section name="Main">
<div class="row">
<div class="span6">
<flux:flexform.renderContent area="left" />
</div>
<div class="span6">
<flux:flexform.renderContent area="right" />
</div>
</div>
</f:section>
TYPO3 6.2x with flux
Download from:
Flux: https://github.com/FluidTYPO3/flux
Fluidpages: https://github.com/FluidTYPO3/fluidpages (For page template)
fluidcontent: https://github.com/FluidTYPO3/fluidcontent
vhs: https://github.com/FluidTYPO3/vhs
Typoscript:
plugin.tx_fluidpages.collections.kpcolcontent {
templateRootPath = {$filepaths.private}Templates/
partialRootPath = {$filepaths.private}Partials/
layoutRootPath = {$filepaths.private}Layouts/
}
plugin.tx_fed.fce.kpcolcontent{
templateRootPath = {$filepaths.private}Elements/Content/
partialRootPath = {$filepaths.private}Partials/
layoutRootPath = {$filepaths.private}Layouts/
}
Template file EXT:kpcolcontent/Resources/Private/Templates/Elements/Content/Columns.html
{namespace v=Tx_Vhs_ViewHelpers}
{namespace flux=Tx_Flux_ViewHelpers}
<f:layout name="Content" />
<f:section name="Configuration">
<flux:flexform wizardTab="Custom Elements" label="Two Column Container" id="twocolumn" description="" icon="">
<flux:flexform.grid>
<flux:flexform.grid.row>
<flux:flexform.grid.column>
<flux:flexform.content name="left" label="Left content" />
</flux:flexform.grid.column>
<flux:flexform.grid.column>
<flux:flexform.content name="right" label="Right content" />
</flux:flexform.grid.column>
</flux:flexform.grid.row>
</flux:flexform.grid>
</flux:flexform>
</f:section>
<f:section name="Preview">
<flux:widget.grid />
</f:section>
<f:section name="Main">
<div class="row">
<div class="span6">
<flux:flexform.renderContent area="left" />
</div>
<div class="span6">
<flux:flexform.renderContent area="right" />
</div>
</div>
</f:section>
Content layout: EXT:kpcolcontent/Resources/Private/Layouts/Content.html
<f:layout name="Content" />
<f:render section="Main" />
Enjoy TYPO3 6.2x + Flux + Fluidcontent