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
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 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>
I followed the instruction on FluidTYPO3, and get my FCE template done like below
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:layout name="Grid"/>
<f:section name="Configuration">
<flux:form id="twoColumns" options="{group: 'Grid Elements'}">
<flux:field.input name="settings.left.class" default="col-sm-6" required="true"/>
<flux:field.input name="settings.right.class" default="col-sm-6" required="true"/>
</flux:form>
<flux:grid>
<flux:grid.row>
<flux:grid.column name="left"/>
<flux:grid.column name="right"/>
</flux:grid.row>
</flux:grid>
</f:section>
<f:section name="Main">
<div class="{settings.left.class}">
<flux:content.render area="left"/>
</div>
<div class="{settings.right.class}">
<flux:content.render area="right"/>
</div>
</f:section>
</html>
And it works in my BE even without the Preview, TYPO3 v8.7.4 and flux v8.2.1. However, when I visit the FE, it shows ERROR: Content Element with uid "31" and type "flux_2columns" has no rendering definition!. Does it mean that I still need some TS to get the FCE working for FE? If so, what should it be like?
Finally, got it working, but need 2 more steps.
Register flux as a content plugin.
\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
'FluidTYPO3.Flux',
'Content',
[
'Content' => 'render, error',
]
);
Add the TS for the new CTYPE
tt_content.flux_2columns = USER
tt_content.flux_2columns {
userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
vendorName = FluidTYPO3
extensionName = Flux
pluginName = Content
}
OK, here is the correct solution I think. According to https://github.com/FluidTYPO3/flux/issues/1442, all you need is to change includeStaticTypoScriptSourcesAtEnd to includeStaticTypoScriptSources in EXT:flux/ext_localconf.php, no more steps. Keep everything the same as how you did with fluidcontent.
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'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