TYPO3 / TemplaVoila: добавить значение атрибута, а не перезаписать

Question

Это было бы очень удобно в случае вариантов макета, контролируемых конечным пользователем. Например:

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

Класс позиции (например, «Левый», «Правый», «Фоновый») может быть задан пользователем путем выбора варианта макета в раскрывающемся элементе содержимого. Проблема состоит в том, что если вы сопоставите такую ​​опцию с атрибутом класса контейнера div, базовый класс (с именем ImageContainer в приведенном выше примере) будет перезаписан. Можно ли добавить значение к существующему атрибуту, а не перезаписать его полностью?

Я видел обходной путь, при котором опция макета, контролируемая конечным пользователем, сопоставляется с атрибутом имени вместо, но я считаю это неуместным.

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, с наилучшими пожеланиями,

Michael