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.
Related
I have a fluid typo3 site with single page layout.One menu have different layout.How to get the selected layout name in my main template?
main.html
<v:page.menu levels="1" as="sections">
<f:for each="{sections}" as="section" iteration="itemIteration">
<f:debug>{sections}</f:debug>
</f:for>
</v:page.menu>
sub.html
<f:layout name="Pagewithnav" />
<f:section name="Configuration">
<flux:form id="subnav" icon="{f:uri.resource(path: 'Icons/Page/logo.png')}" label="Sub Navigation">
<!-- Insert fields, sheets, grid, form section objects etc. here, in this flux:form tag -->
</flux:form>
<flux:grid>
<!-- Edit this grid to change the "backend layout" structure -->
<flux:grid.row>
<flux:grid.column colPos="0" colspan="4" name="main" label="Navigation wrapper" />
</flux:grid.row>
<flux:grid.row>
<flux:grid.column colPos="1" colspan="4" name="main" label="Main wrapper" />
</flux:grid.row>
</flux:grid>
</f:section>
<f:section name="Main">
<div class="sub_nav">
<div class="container">
<v:content.render column="0"/>
</div>
</div>
<div class="container">
<v:content.render column="1"/>
</div>
</f:section>
It depends on what exactly you mean by "Layout name":
If you mean fields of the pages table for each individual page then those will be available in each record when you iterate it in v:page.menu (for example, tx_fed_page_controller_action).
If you mean fields of pages but also when this variable is inherited (for example, backend_layout is and tx_fed_page_controller_action is as well, but each through different methods) it becomes more complex: you would need to walk through the root line and use the first non-empty value. For that, v:page.rootLine plus v:iterator.filter plus v:iterator.first can be of great help (put output from root line into filter to remove non-empty values then use the first VH to select the first value from that filtered result).
If you define this "layout" in a Flux form field on your page template it becomes a FlexForm variable which you can read with flux:form.data (with inheritance if not disabled and if templates match up through root line).
Depending on exactly which you mean there are quite a few possible solutions. If you are also looking for a recommendation about which one it makes sense to use: most likely you mean the layout you select in page properties (regardless of field) and for this, v:page.rootLine plus v:iterator.filter plus v:iterator.first is a nice and generic method to "slide select" any non-empty value from the root line of the current page.
You can get it with a variable in fluid
lib.templateName = TEXT
lib.templateName.stdWrap.cObject = CASE
lib.templateName.stdWrap {
cObject = TEXT
cObject {
data = levelfield:-2,backend_layout_next_level,slide
override.field = backend_layout
split {
token = pagets__
1.current = 1
1.wrap = |
}
}
ifEmpty = Default
}
page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
#...
variables.templateName < lib.templateName
}
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 try to slide content elements at my TYPO3 Backend (v6.2) with Fluid Powered TYPO3. So I don't have CSS_Styled_content included. http://wiki.typo3.org/Content_Slide Example:
10 < styles.content.getRight
10.slide = -1
Especially I'd like to slide my content from the colPos=0 'Slider' to the Pages below. Is this possible with FLUID / FluidTYPO3 (FLUX)?
<f:section name="Configuration">
<flux:form id="fluidpage" options="{icon: 'typo3conf/ext/my_extension/Resources/Public/Icons/Page/Standard.gif'}">
</flux:form>
<flux:grid>
<flux:grid.row>
<flux:grid.column colPos="0" name="Slider" colspan="2" />
</flux:grid.row>
<flux:grid.row>
<flux:grid.column colPos="1" name="Left" />
<flux:grid.column colPos="2" name="Right" />
</flux:grid.row>
</flux:grid>
</f:section>
I try it like this ... but that's wrong.
styles.content.getSlider.slide = -1
You can do it in just the same way it is done in css_styled_content internally, using a CONTENT object:
lib.content_not_cascading_without_default = CONTENT
lib.content_not_cascading_without_default {
table = tt_content
# This enables content sliding. For more possible values
# check the docs (linked above)
slide = -1
select {
# Use the correct column position here
andWhere = colPos = 1
orderBy = sorting
languageField = sys_language_uid
}
}
Alternatively, if you use fluid to render the template, you can also render the content using the v:content.render-ViewHelper from EXT:vhs:
<v:content.render column="1" slide="-1"/>
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