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!

Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel geholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste.
Vielen Dank!


Ich bin TYPO3 Freelancer, TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web seit 2004.
Mehr Infos zu der TYPO3 Internet-Agentur INGENIUMDESIGN.

Besucht auch unser TYPO3 Hilfe Forum.

Leave a Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

5 Kommentare

  1. Good god! Thanks!! I’ve been lookinks for this example for hours !

  2. Mhhh, so auf die Schnelle nicht wirklich. Ich überlege mal, ggf. fällt noch jemanden Anderen etwas ein?

  3. Jan

    Hi Sebastian,

    danke, hilft leider nicht. Bilder die unter Ressourcen abgelegt werden kann ich ja problemlos nutzen, es geht mir um die Bilder die als Inhalt eines Gridelements auf der Seite abgelegt werden. Ist momentan doppelter Pflegeaufwand, den ich gern umgehen möchte.

    Weiteres testen verschiedener Codeschnipsel hat gezeigt, dass die Anweisung references.fieldName zu der Fehlermeldung führt. Egal was ich da reinschreibe…(image, field:xyz, etc.)
    Kommentier ich #fieldName= aus, werden zwar keine Bilder angezeigt, aber die Feherlemeldung is weg 🙂

    In den FAQ der Gridelements wird auch nicht empfohlen Gridelements als FCE zu verwenden, da man nur schwer an die Inhalte rankommt, wenn man nicht auf der aktuellen Seite ist… Da liegt vermutlich das Problem…

    Habe auch mal versucht per flexform-config das entsprechende Bild zur Vergügung zu stellen, immer die selbe Fehlermeldung… (http://www.npostnik.de/typo3/typo3-bilder-in-gridelements-mit-fal/)

    Hast du weitere Ideen?

  4. Jan

    Hi Sebastian,

    ich habe eine Sitemap (tt_content.menu.20.7) angepasst, um Bilder der Unterseiten, die in den Seiteneigenschaften unter Ressourcen abgelegt werden darzustellen, funktioniert soweit auch. Ohne zusätzliches Template. Wie schaffe ich es nun dass ich per TS direkt auf das erste Bild in einem Gridelement auf der Unterseite zugreifen kann?

    Mein Ansatz

    references{
    /* #bild der Seiteneigenschaften, funktioniert
    table=pages
    fieldName=media
    */

    table = tt_content
    uid.data = field:uid
    fieldName = image
    }

    liefert immer nur folgende Fehlermeldung:

    PHP Catchable Fatal Error: Argument 3 passed to TYPO3\CMS\Frontend\Page\PageRepository::getFileReferences() must be of the type array, null given, called in /html/typo3/typo3_src-6.2.10/typo3/sysext/frontend/Classes/ContentObject/FilesContentObject.php on line 321 and defined in /html/typo3/typo3_src-6.2.10/typo3/sysext/frontend/Classes/Page/PageRepository.php line 1357

    Hoffe du kannst mir mit meinem Problem weiterhelfen 🙂

Next ArticleTYPO3 - tt_content subheader aktivieren