TYPO3/TemplaVoila: append to attribute value rather that overwrite - typo3

Question

It would be very convenient in the case of end-user controlled layout options. E.g:
<div class="ImageContainer <<PositionClass>>">
<img src="/someimage.png" />
</div>
The position class (like maybe Left, Right, Background) would be set the user by selecting a layout option from a drop down in content element. The problem is, that if you map such an option to the class attribute of the container div, the base class(named ImageContainer in the above example) will be overwritten.
Is it possible to append a value to an existing attribute rather that overwriting it completely?
I've seen work-around where the end-user controlled layout option is mapped to the name attribute in stead, but i find this inelegant.

Answer 1

Create your composed class names in TypoScript. This way you are able to compile them from fixed and variable parts and you can even take multiple FCE fields into account.
Here is an example:
DS XML
<field_imagepos type="array">
<type>no_map</type>
<tx_templavoila type="array">
<title>Image Positioning</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>select</eType>
</tx_templavoila>
<TCEforms type="array">
<config type="array">
<type>select</type>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">Left</numIndex>
<numIndex index="1">Left</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">Right</numIndex>
<numIndex index="1">Right</numIndex>
</numIndex>
<numIndex index="2" type="array">
<numIndex index="0">Background</numIndex>
<numIndex index="1">Background</numIndex>
</numIndex>
</items>
<default>Left</default>
</config>
<label>Image Positioning</label>
</TCEforms>
</field_imagepos>
<field_calc_class type="array">
<type>attr</type>
<tx_templavoila type="array">
<title>(Calculating the class attribute)</title>
<description>Pick ATTR class='ImageContainer ...'</description>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>TypoScriptObject</eType>
<tags>div:attr:class</tags>
<TypoScriptObjPath>lib.calcClass</TypoScriptObjPath>
</tx_templavoila>
</field_calc_class>
TypoScript
lib.calcClass = TEXT
lib.calcClass{
dataWrap = ImageContainer {field:field_imagepos}
}

Answer 2

I know this one's a bit old, but at the moment I'm trying to do something similar and I guess you could add an extra html element to wrap the image element, like this:
HTML:
<div class="ImageContainer">
<div class="<<positionClass>>">
<img src="/someimage.png" />
</div>
</div>
Of course you would have to adjust your CSS to fit your needs.
Or else, you could add the "ImageContainer" class to the select values, like this:
DS XML:
[...]
<items type="array">
<numIndex index="0" type="array"
<numIndex index="0">Left</numIndex>
<numIndex index="1">ImageContainer Left</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">Right</numIndex>
<numIndex index="1">ImageContainer Right</numIndex>
</numIndex>
<numIndex index="2" type="array">
<numIndex index="0">Background</numIndex>
<numIndex index="1">ImageContainer Background</numIndex>
</numIndex>
</items>
[...]
HTH, best regards,
Michael