Dienstag, 22. Juli 2014

Einfache Integration von Seitenteasern

TYPO3 Extension form4_teaser

Teaser

Der englische Begriff Teaser steht für einen Hinweis, der ein Thema "anreizt" und damit das Interesse an weiteren Details zu dem angesprochenen Thema wecken soll. Webseiten greifen dies auf, indem je nach Ausrichtung Themen auf Übersichtseiten mit Teasern, dynamisch oder manuell, interessante Details der Seite "anteasern".

Die TYPO3 Extension form4_teaser

TYPO3 erlaubt die Aufteilung von Seiten in bestimmte Seitentypen (doktypes), damit bietet sich hier für eine klare Trennung der Inhalte, die Aufteilung in eigene Seitentypen wie Seiten für News, Events u.a. an. Da sich diese Seitentypen durch Icons im Backend von TYPO3 kenntlich machen lassen, erlaubt dies auch für Redakteure eine klare Übersicht über die gepflegten Daten, ohne dass direkt die Daten der jeweiligen Seite aufgerufen werden müssen.

Teaser können innerhalb einer Webseite auf vielfache Art und Weise im Frontend präsentiert werden, von einer einfachen Linkliste bis zur Bildergallerie oder einer Bühnenansicht. Geschieht die Auswahl der Seiten dynamisch, so muss sich der Redaktuer nur noch um die Pflege des Contents aber nicht mehr um die Integration innerhalb der Webseite kümmern. So pflegt der Redaktuer nur die Detailseite und die Übersichtsseite oder Listenansicht wird durch den dynamischen Teaser dann umgehend erzeugt.

Die Extension form4_teaser greift auf die Seiten-Struktur zurück, indem sie prüft ob Seiten für die aktuelle Ansicht vorliegen, die Information wie z.B. Teasertext und Preview-Bild auswertet und dann die selektierten Daten einer Seite entsprechend eines ausgewählten Layouts im Frontend ausliefert.

Installation der Extension

Die Einbindung der Extension erfolgt wie gewohnt im Extension Manager. Als Abhängigkeit wird auch die Extension form4_pages installiert, die einerseits Tools zur Defintion von eigenen Doktypes mitbringt und andererseits als Basis-API für die form4_teaser auch Model und Repository für Seiten und Doktypes bereitstellt. 

Danach müssen wie gewohnt die statischen Templates für form4_pages und form4_teaser eingebunden werden.

Jetzt kann an beliebiger Stelle das Plugin eingebunden werden.

Pflege von form4_teaser

Hat man das Plugin über das Backend eingepflegt so sieht man zunächst 2 Tabs: Pages und Layout.

Im Pages Tab wird bestimmt, wie die Seiten für den Teaser ausgewählt werden. Hier gibt es eine Vielfalt an Einstellungen, die je nach Bedarf eingeblendet werden. Für eine detaillierte Übersicht zu den einzelnen Optionen sollte man die Anleitung der Extension prüfen.

Im mittleren Bereich lässt sich aber sofern gewünscht, die Auswahl auf Doktypes begrenzen. In unserem Beispiel werden aktuell nur die Standard-Seitentypen von TYPO3 angezeigt, weitere wären aber wie bereits erwähnt jederzeit möglich.

Die Ansicht des Pages Tab zum Beginn der Einrichtung:

Im Layout Tab lässt sich das Aussehen des Teasers anpassen, wenn dies in den Fluid-Templates des jeweiligen Teasers berücksichtigt wurde.

Dazu gehören ein "additonal link" , der auf z.B. auf eine weitere Detailseite oder eine Externe Seite verweisen kann und einmal für alle Teaser insgesamt an die Teaserlsite angehängt wird.  Ein "more" link unterhalb der Teaser-Links kann ggf. auch eingeblendet werden. Ein Paging kann ober- und/oder unterhalb der Teaserliste eingebunden werden.

Die verschiedenen Teaser-Layouts

Von Hause aus bringt form4_teaser 3 Layouts mit. Diese dienen auch als Beispiele für die eigene Umsetzungen von Teasern. Dass diese Teaser per default keine CSS Styles haben, erlaubt eine flexibele Einbindung und Anpassung in ein Design.

Layout 1: TextPic - ein Text Bild Teaser

Das Bild wird aus den Resources genommen und der Text aus dem Abstrakt der Seite und verlinkt auf die entsprechende Seite. Der Linktitle ist der Title der jeweiligen Seite. Hier die initiale Darstellung ohne die Pflege von CSS:

Layout 2: Text - Ein reiner Text Teaser

Auch hier wird der Text des Teasers aus dem Feld Abstrakt bezogen:

Layout 3: Linklist - Ein einfache Liste von Links

Eine Liste von Links, die auf die Detailseiten verweisen. Hier wird nur der Title der Zielseiten herangezogen:

Eigene Teaser mit form4_teaser umsetzen

Für die Umsetzung müssen 2 Aspekte berücksichtigt werden:

  • Das Template
  • Einbindung des neuen Layouts in form4_teaser

Zunächst kopiert man die Templates von form4_teaser an eine beliebige Stelle. Diese kann entweder unterhalb von fileadmin oder auch innerhalb einer eigenen Extension sein. Kopiert werden die Verzeichnisse inklusive der enthaltenen Unterordner:

  • Resources/Private/Layouts
  • Resources/Private/Partials
  • Resources/Private/Templates

Dann müssen die Pfade in den Constants angepasst werden:

Dieses Dateien können in eine Extension eingebettet sein. Hier sollten dann die Anpassungen an der Konfiguration vorgenommen werden. 

Registrieren kann man eigene Teaser in der gleichen Datei dann z.B. mit:

\FORM4\Form4Teaser\Utility\ConfigurationUtility::addFluidLayout('Teaser/Topmodell', $_EXTKEY, FALSE);
\FORM4\Form4Teaser\Utility\ConfigurationUtility::addFluidLayout('Teaser/Product', $_EXTKEY, FALSE);

Die Namen der Layouts die in den oberen 2 Zeilen notiert sind (Topmodell & Product), bilden die Basis für die Benamung der Locallang-Labels und der Templates, die im kopierten Layouts/Teaser Folder angelegt werden müssen

Möchte man die 3 Standard Layouts entfernen , so können diese Layouts in der eigenen Extension in ext_localconf.php mit folgenden 3 Zeilen entfernt werden:

\FORM4\Form4Teaser\Utility\ConfigurationUtility::removeFluidLayout('Teaser/Linklist');
\FORM4\Form4Teaser\Utility\ConfigurationUtility::removeFluidLayout('Teaser/TextpicDefault');
\FORM4\Form4Teaser\Utility\ConfigurationUtility::removeFluidLayout('Teaser/Text');

Für obiges Beispiel sollten jetzt die Fluid-Template-Dateien "extension/Ressources/Layouts/Teaser/Topmodell.html" und "Layouts/Teaser/Product.html" angelegt werden. Bei dem Aufbau der FLUID-Templates sollte man sich an den bereits bestehenden Partials und Layouts orientieren.

Für die Locallang Labels gibt es bassierend auf den Namen folgende Vorgabe in der extension/Resources/Private/Language/locallang_db.xlf:

(teaser.fluid_layout_teaser_dernameinkleinbuchstaben.label)

<trans-unit id="teaser.fluid_layout_teaser_topmodell.label">
    <source>Topmodell</source>
</trans-unit>
<trans-unit id="teaser.fluid_layout_teaser_product.label">
     <source>Product</source>
</trans-unit>

Damit sind die Templates integriert und können im Frontend aufgerufen werden.

comments powered by Disqus