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}
}