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
  1. FluidTYPO3.Flux
  1. Pages
  1. Sections.html
<div xmlns="" lang="en"
<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 />
<!-- Define the backend layout -->
<!-- We have one fixed defined column on top -->
<flux:grid.column name="Slider" colPos="222" />
<!-- 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.column name="content.{iteration.index}" colPos="{iteration.index}" label="{f:if(condition: section.section.title, then: section.section.title, else: 'Content, section {iteration.cycle}')}" />
<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}">
<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 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}" />
view raw Sections.html hosted with ❤ by GitHub