TYPO3/TemplaVoila:追加到属性值，而不是覆盖

Question

在终端用户控制布局选项的情况下，这将非常方便。例如：

<div class="ImageContainer  <<PositionClass>>">
    <img src="/someimage.png" />
</div> 

position类(比如Left、Right、Background)将由用户通过从content元素的下拉列表中选择一个布局选项来设置。问题是，如果您将这样一个选项映射到容器div的类属性，基类(在上面的示例中名为ImageContainer )将被覆盖。是否可以将值附加到现有属性，而不是完全覆盖它？

我见过将最终用户控制的布局选项映射到name属性的变通方法，但我发现这种做法并不优雅。

Answer 1

在TypoScript中创建您的组合类名。这样，您就能够从固定和可变部分编译它们，甚至可以考虑多个FCE字段。

下面是一个示例：

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

我知道这有点老了，但现在我正在尝试做一些类似的事情，我猜你可以添加一个额外的html元素来包装图像元素，如下所示：

HTML：

<div class="ImageContainer">
    <div class="<<positionClass>>">
        <img src="/someimage.png" />
    </div>
</div>

当然，你必须调整你的CSS来满足你的需要。

或者，您可以将"ImageContainer“类添加到选择值，如下所示：

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，致以最好的问候

迈克尔