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> |