[TYPO3-templavoila] Gift from me to you - magic 2 column divider
Stig Nørgaard Færch
snf at dkm.dk
Fri Jul 26 11:05:31 CEST 2013
Hello
I know that it's probably not the best way to share this code, but here
it goes anyway.
I've made a column divider for TemplaVoila which automatically
calculates max image sizes. It even works if you nest the divider.
You can choose between half, third or fourth divisions.
It is also possible to configure a vertical column divider line.
It is very easy to install in just a few minutes.
1) Create a TemplaVoila Data Structure with the below inserted code
* In the field "Category" select "Flexible Content Element".
2) Create a TemplaVoila Template Object
* attach a html template (File reference field) with this html code:
<div class="fce-pagediv-2col" style="position: relative;">
<div class="divider" style=""></div>
<div class="col1"></div>
<div class="col2"></div>
<div style="clear:both;"></div>
</div>
* In the field "Data Structure" select the Data Structure you create before.
3) The only thing you have to do now, is to register maxImageWidth for
the content areas you have on your site (if not already done).
10 = COA
10 {
10 = LOAD_REGISTER
10.maxImageWidth = 1024
20 = //YOUR CONTENT HERE//
30 = RESTORE_REGISTER
}
There are other interesting parameters for you, which you can set thru
the registers:
#column registers: gutterWidth, paddingWidth, maxImageWidth
#divider registers: colDividerEnabled, dividerBgColor, dividerBgImage,
dividerWidth
Inside a column maxImageWidthInText will just be half of maxImageWidth
Let me hear if it is useful to you :-)
Best regards,
Stig
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
<meta type="array">
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<tx_templavoila type="array">
<title>ROOT</title>
<description><![CDATA[Flexible 2 column divider
Use this html in a template and map to divider, col1, col2:
<div class="fce-pagediv-2col" style="position: relative;">
<div class="divider" style=""></div>
<div class="col1"></div>
<div class="col2"></div>
<div style="clear:both;"></div>
</div>
]]></description>
</tx_templavoila>
<type>array</type>
<el type="array">
<field_framedistribution type="array">
<type>no_map</type>
<tx_templavoila type="array">
<title>Column distribution</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>select</eType>
<TypoScript></TypoScript>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
</tx_templavoila>
<TCEforms type="array">
<label>Column distribution</label>
<config type="array">
<type>select</type>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">1/2 - 1/2</numIndex>
<numIndex index="1">1/2</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">1/3 - 2/3</numIndex>
<numIndex index="1">1/3</numIndex>
</numIndex>
<numIndex index="2" type="array">
<numIndex index="0">2/3 - 1/3</numIndex>
<numIndex index="1">2/3</numIndex>
</numIndex>
<numIndex index="3" type="array">
<numIndex index="0">1/4 - 3/4</numIndex>
<numIndex index="1">1/4</numIndex>
</numIndex>
<numIndex index="4" type="array">
<numIndex index="0">3/4 - 1/4</numIndex>
<numIndex index="1">3/4</numIndex>
</numIndex>
</items>
<default>0</default>
</config>
</TCEforms>
</field_framedistribution>
<field_divider type="array">
<type>attr</type>
<tx_templavoila type="array">
<title>Vertical line</title>
<tags>*:attr:style</tags>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>select</eType>
<TypoScript><![CDATA[
#column registers: gutterWidth, paddingWidth,
maxImageWidth
#divider registers: colDividerEnabled,
dividerBgColor, dividerBgImage, dividerWidth
5 = LOAD_REGISTER
5 {
divisions.field = field_framedistribution
divisions.listNum = 1
divisions.listNum.splitChar = /
col1divisions.field = field_framedistribution
col1divisions.listNum = 0
col1divisions.listNum.splitChar = /
col2divisions.override.dataWrap =
{register:divisions}-{register:col1divisions}
col2divisions.prioriCalc = 1
paddingWidth.data = register:paddingWidth
paddingWidth.ifEmpty = 0
gutterWidth.data = register:gutterWidth
gutterWidth.ifEmpty = 30
singleColWidth.stdWrap.dataWrap =
({register:maxImageWidth} -
({register:gutterWidth}*({register:divisions}-1))) / {register:divisions}
singleColWidth.prioriCalc = 1
}
6 = LOAD_REGISTER
6 {
maxImageWidth.stdWrap.dataWrap =
({register:col1divisions}*{register:singleColWidth}) +
({register:gutterWidth}*({register:col1divisions}-1)) -
({register:paddingWidth}*2)
maxImageWidth.prioriCalc = 1
maxImageWidth.round.decimals = 0
maxImageWidth.round.roundType = floor
maxImageWidthInText < .maxImageWidth
maxImageWidthInText.stdWrap.dataWrap.dataWrap = ((|)/2 -
({register:gutterWidth}/2))
dividerBgColorInsert.data = register:dividerBgColor
dividerBgColorInsert.ifEmpty = #999
dividerBgColorInsert.wrap =
background-color: |;
dividerBgColorInsert.if.isFalse.data =
register:dividerBgImage
dividerBgImageInsert.data =
register:dividerBgImage
dividerBgImageInsert.wrap = background:
url(|) repeat-y;
dividerBgImageInsert.if.isTrue.data =
register:dividerBgImage
dividerWidth.data = register:dividerWidth
dividerWidth.ifEmpty = 1
dividerPosition.stdWrap.dataWrap =
{register:maxImageWidth}+{register:paddingWidth}+({register:gutterWidth}/2)-({register:dividerWidth}/2)
dividerPosition.prioriCalc = 1
dividerPosition.round.decimals = 0
dividerPosition.round.roundType = floor
}
10 = TEXT
10.dataWrap = width: {register:dividerWidth}px;
height: 100%; {register:dividerBgColorInsert}
{register:dividerBgImageInsert} position: absolute; left:
{register:dividerPosition}px;
10.dataWrap.override = display:none;
10.dataWrap.override.if.isFalse.cObject = CASE
10.dataWrap.override.if.isFalse.cObject {
key.field = field_divider
default = TEXT
default.data = register:colDividerEnabled
0 = TEXT
0.value = 0
1 = TEXT
1.value = 1
}
]]></TypoScript>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
</tx_templavoila>
<TCEforms type="array">
<label>Opdelingsstreg</label>
<config type="array">
<type>select</type>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">Standard</numIndex>
<numIndex index="1">typoscript</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">Ja</numIndex>
<numIndex index="1">1</numIndex>
</numIndex>
<numIndex index="2" type="array">
<numIndex index="0">Nej</numIndex>
<numIndex index="1">0</numIndex>
</numIndex>
</items>
<default></default>
</config>
</TCEforms>
</field_divider>
<field_framecontent type="array">
<tx_templavoila type="array">
<title>Column 1 content</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>ce</eType>
<TypoScript><![CDATA[
10= RECORDS
10.source.current=1
10.tables = tt_content
# 10.stdWrap.dataWrap = <div
style="width:{register:maxImageWidth}px;
margin-right:{register:gutterWidth}px; margin-left:0; display:inline;
float:left; position:relative; padding:{register:paddingWidth}px; ">|</div>
10.stdWrap.dataWrap = <div class="col1"
style="width:{register:maxImageWidth}px; margin-left:0; display:inline;
float:left; position:relative; padding:{register:paddingWidth}px; ">|</div>
10.stdWrap.wrap = <!-- TYPO3SEARCH_begin --> |
<!-- TYPO3SEARCH_end -->
10.stdWrap.ifEmpty =
14 = RESTORE_REGISTER
]]></TypoScript>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
<oldStyleColumnNumber>0</oldStyleColumnNumber>
<enableDragDrop>1</enableDragDrop>
</tx_templavoila>
<TCEforms type="array">
<label>Column 1 content</label>
<config type="array">
<type>group</type>
<internal_type>db</internal_type>
<allowed>tt_content</allowed>
<size>5</size>
<maxitems>200</maxitems>
<minitems>0</minitems>
<multiple>1</multiple>
<show_thumbs>1</show_thumbs>
</config>
</TCEforms>
</field_framecontent>
<field_framecontent2 type="array">
<tx_templavoila type="array">
<title>Column 2 content</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>ce</eType>
<TypoScript><![CDATA[
6 = LOAD_REGISTER
6 {
maxImageWidth.stdWrap.dataWrap =
({register:col2divisions}*{register:singleColWidth}) +
({register:gutterWidth}*({register:col2divisions}-1)) -
({register:paddingWidth}*2)
maxImageWidth.prioriCalc = 1
maxImageWidth.round.decimals = 0
maxImageWidth.round.roundType = floor
maxImageWidthInText < .maxImageWidth
maxImageWidthInText.stdWrap.dataWrap.dataWrap = ((|)/2 -
({register:gutterWidth}/2))
}
10= RECORDS
10.source.current=1
10.tables = tt_content
# 10.stdWrap.dataWrap = <div
style="width:{register:maxImageWidth}px; display:inline; float:left;
position:relative; padding:{register:paddingWidth}px; ">|</div>
10.stdWrap.dataWrap = <div class="col2"
style="width:{register:maxImageWidth}px; display:inline; float:right;
position:relative; padding:{register:paddingWidth}px; ">|</div>
10.stdWrap.wrap = <!-- TYPO3SEARCH_begin --> |
<!-- TYPO3SEARCH_end -->
10.stdWrap.ifEmpty =
14 = RESTORE_REGISTER
15 = RESTORE_REGISTER
]]></TypoScript>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
<oldStyleColumnNumber>0</oldStyleColumnNumber>
<enableDragDrop>1</enableDragDrop>
</tx_templavoila>
<TCEforms type="array">
<label>Column 2 content</label>
<config type="array">
<type>group</type>
<internal_type>db</internal_type>
<allowed>tt_content</allowed>
<size>5</size>
<maxitems>200</maxitems>
<minitems>0</minitems>
<multiple>1</multiple>
<show_thumbs>1</show_thumbs>
</config>
</TCEforms>
</field_framecontent2>
</el>
</ROOT>
</T3DataStructure>
More information about the TYPO3-project-templavoila
mailing list