TemplaVoila FCE: Klassen für Container per Dropdown bzw. Select-Field im Backend auswählbar machen

Wer mittels TemplaVoila eigene Contentelemente erstellt, stößt früher oder später auf folgende Problemstellung:

Es soll verschiedene Varianten eines Flexible Content Elements geben, die sich nur durch Textfarben oder Hintergründe unterscheiden. Der Quellcode der Elemente differiert nur durch verschiedene Klassen des Elternelements (z.B. <div class=”red”> oder <div class=”blue”>). Eine wenig elegante Lösung wäre es nun, für jede dieser Situationen eine eigenes CE zu erstellen, da dies das Backend unnötig aufbläst und zudem mehr Zeit in Anspruch nimmt.

TemplaVoila bietet die Möglichkeit, diese Klassen per Select-Field in der Editieransicht des Contentelements auswählbar zu machen.
Weiterlesen

Schnellerer Workflow beim Kopieren von Contentelementen mit dem TemplaVoila-Pagemodul

Wer im TemplaVoila Pagemodul ein Inhaltselement auf mehrere Seiten des Internetauftritts kopieren möchte, kennt das Problem:

  1. Nach dem Einfügen verschwindet der Paste-Button – um das Element ein zweites Mal einzufügen, muss erneut der Copy-Button betätigt werden, was den Workflow erheblich verlangsamt.
  2. Die kopierten Elemente sind auf “hidden” gesetzt und dem Elementtitel wird ein (copy) vorangestellt. Das kopierte Element muss also noch editiert und auf “sichtbar” geschaltet werden, ehe es auf die Öffentlichkeit losgelassen werden kann.

Um dies zu verhindern, fügen wir im TS-Field der Rootpage die folgenden Zeilen TypoScript ein:

Viel Spaß beim weniger mühsamen Kopieren!

Tutorial: Erstellen einer Mobile Version für Ihre Website mit TYPO3 & TemplaVoila

Dieses Tutorial wurde von TYPO3-Coreteam-Member Dmitry Dulepov auf dessen Blog in englischer Sprache veröffentlicht. Wir danken dem Autor für die freundliche Erlaubnis zur Übersetzung und Veröffentlichung unter typo3-book.com.

Moderne Mobiltelefone und Smartphones sind in der Lage, Internetseiten immer besser darzustellen. In den Zugriffsstatistiken tauchen diese Geräte mit vermehrter Häufigkeit auf, so dass eine für mobile Endgeräte optimierte Seite ein wichtiger Geschäftsfaktor werden kann. In diesem Beitrag erkläre ich, wie man eine für Mobile Agents optimierte Version der eigenen Website auf Basis von TYPO3 und TemplaVoila erstellt. Weiterlesen

Workshop TemplaVoilà – Teil 2: Eigene Content-Elemente erstellen

Nachdem der Workshop in T3NNr. 13 gezeigt hat, wie Seiten-Templates erstellt und gemappt werden, geht es diesmal darum, eigene Content-Elemente zu konzipieren. Mit Hilfe von TemplaVoilà ist es sehr einfach, diese zu erstellen und dem Redakteur zur Verfügung zu stellen.
Weiterlesen

Maximale Bildgröße für FCE in TemplaVoila

In vielen meiner Webs benutze ich TemplaVoila – hier setze ich FCE zum unterteilen der Seiten ein z.B. 50%-50%. Jedoch hatte ich immer das Problem das man beim einpflegen von Bildern  darauf achten muss wie breit die Spalten sind. Benutze man zu große Bilder wurde dadurch der <div> Container aufgeschoben und zerstörte die Darstellung. Die in den Konstanten angegebene “Max Image Width” [styles.content.imgtext.maxW] galt ja nur für den gesamten Content Bereich.

Um im TemplaVoila eine “Max Image Width” zu vergeben muss man lediglich wenige Zeilen Code unter “Data processing” im Feld TypoScript Code einfügen (5.maxImageWidth = 370 nach bedarf anpassen) :

5 = LOAD_REGISTER
5.maxImageWidth = 370
10= RECORDS
10.source.current=1
10.tables = tt_content
15 = RESTORE_REGISTER

Firefox 3.5, TYPO3 4.3 und Templavoila 1.4.1: Leere Seite beim Anlegen eines neuen Contentelements

Wer mit dem Firefox 3.5 ein neues Inhaltselement im TYPO3-Backend anlegen möchte, bekommt in schöner Regelmäßigkeit eine triste graue Seite statt des Wizards zu sehen. Betrachtet man den Quelltext des beinhaltenden Frames, so fällt auf, dass dieser komplett und oberflächlich betrachtet korrekt ist. Ein Reload des Frames bringt schließlich das gewünschte Ergebnis: Man erhält die Liste der zur Verfügung stehenden Content-Elemente und kann wie gewohnt weiterarbeiten. Ein Klick mit der rechten Maustaste auf das Plus-Symbol und das Öffnen in einem neuen Tab funktioniert ebenso. Leider stellen beide Varianten keine befriedigenden Alternativen dar.

Das Thema wird bereits im TYPO3-Bugtracker behandelt – leider brachten beide angebotenen Patches keine zuverlässige Lösung.

Was bei mir funktioniert, ist die Vorgehensweise aus der Fehlerbeschreibung selbst:

Die Zeile 283 in der Templavoila-Datei mod1/db_new_content_el.php mit folgendem Inhalt:

$this->content= $this->doc->insertStylesAndJS($this->content);

wird durch diese Version ersetzt:

$this->content.= $this->doc->insertStylesAndJS($this->content);

Seither erscheint der Wizard wieder ordnungsgemäß. Da ich keine Tabs zur Gruppierung der Contentelemente im Wizard nutze, kann ich keinen “broken output” (im Bugtracker beschrieben) feststellen. Alles fein soweit.

Ebenfalls Erfahrung mit diesem leidigen Thema gemacht und evtl. sogar eine elegantere Lösung parat? Dann bitte einen Kommentar hinterlassen. Vielen Dank!

Templa Voila – Spalten im Backend layouten und anordnen

Wenn man mit Templa Voila arbeitet, hat man backend-technisch schon einige Vorteile. Zum Beispiel ist auf Page-Template Ebene nur vorhanden, was auch mit Inhalt gefüllt werden kann. Es ist also schon “aufgeräumter” als das normal Layout des Backends wo ja standardmäßig immer die Spalten “left”, “normal”, “right” und “border” vorhanden sind.

Nun ist es aber auch in TV so, dass die Spalten standardmäßig immer die gleichen Ausmaße haben und je nach Reihenfolge beim anlegen des Mappings auch eine horizontale Anrichtung. Bei ein oder zwei Spalten ist das erstmal kein Problem. Hat man jedoch mehr Spalten wird es langsam aber sicher unübersichtlich.

Es gibt jedoch eine Lösung für dieses Problem. Man kann hier eigens Tabellen erstellen und die Spalten individuell anordnen. Das ganze funktioniert so:
Man muss in das XML des jeweiligen TV-Templates gehen und folgenden (hier beispiel-code) einfügen:

In diesem Beispiel werden die Felder ###field_eins### bis ###field_drei### in einer Tabelle angeordnet. Das Ganze muss in den “meta” Bereich eingestellt werden.
So lassen sich die Backendfelder aufteilen, mit Farben versehen und in Ihrer Breite anpassen.
Somit lässt sich das Backend für den Redakteur um einiges schöner und benutzerfreundlicher gestalten.

TemplaVoila – Tutorial Teil 1 – Templates erstellen und mappen

In den letzten beiden T3N-Magazinen (http://t3n.yeebase.comOpen Source und TYPO3) habe ich jeweils einen Artikel über das Arbeiten mit TemplaVoilà geschrieben und möchte euch hier die beiden Teile zur Verfügung stellen. Für Feedback und/oder Anregungen und Tipps bin ich dankbar!

Diese Einleitung soll es TemplaVoilà-Einsteigern ermöglichen, innerhalb kurzer Zeit eine Website mit TYPO3 und TemplaVoilà zu realisieren. Grundkenntnisse in TYPO3 und TypoScript werden vorausgesetzt, sind aber nicht zwingend notwendig. Jedoch wird in diesem Tutorial auf die eingebundenen TypoScript-Templates und die grundsätzlichen Funktionsweisen von TYPO3 nicht eingegangen.

Weiterlesen