Contao-News

Wir informieren Dich hier regelmäßig zu Updates, stellen Best-Practice-Arbeiten vor und berichten über Aktuelles aus dem Contaoversum.

Daten im Layout einbinden (mit RTE pflegbar)

– Aus der Praxis

Im Juni erklärte ich, wie man einen Copyright-Hinweis ohne Template-Änderungen im Fußbereich einer Webseite hinterlegt. Diesmal möchte ich zeigen, wie man im Fußbereich auch z.B. die Kontaktdaten sowie Öffnungszeiten übergreifend für alle Seiten einfügt und für Redakteure mit dem RTE pflegbar macht.

Für dieses Beispiel habe ich folgende Anforderungen:

  1. Die Daten werden so hinterlegt, dass Redakteure sie wie gewohnt mit dem Rich Text Editor verändern können.
  2. Keine Extensions, sondern nur Einsatz von On-Board-Mitteln.
  3. Das Haupt-Template wird nicht angerührt. Das spart Zeit beim Updaten, da man dann dieses Template nicht kontrollieren muss.
  4. Die Angaben werden nur einmalig hinterlegt, so dass Änderungen daran sofort für alle Seiten wirken.

Anleitung

1. Schritt: Infoseite anlegen

Zuerst benötigst du eine Seite auf der die Kontaktdaten und Öffnungszeiten für die Redakteure als normale Inhaltselemente hinterlegt werden.

Erstelle dazu am Ende der Seitenstruktur der Website eine neue Seite vom Typ „Reguläre Seite” und dem Seitenname „Zusätzliche Informationen”. Klicke bei den Experteneinstellungen in die Checkbox bei „Im Menü verstecken” und wähle aus dem „In der Sitemap anzeigen”-Dropdown den Wert „Nie anzeigen” aus. Klicke danach abschließend in die Checkbox bei „Seite veröffentlichen” und betätige den Button „Speichern und Schließen”.

2. Schritt: Kontaktdaten und Öffnungszeiten anlegen

Nun hinterlegen wir die Kontaktdaten und Öffnungszeiten in der soeben angelegten Seite. Wechsle dazu in die Artikelansicht und lege im Artikel der Seite „Zusätzliche Informationen” zwei Text-Inhaltselemente an.

In das erste Inhaltselement fügst du die Kontaktdaten ein und vergibst in den Experteneinstellungen die CSS-ID „adressdaten”. In das zweite Inhaltselement fügst du die Öffnungszeiten ein und vergibst in den Experteneinstellungen die CSS-ID „oeffnungsdaten”.

Notiere dir dann die Element-IDs der beiden Inhaltselemente. Du findest sie heraus, indem du beim jeweiligen Element auf das Elementdetails-Symbol klickst.

3. Schritt: Datenmodul anlegen

Jetzt erstellen wir ein Modul in das wir die beiden Inhaltselemente verknüpfen.

Klicke dazu in der Backend-Navigation auf Layout > Themes und klicke beim gewünschten Theme auf das Frontend-Module bearbeiten-Symbol. Erstelle darin ein neues Modul mit dem Modultyp „Eigener HTML-Code” und dem Modulnamen „Layout: Infodaten für Footer”. In das Feld für den HTML-Code schreibst du:

<!-- indexer::stop -->
{{insert_content::10}} 
{{insert_content::11}}
<!-- indexer::continue -->

Ich habe jetzt die ID 10 und 11 für dieses Beispiel gewählt. Du musst natürlich stattdessen die beiden IDs nutzen, die du dir zuvor von den zwei Text-Inhaltselementen notiert hast.

4. Schritt: Modul in das Seitenlayout einbinden

Nun müssen wir nur noch das Modul in das Seitenlayout einbinden.

Klicke dazu in der Backend-Navigation auf Layout > Themes und klicke beim Theme auf das Seitenlayout bearbeiten-Symbol. Klicke nun beim ersten darin hinterlegten Seitenlayout auf das Bearbeiten-Symbol. Klicke beim Abschnitt „Eingebundene Module” bei der letzten Reihe auf das Duplizieren-Symbol. Wähle in der so neu angelegten Reihe beim ersten Dropdown das bei Schritt 3 angelegte Modul „Layout: Infodaten für Footer” und beim zweiten Dropdown die Fußzeile aus.

Bestätige die Ergänzung mit einem Klick auf den „Speichern und schließen”-Button. Wiederhole diesen Schritt bei allen anderen Seitenlayouts bei denen du die Daten im Fußbereich anzeigen möchtest.

Fazit

Die Kontaktdaten und Öffnungszeiten werden nun auf den Seiten im Fußbereich ausgegeben. Da sie jeweils eine eigene ID (adressdaten und oeffnungsdaten) haben, kannst du sie nun abschließend noch via CSS stylen und so ein wenig Aufhübschen. Da die eigentlichen Inhalte normal als Inhaltselemente angelegt wurden, können Redakteure sie in gewohnter Weise und in ihrer üblichen Arbeitsumgebung bei Bedarf verändern.

PS: Natürlich kannst du mit dieser Methode noch ganz andere Inhalte einfügen. Diese Anleitung zeigt nur beispielhaft das Zusammenspiel zwischen Insert-Tags für Inhaltselementen, Modulen und Seitenlayouts.

Alle News anzeigen

Kommentare

Kommentar von Andreas Burg |

Ich mache das auch so ähnlich. Die Extra-Seite nenne ich Resources. Ich wollte nur noch angemerkt haben, dass man diese Extra-Seite noch nicht einmal veröffentlichen muss, wichtig ist nur, dass die Artikel auf ihr veröffentlicht sind. Und dann noch, dass man noch flexibler ist, wenn man direkt den Insert-Tag {{insert_article::ID}} benutzt, dann haben die Redakteure zusätzlich die Möglichkeit Inhaltselemente hinzuzufügen, od. zu löschen und neu anzulegen, ohne dass man das Modul Eigener HTML-Code verändern muss. Ich nutze diese Möglichkeit für den Header und den Footer, also auf der Seite Resources habe ich einen Artikel 'Header' und einen Artikel 'Footer'.

Gruß Andreas

Kommentar von Leo Unglaub |

Hallo Nina,
netter Artikel, jedoch würde ich gerne noch wissen wie deine Kunden das aufnehmen dass auf einmal ein Teil im Seitenbaum drin ist der nun doch nicht ein Teil der Webseite ist. Meine Kunden hat so was immer verwirrt. Daher finde ich den Weg wie letztens über die Module einfacher und logischer. Wenn du deinen Kunden dort trotzdem den Editor bieten willst, füge einfach folgende Zeile in die dcaconfig.php ein:

$GLOBALS['TL_DCA']['tl_module']['fields']['html']['eval']['rte'] = 'tinyMCE';

Solltest du den grafischen Editor nur bei ein paar bestimmten Modulen haben wollen so kannst du den oberen Code erweitern und folgendes in die dcaconfig.php einfügen:

$this->Import('Input');
$arrAllowedModules = array(2,4,9);

if (in_array($this->Input->get('id'), $arrAllowedModules))
{
$GLOBALS['TL_DCA']['tl_module']['fields']['html']['eval']['rte'] = 'tinyMCE';
}

In $arrAllowedModules schreibst du einfach die ID's rein welche den Benutzerfreundlichen Editor haben sollen.

Viele Grüße
Leo


Anmerkung von Nina:

Meine Kunden schätzen das so sehr, da sie alles an einem Ort finden und zudem auf alle Inhaltselemente zugreifen können. Die von dir beschriebene Methode ist ein weiterer Weg — das ist ja das schöne an Contao, viele Lösungen so dass man die Methode wirklich an die jeweilige Situation anpassen kann. Lächelnd

Kommentar von x-ray |

Danke Nina. Dieser Tipp ist genial. Das werde ich in meinen Projekten gleich umsetzen, damit die Autoren das auch allein ändern können :-)

Kommentar von Frank Berger |

Super Tipp. Daran bin ich schon oft "gescheitert" und habe dann eine Lösung via Modul gemacht. Allerdings geben ich dem Kunden die Module ungern frei, da hier schnell was zerschossen ist. So können Sie es jetzt bequem selbst bearbeiten.

Einen Kommentar schreiben

Bitte rechnen Sie 5 plus 6.