TYPO3 – gridelements – tt_content Felder auslesen inkl. Image

Ich habe für einen besonderen Aufbau und Ausgabe einen eigenen HTML-Aufbau mir programmiert und habe alle tt_content Felder einzeln für gridelements ausgegeben.

Zuerst der normale gridelements Aufbau in einer html Datei ausgelagert:

#*************************
# Gridelements
#*************************
tt_content.gridelements_pi1.10 =< lib.stdheader
tt_content.gridelements_pi1.10.wrap = <div class="wrap wow fadeIn"><div class="header-over">|</div></div>
tt_content.gridelements_pi1.20.10.setup {
  
  # 1 Timeline
  1 < lib.gridelements.defaultGridSetup
  1 {
    innerWrap.cObject = COA
    innerWrap.cObject.10 = < lib.stdheader
    
    # Add the renderObj of the tab directly, this prevents the "csc-default"-wrap
    columns {
      default {
        renderObj = COA
        renderObj {
          10 =< tt_content
        }
      }
    }

    cObject = FLUIDTEMPLATE
    cObject {
      # Timeline HTML
      file = fileadmin/Templates/Extensions/Gridelements/Timeline.html
    }

  }
  
}

Dazu der HTML-Part in der Timeline.html Datei:
Wichtig, das Ihr mit der Variable {data.tx_gridelements_view_children} Euch alle Daten in eine ForEach Schleife ausgeben lasst.
Lasst Euch auch mal mit dem

<f:debug>{block}<f:debug>

alle Felder anzeigen und ausgeben.

<section id="cd-timeline" class="cd-container">
  <f:for each="{data.tx_gridelements_view_children}" as="block" iteration="iterator">
    <div class="cd-timeline-block{f:if(condition:iterator.isOdd, then: ' odd', else: ' even')} clearfix type-{block.CType}">
      <div class="cd-timeline-img cd-timeline-date wow fadeIn">
        <span>
          <time datetime="{f:format.date(date: block.date, format: 'd.m.y')}">
            <f:format.date date="{block.date}" format="Y" />
          </time>
        </span>
      </div><!-- cd-timeline-date -->
      <div class="cd-timeline-content wow{f:if(condition:iterator.isOdd, then: ' fadeInLeft', else: ' fadeInRight')}">
      	<h2>{block.header}</h2>
        <p>{block.bodytext}</p>
    	<div class="image-wrap"><f:cObject typoscriptObjectPath="lib.gridelementsContentImage" data="{block}" /></div>
      </div><!-- cd-timeline-content -->
    </div>
  </f:for>
</section>

Da Ihr Bilder nicht ausgegeben bekommt, ohne einen Viewhelper oder einer TypoScript Anweisung zu schrieben, müssen wir noch dieses Image-Feld extra aufbauen und ausgeben.
Da ich hier keine extra Extension für den Viewhelper erstellen wollte, habe ich mir die TypoScript Anweisung aufgebaut.

Image-Ausgabe:

lib.gridelementsContentImage = FILES
lib.gridelementsContentImage {
  references {
    table = tt_content
      uid.data = field:uid
      fieldName = image
    #data = levelmedia:-1, slide
    }

    begin = 0
    maxItems = 5

    renderObj = IMAGE
    renderObj {
      file.import.data = file:current:uid
      file.treatIdAsReference = 1
      altText.data = file:current:title
      wrap = |
    }
  stdWrap.wrap = |
}

Hier wird nun das Bild/ die Bilder ausgebgen und oben in dem HTML Template via „cObject typoscriptObjectPath“ eingebunden.

Ich hoffe Euch hilft das kleine Beispiel.
Gerne andere Lösungen und Fragen in den Kommentaren schreiben!