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 |
|
| Tags |
|
| Files |
| {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> |