TYPO3/TemplaVoila：追加属性值而不是覆盖

这对于最终用户控制的布局选项来说非常方便。 E.g：TYPO3/TemplaVoila：追加属性值而不是覆盖

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

位置类（如可能为左，右，背景）将选择从下拉内容元素下的布局选项设置的用户。问题是，如果将这样的选项映射到容器div的class属性，则基类（上例中名为ImageContainer）将被覆盖。是否可以将值附加到现有属性，而不是完全覆盖它？

我已经看到解决方法，最终用户控制的布局选项被映射到名称属性，但我觉得这不起眼。

来源

2011-12-12 jens_profile

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

Typo脚本

lib.calcClass = TEXT 
lib.calcClass{ 
    dataWrap = ImageContainer {field:field_imagepos} 
}

来源

2011-12-12 16:13:31 Jpsy

谢谢你回答。是的，我可能最终会这样做，即使它不是最优的。必须在数据结构中对CSS类名称进行硬编码构成了数据和表示之间的差距。追加甚至任意插入你需要的布局参数（可能在一些java脚本表达式中）的能力会更加优雅。 –

我知道这一个是有点老了，但此刻我正在努力做类似的事情，我想你可以添加一个额外的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，最好的问候，

迈克尔

来源

2012-04-10 20:51:20

TYPO3/TemplaVoila：追加属性值而不是覆盖

回答

相关问题