Bearbeiten und Auslesen von Content Elementen bei TYPO3 7.6.X

Schon mit fluid_styled_content gearbeitet? Sebastian Schmal erklärt als Gastblogger in einem Tutorial, wie Fluid für die Ausgabe von Content Elementen genutzt werden kann.

In TYPO3 8 LTS sollen Bilder, Texte und Videos – kurz: alle Content Elemente – zukünftig im Frontend mit Fluid ausgegeben werden. TYPO3 7.6 kann als Vorstufe dazu verstanden werden, es gibt nämlich eine neue Content-Style-Engine mit Fluid-Basis zum Auslesen oder Bearbeiten von Content Elementen. „fluid_styled_content“ soll „css_styled_content“ ersetzen. Da TYPO3 Version 8 immer näher rückt will ich Euch zeigen, wie Ihr es nutzt. Los geht’s:

1 | Die ersten Schritte

Zuerst müsst Ihr fluid_styled_content im Extension Manager installieren und den alten css_styled_content am besten rauswerfen – sonst bekommen die Redakteure im Backend alle Möglichkeiten angeboten und es kommt zu Verwirrung und Problemen. Außerdem solltet Ihr zur Vorbereitung auf die neue Fluid-Engine im Root-Template unter “Statische Templates einschließen” “Content Elements (css_styled_content)” durch das neue “Content Elements (fluid_styled_content)” ersetzen.

Es gibt jetzt keine einzelnen Content Elemente wie text, image und textpic mehr. Alle CTypes wurden bei fluid_style_content zu „textmedia“ zusammengefasst. Auch das Relationsfeld heißt jetzt nicht mehr „image“ sondern „media_references“. Nach der Installation von fluid_styled_content und der Deinstallation von und css_styled_content habt Ihr im Installations-Tool einen Upgrade Wizard zur Verfügung, der alle Content Elemente von den alten CTypes zu „textmedia“ migriert. 

2 | Frontendrendering anpassen nicht vergessen

Um Fluid-Elemente bearbeiten zu können, muss aber zuerst noch das Frontendrendering mit Hilfe von typoscript angepasst werden, sodass nach der Migration auch der neue CType verwendet wird. Werft dazu am besten zuerst einen genauen Blick auf die Extension fluid_styled_content (/typo3_src-7.6.xx/typo3/sysext/fluid_styled_content/).

Im Resources Ordner können für alle Templates des Backends Erweiterungen mit Hilfe von Fluid vorgenommen werden. Hier könnt Ihr sie auch bearbeiten oder auslesen lassen etc. Kopiert in Euren fileadmin, wo Ihr zuvor eine entsprechende neue Struktur angelegt habt (z. B. fileadmin / Templates / FluidStyledContent / Resources/[…]) das hinein – und bitte nur das – was Ihr verändern oder erweitern wollt und passt es entsprechend an. Wie das aussehen kann habe ich für Euch hier mal in einem Beispiel zusammengefasst: 

3 | Anpassung des Elements „textmedia“, um ein einfaches Bild ausgeben zu lassen

Ich habe mir im fileadmin in den Ordner „Templates“ aus der Extension fluid_styled_content die Datei Textmedia.html kopiert. Außerdem brauche ich hier aus dem Ordner „Partials“ MediaGallery.html, da diese Datei für das Rendern von Bildern verantwortlich ist.

Wenn Ihr wollt, dass nun auch tatsächlich die neuen Fluid-Content-Elemente gerendert werden, müsst Ihr noch die neuen Root-Paths integrieren.

Code Beispiel:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
# 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/
    }
  }
}

Es gibt im Backend im textmedia Element im Tab „Erscheinungsbild“ die Select-Box „Layout“ als Selector, um beispielsweise Templates anders aufzubauen. Dafür reicht zum Beispiel schon die Auswahl eines beliebigen Layouts X: condition="{data.layout}==X".

Wie schon beschrieben hab ich mir außerdem die Datei MediaGallery.html kopiert und zur besseren Übersichtlichkeit in „MediaRawImage.html“ umbenannt – denn ich möchte ein einfaches Bild ohne Extras ausgeben lassen, wenn mein Layout X ausgewählt ist.

Code Beispiel:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
<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>

Ich möchte mein angepasstes HTML also als condition/then/else aufbauen; wenn mein Layout X ausgewählt ist, dann soll das neue Fluid-Template „MediaRawImage.html“ ausgewählt werden, wenn nicht das normale „MediaGallery.html“. Dazu muss dann nur das Feld „layout“ abgefragt werden. In der MediaRawImage.html Datei könnt Ihr da Fluid nun also verändern und bearbeiten wie Ihr wollt.

Code Beispiel:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>

Auch wenn Ihr Bereiche wie Audio oder Video löscht – bei Eurer einfachen Bild-Version braucht Ihr die ja nicht – müsst Ihr das f:render für Image unbedingt behalten, da hier das Bild ausgelesen und aufgebaut wird. Um das Label umzubenennen müsst Ihr es abschließend nur aus den Seiteneigenschaften der Root-Seite anpassen:

Code Beispiel:
01
02
03
04
05
06
07
08
09
10
TCEFORM {
    tt_content {
        layout {
            altLabels {
                = Standard
                = Roh Bild
            }
        }
    }
}

Habt Ihr noch andere Lösungen oder Ideen dazu? Schreibt sie gerne hier ins Forum oder sagt uns Eure Meinung auf Facebook oder Twitter