Teaser_XH 1.2.1

für CMSimple_XH 1.5/1.6/1.7, CMSimple 4
mit den Online-Editoren: CKeditor, Tinymce oder Codeeditor


Teaser_XH fügt auf einer Seite mehrere div-Bereiche ein, die vorher im Plugin-Backend mit Inhalt gefüllt wurden. Ihnen kann ein interner oder externer Link zugeordnet werden, damit sie als Lockartikel für weitere Seiten dienen können. Mouse-over-Effekte sind für den ganzen Bereich möglich.

Durch Css-Stile können diese Teaser untereinander oder nebeneinander arrangiert werden. Anzahl und Reihenfolge der Teaser können im Plugin geändert werden. Verschiedene Teasergruppen können durch css unterschiedlich gestaltet werden. Die Backendbearbeitung der Teaser berücksichtigt nicht nur den speziellen css-Stil der Teasergruppe, sondern auch das Seitentemplate der Seite auf denen die Teasergruppe erscheinen soll.

Neu in Version 1.2

Neu in 1.1
Kopiermöglichkeit von Teasern.
Neu in 1.0
Teaser können zum Bearbeiten durch Klick auf den Vorschau-Teaser ausgewählt werden.

Anwendung

Im Text an gewünschter Stelle einfügen {{{PLUGIN:teaser();}}}, damit wird die Standard-Teaserdatei aufgerufen. Möchte man eine spezielle Teaserdatei aufrufen, fügt man ein: {{{PLUGIN:teaser('GEWÜNSCHTE_TEASER_DATEI');}}}

Über das Pluginmenü Teaser geht es direkt zur Bearbeitungsseite mit Online-Editor und dem zuletzt bearbeitetem Teaser. Darunter erscheint eine Vorschau der ganzen Teaserdatei, d.h. der Teasergruppe. Durch Klick auf einen Teaser wird dieser in den Editor geladen. Die Höhe des Editor ist in der Konfiguration einstellbar.

In einer Teaserdatei wird immer eine ganze Teasergruppe als fertiger HTML-Code gespeichert. So braucht das CMS keinen komplizierten Code auszuführen um die Teaser zu zeigen. Für die Bearbeitung der Teaser im Backend extrahiert das Plugin aus dem fertigen HTML-Code die Einzelteaser.

Die Standard-Teaserdatei ist teaser_XX.txt [XX = Sprachkürzel der eingestellten Sprache, z.b. "de"]. Ob man Standard-Teaserdatei oder teaser_XX.txt auswählt, ist egal. Weitere Teaserdateien können erzeugt werden, den eingegebenen Namen wird automatisch .txt angefügt, falls man das nicht schon selbst getan hat. Als Beispiel liegen die Dateien test.txt und test2.txt bei. Jeder Teaser-Gruppe ist ein Css-Stil zugeordnet, der über ein Optionsmenü gewechselt werden kann.

Links und Hintergrund

Man kann jedem Teaser einen Link und einen individuellen Hintergrund zuordnen. Der Button, um das Hintergrundmenü zu öffnen, wird nur gezeigt, wenn in der Konfiguration der Pfad zum entsprechenden Bildverzeichnis eingestellt wurde. Voreingestellt ist plugins/teaser/images/. Bildwiederholung, horizontale und vertikale Verschiebung oder Hintergrundfarben müssen neben der Bildauswahl eingetippt werden.

Das Bearbeitungsfester versucht Stil und Hintergrund des Templates zu übernehmen. Das funktioniert jedoch nur bei einfach aufgebauten Templates. Die Vorschau unter dem Bearbeitungsfenster zeigt das tatsächliche Ergebnis.

Mehrsprachige Websites: Bitte beachten, dass interne Links und Hintergrundbilder die auf einer Zweitsprache erstellt wurden, nur dort richtig funktionieren, da der Pfad zu den Hintergrundbildern von Zweitsprachen aus ein anderer ist als von der Hauptsprache. Teaser für Zweitsprachen deshalb in den Zweitsprachen bearbeiten, da sonst Links, Bilder und Hintergrundbilder nicht gefunden werden.

Teaser Css-Stile bearbeiten

Teaser_XH erzeugt als Basis einen die Teasergruppe umgebenden div-Bereich <div class="teaser STILNAME">. Die einzelnen Teaser sind zusätzlich von einem weiteren <div>-Bereich umgeben. Die Stilzuweisung läuft wie üblich über die Plugin-Datei stylesheet.css.

Einzelne Teaserstil-Klassen beginnen jeweils mit /*startSTILNAME*/ und enden mit /*endSTILNAME*/. Innerhalb dieses Bereichs werden die Eigenschaften der Stilklasse definiert, wobei jede Definition mit div.teaser.STILNAME div oder .teaser.STILNAME div beginnt.

Im Plugin sind einige Beispiel-Teaserstile enthalten.

Zu beachten: Da Browser css-Stildateinen auf Vorrat speichern (um Seiten schneller laden zu können), werden Änderungen an css-Dateien nicht gleich im Browser berücksichtigt. Deshalb kommt es vor, dass eine Änderung, die man an der Stylesheet.css gemacht hat, nicht auf der tatsächlichen Seite erscheint und stattdessen noch der alte Stil zu sehen ist. Die neuen css-Daten liegen dann zwar vor, aber der Browser ruft sie nicht ab. Dann die Seite noch einmal laden, um den Browser dazu zu bringen, die css.Datei neu einzulesen.

Hovereffekte bei Teaser

Der ganze Teaser kann als Link wirken. Diese globale Links stehen im fertigen HTML-am Anfang des Teasers in einem span Abschnitt vor dem eignetlichen Teaserinhalt. Anweisungen wie div.teaser.STILNAME div:hover a ~ h4 {. . .} bedeuten, dass der Hovereffekt für h4 Absätze gilt, wenn ein Globaler Link (div.teaser.STILNAME div a) im div vorhergeht. Hovereffekte auf Umrandungen o.Ä. werden erzeugt durch div.teaser.STILNAME div:hover span.teaser {. . .}

Seiten-Templates

Wenn man verschiedene Seiten-Templates nutzt, möchte man Teaser vielleicht auf einer Seite mit speziellem Template einbauen. Das kann schon bei der Bearbeitung und Vorschau des Teasers berücksichtigt werden.

In der Plugin Konfiguration kann man unter template change for specific teaserfiles für jede Teasergruppe ein eigenes Template und, wenn gewünscht, auch Morepagedata-Anweisungen (für Templateänderungen mit diesem Plugin) eintragen.

Die Eingabemethode ist wie folgt:
Teaserdateiname (nicht vergessen, diese Namen enden immer auf .txt, der Name der Standarddatei ist teaser_SPRACHKÜRZEL.txt), Semikolon, Templatename, und eventuell Semikolon und Morepagedataangaben. Für weitere Teaserdateien zuerst das Trennzeichen | eingeben und dann wie bisher vorgehen.

Zur Eingabe von Morepagedata-Angaben pro Angabe die entsprechende Morepagedata-Variable eintragen, aber ohne $, gefolgt von =, dem gewünschten Wert und diese Variablendefinition mit Semikolon abschließen. Werte selbst sollten natürlich weder '' noch = enthalten, da das Trennzeichen sind.

Beispiel:

teaser_de.txt;;wide=1;|test.txt;venedig
Hier gibt es zwei Teile, getrennt durch "bedeutet:|". Der erste Teil bedeutet: Die deutsche Standarddatei nutzt kein anderes Template, aber die Morepagedata-Änderung $wide soll angeschaltet sein (d.h. der Textbereich soll breiter als sonst sein). Der zweite Teil bedeutet: Bei der Templategruppe test.txt soll das Seiten-Template "venedig" während der Bearbeitung im Teaser-Backend benutzt werden.

Verschiedenes

Speicherort für Teaserdateien

Man kann zwischen drei Speicherorten wählen

Schreibrechte

Je nach Serverkonfiguration muss man eventuell Schreibrechte erteilen, und zwar dem data-Ordner und seinen Dateien, ebenso languages, css und config.