Realize dynamic colPos based sections with custom configurations like background-color using flux.
This is especially useful if you want to build a "one-pager".
Description | FluidTYPO3 one-pager with sections |
Author | hhoechtl |
Creation date | 2015-11-07T14:44:01.000Z |
Extensions |
|
Tags |
|
Files |
<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="Page" /> | |
<f:section name="Configuration"> | |
<!-- Make this page type configurable --> | |
<flux:form id="sections"> | |
<flux:form.sheet name="sections"> | |
<flux:form.section name="sections"> | |
<flux:form.object name="section" label="{sectionTitle}"> | |
<flux:field.input name="sectionTitle" label="Section title" /> | |
<flux:field.checkbox name="fullWidth" label="Full-width" /> | |
<flux:field.checkbox name="fullWidthBackground" label="Full-width background" /> | |
<flux:field.input name="backgroundColor" label="Background color" > | |
<flux:wizard.colorPicker /> | |
</flux:field.input> | |
</flux:form.object> | |
</flux:form.section> | |
</flux:form.sheet> | |
</flux:form> | |
<!-- Define the backend layout --> | |
<flux:grid> | |
<!-- We have one fixed defined column on top --> | |
<flux:grid.row> | |
<flux:grid.column name="Slider" colPos="222" /> | |
</flux:grid.row> | |
<!-- If we have sections in use --> | |
<f:if condition="{sections -> f:count()} > 0"> | |
<f:for each="{sections}" as="section" iteration="iteration"> | |
<!-- Every section that has been configured in the sheet above will be output as a column in the backend layout --> | |
<flux:grid.row> | |
<flux:grid.column name="content.{iteration.index}" colPos="{iteration.index}" label="{f:if(condition: section.section.title, then: section.section.title, else: 'Content, section {iteration.cycle}')}" /> | |
</flux:grid.row> | |
</f:for> | |
</f:if> | |
</flux:grid> | |
</f:section> | |
<f:section name="Main"> | |
<h1>The always present slider column</h1> | |
<v:content.render column="222" /> | |
<f:for each="{sections}" as="sectionObject" iteration="iteration"> | |
<!-- We don't want to write sectionObject.section everytime, so we assign it to a temporary variable--> | |
<v:variable.set name="section" value="{sectionObject.section}" /> | |
<f:if condition="{section.fullWidth}"> | |
<f:then> | |
<div class="container-fluid" {f:if(condition: section.fullWidthBackground, then:'style="background-color: {section.backgroundColor};"')}> | |
<h1 class="text-center">{section.sectionTitle} (colPos: {iteration.index})</h1> | |
<v:content.render column="{iteration.index}" /> | |
</div> | |
</f:then> | |
<f:else> | |
<div class="container" {f:if(condition: section.backgroundColor, then:'style="background-color: {section.backgroundColor};"')}> | |
<h1 class="text-center">{section.sectionTitle} (colPos: {iteration.index})</h1> | |
<v:content.render column="{iteration.index}" /> | |
</div> | |
</f:else> | |
</f:if> | |
</f:for> | |
</f:section> | |
</div> |