HTML Data Attribut bei Bildern

knutwiler · 3. Juni 2015 08:54

Hallo!

Ich habe folgendes Rendering für Bilder:

tt_content.image.20 {
  addClassesCol.override >
  addClassesCol.override.cObject = CASE
  addClassesCol.override.cObject {
    key.field = imagecols
    default = TEXT
    default.value = large-12 
    1 = TEXT
    1.value = small-12 medium-12 large-4 columns 
    2 = TEXT
    2.value = small-12 medium-6 large-6 columns portfolio
    3 = TEXT
    3.value = small-12 medium-4 large-4 columns portfolio
    4 = TEXT
    4.value = small-6 medium-6 large-3 columns 
    6 = TEXT
    6.value = large-2 columns                             
    12 = TEXT
    12.value = large-1 column
  }

Dies ergibt z.B. die folgende HTML Ausgabe:
<div class="csc-textpic-imagecolumn small-12 medium-4 large-4 columns portfolio">

Wie kann ich nach der klasse ein html5 Data Attribut wie z.B. data-equalizer-watch hinzufügen, so dass es später z.B. zur folgenden Ausgabe kommt:

Ich bin froh um jeden Hinweis. Vielen Dank.

Chrissli · 3. Juni 2015 10:17

Aus deinem "CASE" ein COA machen, dass
als Inhalt einmal das jetzige "CASE" enthält und anschliessend z.b. ein "TEXT"-Object?

knutwiler · 3. Juni 2015 12:35 · Beste Antwort

Danke Chrissli

Bin inzwischen auf eine Alternative Lösung gestossen und habe das Image Rendering von CSS Styled Content entsprechend angepasst.

tt_content.image.20 {
  addClassesCol.override >
  addClassesCol.override.cObject = CASE
  addClassesCol.override.cObject {
    key.field = imagecols
    default = TEXT
    default.value = large-12 
    1 = TEXT
    1.value = small-12 medium-12 large-4 columns 
    2 = TEXT
    2.value = small-12 medium-6 large-6 columns portfolio
    3 = TEXT
    3.value = small-12 medium-4 large-4 columns portfolio
    4 = TEXT
    4.value = small-6 medium-6 large-3 columns 
    6 = TEXT
    6.value = large-2 columns                             
    12 = TEXT
    12.value = large-1 column
  }
  rendering {
    splitCaption.columnStdWrap.wrap = <div class="csc-textpic-imagecolumn ###CLASSES###" data-equalizer-watch> | </div>
}