Code example
Code for creating a FCE for displaying content in two flexible width columns.
- Description
- Fluidcontent - Two column FCE
- Author
- entepe85
- Creation date
- Extensions
- FluidTYPO3.Fluidcontent
- Tags
- Content
- Files
- TwoColumns.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {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> |