Question

在最终用户控制的布局选项的情况下，这将非常方便。 E.g：

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

通过从内容元素的下拉列表中选择布局选项，可以为用户设置位置类（如左，右，背景）。问题是，如果将这样的选项映射到容器div的class属性，则基类（在上例中名为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，最好的问候，

迈克尔

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

2 个答案: