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

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

typo3

TYPO3/TemplaVoila：附加到属性值，而不是覆盖,typo3,Typo3,对于最终用户控制的布局选项，这将非常方便。例如： <div class="ImageContainer <<PositionClass>>"> <img src="/someimage.png" /> </div> position类（比如Left、Right、Background）将由用户通过从content元素的下拉列表中选择布局选项来设置。问题是，如果将这样的选项映射到container div的class属性，

对于最终用户控制的布局选项，这将非常方便。例如：

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

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

我曾经看到过将最终用户控制的布局选项映射到name属性的工作，但我发现这并不美观

用打字脚本创建合成的类名。通过这种方式，您可以从固定和可变部分编译它们，甚至可以考虑多个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>

用打字脚本创建合成的类名。通过这种方式，您可以从固定和可变部分编译它们，甚至可以考虑多个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>

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

HTML:

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

[...]
<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>
[...]

当然，您必须调整CSS以满足您的需要

或者，您可以将“ImageContainer”类添加到select值中，如下所示：

DS XML:

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

[...]
<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>
[...]

[…]
我知道这个有点旧，但目前我正在尝试做类似的事情，我想你可以添加一个额外的html元素来包装图像元素，如下所示：
HTML:
<div class="ImageContainer">
    <div class="<<positionClass>>">
        <img src="/someimage.png" />
    </div>
</div>

[...]
<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>
[...]



当然，您必须调整CSS以满足您的需要
或者，您可以将“ImageContainer”类添加到select值中，如下所示：
DS XML:
<div class="ImageContainer">
    <div class="<<positionClass>>">
        <img src="/someimage.png" />
    </div>
</div>

[...]
<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>
[...]

[…]
谢谢你的回答。是的，我可能会这样做，即使它是次优的。必须在数据结构中硬编码CSS类名会导致数据和表示之间的分离不良。在需要布局参数时（可能在某些java脚本表达式中）附加甚至任意插入布局参数的功能将更加优雅。谢谢您的回答。是的，我可能会这样做，即使它是次优的。必须在数据结构中硬编码CSS类名会导致数据和表示之间的分离不良。在需要布局参数时（可能在某些java脚本表达式中）附加甚至任意插入布局参数的功能将更加优雅。