TYPO3 7.6 – Text & Media Image auslesen und bearbeiten
Da immer mehr im Web gefragt wird, wie man nun in der neuen TYPO3 7.6 das Bild auslesen und ggf. bearbeiten kann, habe ich dazu mal eine neue Anleitung geschrieben.
Wichtig ist hier zu wissen, es gibt eine neue Content-Style-Engine = fluid_styled_content
TYPO3 möchte für die neuen Versionen (TYPO3 8) die Frontend-Ausgaben mit reinem Fluid ausgeben. Damit es später nicht mehr zu Problemen kommt, solltet Ihr in den neuen TYPO3 7 Versionen auch mit fluid_styled_content arbeiten. Den findet Ihr im Extension-Manager und könnt Ihr installieren, wichtig ist hier, Ihr solltet den alten „css_styled_content“ deinstallieren, da sonst dem Redakteur alle Elemente angeboten werden!
Im Root-Template unter „Statische Templates einschließen“ müsst Ihr dann noch „Content Elements (fluid_styled_content)“ laden und „Content Elements (css_styled_content)“ entfernen! Das sollten die „Vorbereitung“ für die neue Fluid-Engine sein.
Wichtig, es gibt nun keine Elemente mehr wie: Bild, Bild mit Text oder Text ! Diese wurden alle zusammengelegt und heißt nun „Text & Medien“ (textmedia). Hier könnt Ihr den TYPO3 7 Change zu dem Thema nachlesen: Migrate CTypes text, image and textpic to textmedia
Bevor Ihr aber nun anfangt die neuen Fluid-Elemente zu bearbeiten, müssen wir via typoscript dem TYPO3 System noch sagen, dass er auch die ausgelagerten Elemente verwenden soll. Schaut Euch dazu auf jeden Fall vorher noch mal die Extension: fluid_styled_content an: /typo3_src-7.6.xx/typo3/sysext/fluid_styled_content/
Im Resources Ordner liegen alle Templates die es im Backend gibt. D.h. wir können diese via Fluid erweitern, bearbeiten, auslesen usw.
Legt Euch dazu in Eurem fileadmin Ordner neue Strukturen an. Ich habe diese hier verwendet: /fileadmin/Templates/FluidStyledContent/Resources/…
Dort kopiere ich aber nicht alles rein, sondern nur wirklich das, was ich verändern/erweitern/bearbeiten möchte! Damit die Daten auch weiterhin aktualisiert werden.
Da ich selber noch nicht so viel damit gemacht habe, hier mal ein kleines Beispiel wie wir nun das Element „Text & Media“ / „textmedia“ bearbeiten können um z.B. nur ein Image auszugeben!
Meine Ordner-Struktur:
– fileadmin
— FluidStyledContent
— Resources
—- Private
—– Layouts
—– Partials
—– Templates
Im Ordner „Templates“ habe ich mir die Datei aus der Extension kopiert: Textmedia.html und die Datei aus dem Ordner Partials: MediaGallery.html
Da sie das Image rendert!
Damit nun der neue Fluid-Content auch geladen wird, müsst Ihr noch im Setup die neuen fluidContent RootPaths eintragen.
Dateien via typoscript auslagern:
# tt_content Fluid Extend
lib {
fluidContent {
templateRootPaths {
50 = fileadmin/Templates/FluidStyledContent/Resources/Private/Templates/
}
partialRootPaths {
50 = fileadmin/Templates/FluidStyledContent/Resources/Private/Partials/
}
layoutRootPaths {
50 = fileadmin/Templates/FluidStyledContent/Resources/Private/Layouts/
}
}
}
Im TYPO3 Backend unter dem Element: Text & Media haben wir bei dem Tab: Erscheinungsbild die Select-Box: Layout
Mit diesem Selector können wir nun z.B. unterschiedliche Ausgaben aufbauen!
Orginal-Fluid-Template: Textmedia.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div id="c{data.uid}">
<f:if condition="{gallery.position.noWrap} != 1">
<f:render partial="Header" arguments="{_all}" />
</f:if>
<div class="ce-textpic ce-{gallery.position.horizontal} ce-{gallery.position.vertical}{f:if(condition: gallery.position.noWrap, then: ' ce-nowrap')}">
<f:if condition="{gallery.position.vertical} != 'below'">
<f:render partial="MediaGallery" arguments="{_all}" />
</f:if>
<div class="ce-bodytext">
<f:if condition="{gallery.position.noWrap}">
<f:render partial="Header" arguments="{_all}" />
</f:if>
<f:format.html>{data.bodytext}</f:format.html>
</div>
<f:if condition="{gallery.position.vertical} == 'below'">
<f:render partial="MediaGallery" arguments="{_all}" />
</f:if>
</div>
<f:render partial="Footer" arguments="{_all}" />
</div>
</html>
Jetzt können wir mit der Auswahl vom dem z.B. „Layout 2“ das Template anders aufbauen lassen.
Hier reicht nun schon ein einfaches condition="{data.layout}==2" !
Mit dem debug {data} könnt Ihr euch auch mal alle vorhanden Daten ausgeben lassen. So seht Ihr dann das Feld: layout
Nun habe ich noch die HTML-Datei „MediaGallery.html“ im Ordner Partials kopiert und in „MediaRawImage.html“ benannt.
Dort möchte ich jetzt ein reines Bild ohne Div´s oder Extra-Einstellungen ausgeben:
(Wäre z.B. auch pratisch um einen TYPO3 Image Slider zu programmieren)
Das HTML können wir dann mit einer condition / then / else aufbauen.
Hier frage ich nun das Feld „layout“ ab und sage, wenn „Layout 2“ ausgewählt wurde, dann lade mir das neue HTML/Fluid Template: MediaRawImage
Wenn das nicht ausgewählt ist, dann lade das normale Text & Media Element (MediaGallery.html).
Neues Fluid Textmedia.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{data.layout}==2">
<f:then>
<f:if condition="{gallery.position.vertical} != 'below'">
<f:render partial="MediaRawImage" arguments="{_all}" />
</f:if>
</f:then>
<f:else>
<f:if condition="{gallery.position.vertical} != 'below'">
<f:render partial="MediaGallery" arguments="{_all}" />
</f:if>
</f:else>
</f:if>
</html>
Nun könnt Ihr in der neuen Fluid Image Datei: MediaRawImage.html das Fluid so anpassen wie ihr es haben wollt.
Hier ein Beispiel MediaRawImage.html:
<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">
<f:for each="{gallery.rows}" as="row">
<f:for each="{row.columns}" as="column">
<f:switch expression="{column.media.type}">
<f:case value="3">
<f:render section="audioType" arguments="{_all}" />
</f:case>
<f:case value="4">
<f:render section="videoType" arguments="{_all}" />
</f:case>
<f:case default="TRUE">
<f:render section="imageType" arguments="{_all}" />
</f:case>
</f:switch>
</f:for>
</f:for>
<f:section name="imageType">
<f:render section="media" arguments="{_all}" />
</f:section>
<f:section name="audioType">
<f:render section="media" arguments="{_all}" />
</f:section>
<f:section name="videoType">
<f:render section="media" arguments="{_all}" />
</f:section>
<f:section name="media">
<f:media file="{column.media}" width="{column.dimensions.width}" height="{column.dimensions.height}" alt="{column.media.alternative}" title="{column.media.title}" />
</f:section>
</html>
Natürlich könnt Ihr auch die Bereiche wie Audio und Video löschen! 😉
Aber wichtig, Ihr müsst das f:render behalten, da dort das Image aufgebaut und abgefragt wird!
Das „Label“ könnt Ihr noch umbenennen, dazu in die Seiteneigenschaften von der Root-Seite gehen.
TSconfig:
TCEFORM {
tt_content {
layout {
altLabels {
0 = Standard
2 = Roh Bild
}
}
}
}
Wie geschrieben, bin ich selbst noch nicht so tief in dem neuen fluid-content drin, daher gerne in den Kommentaren ander Wege/Lösungen schreiben! Danke!
Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!
Pingback: TYPO3 – TCEFORM tt_content Layout zum Datensatz anpassen |
Andreas
Danke für den tollen Hinweis.
Ich benutze Typo 9.5 und leider funktioniert es hier nicht mehr, wenn man lib.fluidContent konfiguriert.
Stattdessen muss man lib.contentElement benutzen!
Viele Grüße
Sebastian
lazyload werde ich ggf. noch mal als nächstes Thema angehen.
Aber eine Klasse kannst du ganz einfach dem f:image geben:
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Image.html
Tom
Hi, informative Einblicke 🙂
Wie bekomme ich denn eine Klasse an mein Bild, um z.B. lazyloading zu realisieren?
Dazu habe ich folgendes geschrieben:
Nur leider funktioniert das nicht so ohne weiteres. Wie kann man das hinbekommen? Vielen Dank!
Pingback: TYPO3 7.6 – fluid_styled_content um eigene Konstanten erweitern