Backend-Templates für DCEs mit Bild

Selbst nach stundenlangen Recherchen durch das World Wide Web fand ich keine einzige Anleitung, die eine funktionierende Beschreibung zur Erstellung von Backend-Templates für DCEs beinhaltet.

Aus diesem Grunde habe ich hier eine kleine Anleitung für euch parat. Die  folgenden Codes funktionieren auf jeden Fall in TYPO3 6.2.14 mit DCE Version 1.0.5.

Schritt 1: Erstellen eines DCEs

Als Beispiel erstellen wir uns ein Bild mit dem Titel „Bild“. Die Variable setzen wir als „img“ und darf in keinem anderen Element dieses DCEs verwendet werden. Danach wählen wir unter „Konfiguration“ File Abstraction Layer (recommended) aus. In dem XML-Code unbedingt (!)

<fieldname>fal</fieldname> <!-- Name of variable! -->

durch

<fieldname>{eure Variable}</fieldname> <!-- Name of variable! -->

Bei mir:
<fieldname>img</fieldname> <!-- Name of variable! -->

ersetzen und anschließend speichern. Zur besseren Veranschaulichung habe ich mir zusätzlich noch ein eigenes Textelement („Inherit RTE from TSconfig“) mit der Variable „text“ angelegt.

Schritt 2: Erstellen eines Backend-Templates

Backend-Templates erstellen wir unter dem „Backend Template“-Reiter in der DCE-Bearbeitung.

Folgende zwei Elemente beinhaltet mein Beispiel-DCE:

  • Text (Variable: „text“)
  • Bild (Variable: „img“)

Folgenden Code fügen wir unter „Inhaltstext-Vorschau-Template-Datei (Fluid)“ ein.

{namespace dce=ArminVieweg\Dce\ViewHelpers}
<div>
    <f:format.stripTags>{field.text}</f:format.stripTags>
</div>
<f:if condition="{field.img}">
    <f:for each="{dce:fal(field:'img', contentObject:contentObject)}" as="fileReference">
        <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" width="150"/>
    </f:for>
</f:if>

Den Inhalt der Überschriften brauchen wir nicht zu editieren und lassen diesen auf dem Standardwert.

Et voilà. Wir sehen eine kleine Vorschau im Backend:

backend

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Highlighting von Codes ist mit den Tags  [ts], [php], [html], [javascript], [xml] oder [code] möglich.