Library · Code examples

Fluidcontent - Two columns FCE

Code for creating a FCE for displaying content in two flexible width columns.

Description Fluidcontent - Two column FCE
Author entepe85
Creation date 2014-11-18T13:18:39.000Z
Extensions
  1. FluidTYPO3.Fluidcontent
Tags
  1. Content
Files
  1. TwoColumns.html
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:layout name="Content"/>
<f:section name="Configuration">
<flux:form id="twoColConfig" options="{group: 'Layout', icon: '{f:uri.resource(path: \'Icons/ext_icon.gif\')}'}">
<flux:grid>
<flux:grid.row>
<flux:grid.column name="leftCol"
style="width: {f:if(condition: '{layout} == 0', then: '23%')}{f:if(condition: '{layout} == 1', then: '31%')}{f:if(condition: '{layout} == 2', then: '48%')}{f:if(condition: '{layout} == 3', then: '64%')}{f:if(condition: '{layout} == 4', then: '73%')}; margin-right: .5em;">
<flux:form.content name="leftContent" />
</flux:grid.column>
<flux:grid.column name="rightCol" style="width: {f:if(condition: '{layout} == 4', then: '23%')}{f:if(condition: '{layout} == 3', then: '31%')}{f:if(condition: '{layout} == 2', then: '48%')}{f:if(condition: '{layout} == 1', then: '64%')}{f:if(condition: '{layout} == 0', then: '73%')};">
<flux:form.content name="rightContent" />
</flux:grid.column>
</flux:grid.row>
</flux:grid>
<flux:field.select name="layout" items="{0: '25/75', 1: '33/66', 2: '50/50', 3: '66/33', 4: '75/25'}" default="0" />
</flux:form>
</f:section>
<f:section name="Preview">
<flux:widget.grid />
</f:section>
<f:section name="Main">
<article class="columns" id="{record.uid}">
<div class="left {f:if(condition: '{layout} == 0', then: 'quarter')}{f:if(condition: '{layout} == 1', then: 'onethird')}{f:if(condition: '{layout} == 2', then: 'half')}{f:if(condition: '{layout} == 3', then: 'twothirds')}{f:if(condition: '{layout} == 4', then: 'threequarters')}">
<flux:content.render area="leftCol" />
</div>
<div class="right {f:if(condition: '{layout} == 4', then: 'quarter')}{f:if(condition: '{layout} == 3', then: 'onethird')}{f:if(condition: '{layout} == 2', then: 'half')}{f:if(condition: '{layout} == 1', then: 'twothirds')}{f:if(condition: '{layout} == 0', then: 'threequarters')}">
<flux:content.render area="rightCol" />
</div>
</article>
</f:section>
view raw TwoColumns.html hosted with ❤ by GitHub