Library · Code examples

One-page template with dynamic sections

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
  1. FluidTYPO3.Flux
Tags
  1. Pages
Files
  1. Sections.html
<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>
view raw Sections.html hosted with ❤ by GitHub