TYPO3: Ansicht von TemplaVoilà im Backend ändern

TYPO3

Ich war eigentlich nie der riesen Fan von der Extension TemplaVoilà, doch durch die häufige Nutzung der Extension im Büro habe ich mich an die Erweiterung gewöhnt und freue mich die Vorteile nutzen zu können.

TemplaVoilà

Kurz vorweg: TemplaVoilà ist eine Erweiterung, die es ermöglicht Inhalte über sogenannte flexible Inhaltselemente (Flexible Content Element oder kurz FCE) zu verwalten. Somit ist ein leichtes verschieben von Elemente via Drag & Drop möglich.

Wer mehr zum Thema wissen möchte sollte sich mal die Screencasts von Wolfgang zu diesem Thema anschauen. Dort findet ihr auch diverse Tutorials zum Thema TV.

Die Anzeige im Backend

Normalerweise werden einzelne Inhaltsbereiche in Templates und FCEs von TemplaVoilà nebeneinander und im gleichen Verhältnis angeordnet. Diese Anzeige lässt sich aber über die Datenstrukturen beeinflussen. Die Konfiguration einer Datenstruktur (Data Structure oder kurz TS) wird via XML gesteuert.

Die Datenstruktur

Vom Modul TYPO3 aus könnt ihr die Datenstrukturen bearbeiten. Dabei ist es erstmal egal ob es sich um ein Seiten-Template oder ein FCE handelt. Mit einem Klick auf den Stift bearbeiten wir also die globale XML-Konfiguration einer Datenstruktur.

Der Stift zum bearbeiten der Datenstrukturen

Die Datenstruktur bearbeiten

Icons für Datenstrukturen und Template-Objekte

Wie auf dem Bild oben zu sehen, habt ihr hier unter anderem die Möglichkeit ein Icon für die Datenstruktur festzulegen. Es ist durchaus möglich mehrere FCEs oder Seiten-Templates, sogenannte Template-Objekte (Template Object oder kurz TO), in einer Datenstruktur zu pflegen.

Die Icons zur Anzeige der TOs werden getrennt in den jeweiligen Template-Objekten gepflegt womit auch hier eine Unterscheidung der FCEs und Seiten-Templates einfach möglich bleibt. Dazu klickt ihr einfach auf den Stift neben dem Namen des Template-Objektes.

Bearbeitung der XML-Konfiguration

Screenshot von der Bearbeitungs-Maske

Wie auf den Bild oben zu sehen ist bereits eine Konfiguration vorhanden. Diese wird beim anlegen eines TOs automatisch angelegt und beruht auf euren Einstellungen bei der Erstellung. Diese Konfiguration lässt sich natürlich verändern bzw. in unserem Falle erweitern.

Wie an dem Screenshot zu erkennen, ist es auch möglich eine Template-Datei für die Anzeige im Backend auszuwählen. Ich habe diese Funktion allerdings noch nie genutzt und bin mit der hier vorgestellten Lösung immer gut klar gekommen. Feedback in diesem Bezug ist also gerne erwünscht.

Die fertige XML-Konfiguration

Wir legen dazu innerhalb des Elementes meta ein neues Element beLayout an. Da wir innerhalb dieses Elementes HTML-Code einfügen wollen, müssen wir das Ganze mit <![CDATA[ ... ]]> "einklammern". Der HTML-Code besteht nun aus einer einfachen Tabelle. Im Beispiel oben passe ich die Breite an die Breite an, wie sie im Frontend ausgegeben wird.

Jeder der ein Grundverständnis von der Arbeit mit Tabellen in HTML hat, sollte hier keine Probleme haben. So lassen sie auch Elemente untereinander positionieren oder komplexe Verschachtelungen bauen. Ob das für ein flexibles Inhaltselement nun wirklich wäre, ist eine andere Sache.

Die Marker innerhalb des Beispiels oben entsprechen den Namen eurer Felder des Template-Objektes. Solltet ihr hier einen Fehler machen, wird im Seiten-Modul ein leeres TO angezeigt. In diesem Fall solltet ihr einfach mal die Schreibweise überprüfen.

Die XML-Konfiguration

Hier nun nochmal der wichtige Ausschnitt der XML-Konfiguration zum kopieren und weiterentwickeln.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
    <meta type="array">
    <langDisable>1</langDisable>
    <beLayout><![CDATA[
     <div id="templavoilabackend">
       <table>
         <tr>
           <td width="66%">###field_col1###</td>
           <td width="34%">###field_col2###</td>
         </tr>
       </table>
     </div>
   ]]></beLayout>
  </meta>
 
  [...]
 
</T3DataStructure>

Die Ausgabe im Seiten-Modul

Wenn ihr alles richtig gemacht habt, könnte die Ausgabe im Seiten-Modul jetzt zum Beispiel so aussehen:

Die Ansicht der Template-Objekte im Backend von TYPO3

Hier habe ich z.B. auch zwei Elemente untereinander dargestellt. In meinem Fall den eigentlichen Inhalt und eine optionale Slideshow. Die XML-Konfiguration sieht in diesem Fall so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
    <meta type="array">
    <langDisable>1</langDisable>
    <beLayout><![CDATA[
     <div id="templavoilabackend">
       <table>
         <tr>
           <td>###field_slideshow###</td>
         </tr>
         <tr>
           <td>###field_content###</td>
         </tr>
       </table>
     </div>
   ]]></beLayout>
  </meta>
 
  [...]
 
</T3DataStructure>

Das war mein TYPO3-Tipp für heute. Da ich bei weitem kein Profi bin was TemplaVoilà angeht, würde ich mich natürlich über Feedback und weitere Tipps bzw. Verbesserungen freuen. Feedback und Fragen könnt ihr wie immer in die Kommentare schreiben oder ihr schickt mir einfach eine Mail.

FacebookRSS Feeds

Die Kommentarfunktion zu diesem Beitrag wurde deaktiviert.