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 geholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste.
Krypto-Donate an:
BTC: 1Emte6AxnifWqt7N8vSqSF7JK1K6CYuBj4
LTC: Lfs2F8DabYuunxYw2ym9CRLAMBKZUaaBNh
ETH: 0x95298b41564f070bc83bc76159bb7804d26483d6
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

4 Kommentare

  1. Bettina

    Hallo Sebastian, super tolle Anleitung. Dankeschön dafür. Ich hätte jetzt mal eine Frage, geht das auch für das Menü/Sitemap bestimmte Bilder, nicht aus den Seiteneigenschaften der übergeordneten Seite,je bestimmter Kategorien aus den Inhaltselementen der Unterseiten zu holen und wenn ja könntest du mir da einen Tipp geben wie ich das umbaue? Wäre super toll. Danke schonmal. Ich hoffe ich hab mich jetzt verständlich ausgedrückt. Lg

  2. Steffi

    Eine super Anleitung! Es hat bei mir auf Anhieb geklappt – vielen Dank! (ich habe lange nach genau dieser Lösung gesucht!)
    Allerdings hat sich bei meinem Projekt das Problem ergeben, dass bei weiteren Sprachversionen die Bilder nicht ausgelesen werden. Vermutlich hängt das mit dem pageResourceImage zusammen?!
    Die Bilder habe ich in allen weiteren Sprachen in den Ressourcen der Seiteneigenschaften hinterlegt.
    Habt ihr hierzu eine Idee?

  3. vielen Dank! Ich schaue mal ob ich die Tage ob ich den Beitrag für die 8.7 ausrolle.

  4. Für TYPO3 v8 ist eine kleine Anpassung im FLUID-Template notwendig:

    Die Templates für Menüs haben sich geändert.
    „page.media“ geht nicht mehr direkt, für v8 es muss nun „page.data.media“ heissen:

    Abgesehen davon, gibt es gerade wohl noch einen bug, was das cropping angeht:
    https://forge.typo3.org/issues/82057

    HTH

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