TYPO3 7.6 Seiteneigenschaften – Bild Ressourcen via FLUID auslesen

Für eine Übersichtseite habe ich früher oft den Datensatz: Menü/Sitemap (TYPO3 Menu/Sitemap) verwendet und konnte diesen mit typoscript anpassen und so aufbauen wie es das Layout vorgibt.
Mit TYPO3 7.x und FLUID Content hat sich nun der Aufbau in FLUID ausgelagert.
D.h. wir müssen uns das HTML Template genauer anschauen, auslagern und dann bearbeiten.

Die Datei Menu/Sitemap habe ich hier ausgelagert, als Beispiel habe ich mir die File: Type-4.html kopiert und umbenannt in Type-11.html.
„fileadmin/Templates/FluidStyledContent/Resources/Private/Partials/Menu/Type-11.html“

Auf Eurer „root“ Seite in den Seiteneigenschaften / Seiten-TSconfig fügt Ihr noch folgendes ein:

TCEFORM {
	tt_content {
		menu_type.addItems.11 = Übersichtseiten
	}
}

den HTML Aufbau der FLUID Datei habe ich so gestaltet:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
<ce:menu .directory pageUids="{pageUids}" as="pages">
	<f:if condition="{pages}">
		<div class="row overview-wrap ce-menu ce-menu-11">
			<f:for each="{pages}" as="page" iteration="iterator">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 matchHeight">
                    <div class="teaser-item-1-wrap item-id-{iterator.cycle} teaser wow fadeIn">
                        <!-- Teaser Bild oben Uberschrift Text Link -->
                        <f:link .page pageUid="{page.uid}" title="{page.title}">
                            <f:cobject typoscriptObjectPath="lib.pageimage" data="{uid:'{page.uid}'}"></f:cobject>
                            <h3>{page.title}</h3>
                            <p>{page.abstract}</p>
                            <span class="internal-link big-link">Mehr erfahren</span>
                        </f:link>
                    </div>
                </div>
			</f:for>
		</div>
	</f:if>
</ce:menu>
</html>

Soweit lese ich die Page Daten mit {page} aus, doch leider funktioniert es nicht mit dem {page.media}, da hier nur eine „1“ eingetragen ist. Daher habe ich als Übergangslösung die Bilddatei via typoscript ausgelesen:

Hier ist wichtig, dass Ihr die page-UID mit übergebt, damit das richtige Seiten-Bild / Ressourcen-Bild ausgelesen wird.

Hier das passende TYPOSCRIPT:

lib {
  pageimage = FILES
  pageimage {
    references {
      table = pages
      #Seiten-ID ubergabe
      uid.dataWrap= {field:uid}
      fieldName = media
    }
    renderObj = IMAGE
    renderObj {
      file.width = 780c
      file.height = 380c
      file.import.data = file:current:uid
      file.crop.data = file:current:crop
      file.treatIdAsReference = 1
      altText.data = file:current:title
      params = class="img-responsive"
      wrap = |
    }
  }
}

Soweit funktioniert der Aufbau sehr gut, doch würde ich nun noch das Bild via FLUID auslesen wollen, wer da noch eine Lösung hat, bitte gerne hier in den Kommentaren schreiben.
Vielen Dank!

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 weitergeholfen oder gefallen? Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!Ich bin freiberuflicher TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web etwas mehr als 12 Jahre. Mehr Infos zu der TYPO3 Internetagentur - INGENIUMDESIGN.

Leave a Reply

Next ArticleTYPO3 Flux - Part #1 - Installation Erweiterungen [FluidTYPO3]