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
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!
Kurt
Da im vorherigen Submit das wichtigste entfernt wurde, hier nochmal anders geschrieben ohne die Anfangs- und Endzeichen:
f:cObject typoscriptObjectPath=“lib.pageimage“ data=“{uid:'{page.data.uid}‘}“
oder eben:
f:image image=“{page.files.0.originalFile}“ maxWidth=“600″ maxHeight=“600″ class=“img-responsive“
Kurt
In TYPO3 8 muss es übrigens so heißen:
Es geht aber auch viel einfacher in TYPO3 8:
Siehe hier:
https://docs.typo3.org/typo3cms/FileAbstractionLayerReference/8.7/UsingFal/Frontend/Index.html
Getestet in MenuAbstract.html
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
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?
Sebastian
vielen Dank! Ich schaue mal ob ich die Tage ob ich den Beitrag für die 8.7 ausrolle.
mtness
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