Willkommen zu Teaser_XH 1.1

für CMSimple_XH ab Version 1.5
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.

Update
Version 1 –> 1.1

admin.php, version.nfo, language und help-Ordner austauschen und die neue metaconfig.php in den config-Ordner einfügen. Die css/stylesheet.css kann auch ausgetauscht werden, falls man dort keine eigenen Stile eingetragen hat.

Beta-Version –> 1.1

Die data- und config-Ordner bestehen lassen und alles andere über die alten Dateien installieren. In config.php die Zeile $plugin_cf['teaser']['selectable_teaser_stylesheets']="rounded;fullwidth;row_of_3;fixed_width"; löschen, und die Zeile $plugin_cf['teaser']['background_images']="plugins/teaser/images/"; hinzufügen sowie Zeile (falls nicht vorhanden) $plugin_cf['teaser']['background_images']="plugins/teaser/images/";. Bei Update von der alpha-Version in config.php noch die Zeile $plugin_cf['teaser']['editor_height']="300"; hinzufügen. Alternativ einfach die neue config.php installieren und Werte neu eingaben.

Bei der stylesheet.css-Datei sind wichtige Verbesserungen für die Hover-Funktion hinzugekommen. Am besten eventuell gemachte Änderungen neu einkopieren. Eine editor.css wird nicht mehr genutzt und kann gelöscht werden.

Anschließend zum Plugin Backend gehen. Die Standard-Teaser haben jetzt wahrscheinlich ihre Design verloren. Speichern, und danach kommt das Design zurück.

Neu in Version 1.1
Angepasst an CMSimple_XH 1.6, Kopierfunktion hinzugefügt. CKeditor akzeptiert (ab 1.0.5) Speichern mit der normalen Schaltfläche.

Neu in Version 1
Teaser können zum Bearbeiten durch Klick auf den Vorschau-Teaser ausgewählt werden. Die bisherige Auswahl über Radio-Buttons funktioniert ebenfalls. Hovereffekte gibt es jetzt nur noch, wenn ein Teaser tatsächlich mit einem Link versehen ist. Individuelle Hintergrundbilder und Farben einzelner Teaser nun auch im Bearbeitungsfenster sichtbar.

Neu in Version beta 2:
Teasern können individuelle Hintergründe zugeordnet werden. Teasergruppen haben jetzt immer einen speziellen Css-Stil und dieser wird ständig angezeigt. Statt mehrerer Css-Dateien jetzt nur noch eine einzige stylesheet.css.

Neu in Version beta:
Bessere Übersicht durch ständige Vorschau der Teasergruppe unterhalb des Editorfensters.

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 auf Teaser mit globalen Links begrenzen

Die Beispiele zeigen entsprechende css-Anweisungen, z.B. div.teaser.fullwidth div:hover a ~ h4 d.h. der Hovereffekt gilt für h4 Absätze, wenn ein Globaler Link (div.teaser.STILNAME div a) im div vorhergeht. Da der globale Link in einem span Abschnitt steht, kann man das für Umrandungen o.Ä. des ganzen Teasers nutzen, z.B. div.teaser.row_of_2 div:hover span.teaser {Anweisungen}

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.