26. März 2009

TemplaVoila – Felder im Backend layouten und stylen

in Extension, Templates, Tutorial

Eine Extension die für mich nicht mehr wegzudenken wäre ist TemplaVoila. Eines meiner Lieblingsfeatures ist die Möglichkeit das Backend-Layout via HTML im XML-Feld der DataStructure zu steuern. Die Vorgehensweise ist so einfach wie genial. In diesem Artikel möchte ich euch einen kleinen Einblick geben wie das Funktioniert und was man damit machen kann, bzw. was nicht.

Vorgehensweise:
Zunächst navigiert man im Backend im Modul „TemplaVoila“ zum SysFoldre, welcher die Datenstrukuren beinhaltet und klickt dort bei der gewünschten DS auf das Edit-Icon. Im Feld Data Structure XML kann man dann anschließend die Ausgabe im Page-Modul zum Beispiel wie folgt steuern (das Ganze muss in den -Tag):

<meta>
<beLayout>
<![CDATA[
<table style="background: transparent; border: 0;" style="background: transparent; border: 0;" border="0" width="99%">
<tbody>
<tr>
<td style="border: 1px dashed #666666; background: transparent; width: 50%; vertical-align: top;">###field_left###</td>
<td style="border: 1px dashed #666666; background: transparent; width: 50%; vertical-align: top;">###field_right###</td>
</tr>
<tr>
<td style="border: 1px dashed #666666; background: transparent; vertical-align: top;" colspan="2">###field_bottom###</td>
</tr>
</tbody></table>
]]>
</beLayout>
</meta>

Wie man sieht lässt sich sogar CSS verwenden. Alles in allem stellt dieses eine sehr komfortable Möglichkeit dar, das Layout des Frontends auch im Backend für die Redakteure nachvollziehbar und übersichtlich darzustellen.

Leider gibt es auch einen Wehrmutstropfen bei der ganzen Sache. Hat man verschiedene Template-Objects unter einer Datenstruktur lässt sich für die verschiedenen TOs immer nur ein Layout verwenden – eben jenes, welches in der Datenstruktur definiert ist. Aber wie immer gibt es denke ich Hoffnung, dass in einer der späteren TemplaVoila-Versionen auch das möglich sein wird.

13 Reaktionen zu “TemplaVoila – Felder im Backend layouten und stylen”

Kommentare abonnieren (RSS) oder TrackBack URL

Ich persönlich mag TV nicht, aber interessieren würde mich schon wie dann das BE bei dir aussieht. Screenshot?

Grüße, Alex

Alex Kellner am 26. März 2009 um 21:46

folgt gleich.

Bernhard Berger am 26. März 2009 um 21:51

Müsst ihr ständig diesen alten Kram aufkochen? Das Feature ist seit Ewigkeiten verfügbar und dokumentiert 🙁

tn am 27. März 2009 um 07:17

Wenn ma nix aufgräbt was irgendwo dokumentiert ist, braucht man ja über nichts zu schreiben oder?

Bernhard Berger am 27. März 2009 um 09:40

Ich habe mit background images das FE im BE visualisiert: http://i44.tinypic.com/vgsr52.jpg (FE: http://www.thomas-hotel.de)

Sebastian Gebhard am 27. März 2009 um 13:45

@Sebastian: verdammt nette Idee! Da ersparst du dir ja schon fast das FE-Editing 🙂

Bernhard Berger am 27. März 2009 um 14:01

Danke Bernhard, kam spontan drauf nachdem ich den Post hier gelesen hab.

@tn: Kennst du alle dokumentierten Features von TYPO3 und den wichtigsten Extensions? 😉

Sebastian Gebhard am 27. März 2009 um 14:15

@sebastian – nein sicherlich nicht – aber wenn man schon nen blogpost schreibt dann sollte man nicht einfach nur die Sachen wiederkäuen die überall stehen, sondern wenigstens noch irgendwas wirklich innovatives dazu bringen was eben vllt. nicht dokumentiert ist oder nicht trivial ist –
und da ich allgemein das gefühl hab das hier viel content genau dadurch generiert wird Sachen zu wiederholen wollte ich meinen unmut darüber äußern 😉
-> in dem zusammenhang finde ich deine Idee mit dem background-image sehr gelungen … wie so oft ergibt sich der eigentliche Artikel erst in den Kommentaren 😉

tn am 27. März 2009 um 15:07

… wie so oft ergibt sich der eigentliche Artikel erst in den Kommentaren 😉
—

Und genau das sollte eigentlich den Post hier schon rechtfertigen oder? 😉

Bernhard Berger am 27. März 2009 um 19:27

@tn: Ich finde den Beitrag von Bernhard sehr gelungen. Man darf auch nicht vergessen was für eine Arbeit hinter einem guten Blogeintrag steht. So einen Beitrag gibt es meines Wissens noch nicht auf typo3blogger.de – also passt es wunderbar.
Wen es nicht interessiert, muss es auch nicht lesen.

Cheers, Alex

Alex Kellner am 28. März 2009 um 12:24

Naja, es geht ja weniger darum hier Dinge zu posten die einfach noch nicht da waren.

Ich ziehe meine Motivation daraus, andere Leute auf Ideen zu bringen, anzuregen neue Dinge auszuprobieren, die sie vielleicht ohne sie zufällig zu lesen nicht gemacht hätten.

Und wie man am Post von Sebastian sehen kann funktioniert das Konzept ja durchaus hin und wieder 😉

Insofern: happy coding 🙂

Bernhard Berger am 28. März 2009 um 18:50

Danke, Bernhard.

Ich muss dir auch Recht geben, dass in Blogs durchaus auch dokumentierte Features angepriesen werden dürfen!

Neulich wollte ich das mit dem aktuellen SVN trunk mal ausprobieren, in dem man ja schon die Inhalte per Drag&Drop verschieben kann. Leider geht das nach dem Einbau in die Tabelle nicht mehr, sprich ich habe die Idee, das BE zu stylen, wieder verworfen.

Hat jemand Erfahrungen, wie sich das Drag&Drop-Problem umgehen lässt? Evtl. per DIV statt TABLE?

Steffen

Steffen Gebert am 30. März 2009 um 21:29

Ich benutze eine Tabelle und die Extension nh_tvdragndrop. Das funktioniert tadellos. Ich kenne die genauen technischen Unterschiede zwischen der Extension und dem neuen Core-Feature nicht, aber da würde ich mal nachsehen.

Sebastian Gebhard am 31. März 2009 um 08:12

Kategorien

Archiv