Flexslider_XH 0.2

by svasti

Benötigt php 5

Getestet mit CMSimple_XH 1.6.2

Dieses Plugin integriert das jQuery-Plugin Flexslider 2.2.2 von Tyler Smith (veröffentlich von WooThemes) in CMSimple_XH. Die Markdown zu HTML Umwandlung nutzt den Parsedown-Parser von Emanuil Rusev.

Update 0.1->0.2

Über bestehendes Plugin installieren und anschließend im Backend Plugin aktivieren. Die Bildliste von Version 0.1 der aktiven Sprache wird dann eingelesen und ins neue Format konvertiert. Bildlisten anderer Sprachen von der jeweiligen Sprache aus konvertieren. Löschen des $plugin_cf['flexslider']['version']-Wertes reaktiviert die Aktivierungsmöglichkeit.

Schreibrechte

Falls Sie normalerweise Schreibrechte vergeben müssen, am besten schon vor der Aktivierung Rechte für Ordner und Dateien von plugins/flexslider/languages/ und plugins/flexslider/config/ geben. (Mehr dazu siehe update.txt.)

Anwendung im Seitenbereich

Mehrere Flexslider nutzen

Dazu zuerst eine neue Flexslider-Bildlisten-Datei anlegen. Dazu oben in der Dateiauswahl (wo normalerweise "Standardbilddatei" steht) auswählen: neue Bilddatei erstellen. Das Plugin fragt dann nach einem Namen; einen Namen ohne Umlaufe eingeben und abschicken, (vorhandene Dateien mit gleichem Namen werden ohne Warnung überschrieben,) danach wird mit diesem Namen eine neue Bilddatei eröffnet.

Je nachdem wie viele Bilder man im Flexslider haben will, zuerst mit Elem. hinzufügen Leerbilder hinzufügen und anschließend diese Leerbilder mit Bildern versehen.

Dazu erst auf ein Leerbild klicken – das Leerbild wird dann rot umrandet – und dann einen Bildnamen anklicken. Die Voreinstellung im Plugin (kann man abstellen) ist, dass der rote Rand gleich zum nächsten Leerbild springt. So kann man die gewünschten Bilder ziemlich schnell einfügen. Anschließend Animation etc. einstellen und sichern. Alternativ auf Vorschau klicken; vor dem Anzeigen der Vorschau wird automatisch gesichert.

Dann auf der gewünschten Seite mit {{{flexslider('Dateinamen');}}} aufrufen. Mehrere Slider konnen auf einer Seite laufen, jedoch wird die Animation all dieser Slider vom ersten Slider festgelegt :-(

Flexslider-Elemente, die Text ohne Bild enthalten

Die Texteingabezeile vergrößert sich automatisch mit dem eingegebenen Text. Enthält ein Element ein Bild, wird in der Textzeile die Eingabe einer neuen Zeile automatisch als HTML-Zeilenumbruch interpretiert. Lässt man das Bildfeld leer, wird hingegen die Texteingabe als in Markdown-Syntax geschrieben interpretiert. Ein komplexes Layout wird damit möglich. Mehr über die Markdown-Syntax findet man im Internet, z.B. hier. Einige Beispiele:

Eingabe
im Textfeld
Von Markdown generierter
Code (unsichtbar)
Sichtbare Darstellung
im Flexslider
Überschrift =========== ##### Überschrift h5 Dies ist ein Absatz Dies ist ein weiterer Absatz - Dies ist eine - Punkteliste 1. Dies eine 2. nummerierte Liste [here](?Start) klicken = Link zur Startseite <h1>Überschrift</h1> <h5>Überschrift h5</h5> <p>Dies ist ein Absatz</p> <p>Dies ist ein weiterer Absatz</p> <ul> <li>Dies ist eine</li> <li>Punkteliste</li> </ul> <ol> <li>Dies eine</li> <li>nummerierte Liste</li> </ol> <p><a href="?Start">hier</a> klicken = Link zur Startseite</p>

Überschrift

Überschrift h5

Dies ist ein Absatz

Dies ist ein weiterer Absatz

  • Dies ist eine
  • Punkteliste
  1. Dies eine
  2. nummerierte Liste

hier klicken = Link zur Startseite

Probleme in Templates mit umfangreichen oder mehreren Stylesheets

Manche Template haben sehr weitreichende detaillierte Anweisungen, die sich auf Flexslider unerwünscht auswirken. Andere laden im Template Stylesheets nach und überschreiben damit das Flexslider Stylesheets. Eine Gegenmaßnahme ist, genau am Ende des Head-Bereichs im Template, also vor </head>, überschriebene Flexslider css-Angaben noch einmal einzufügen. Bei Templates von Torsten Behrens muss man z.B. einfügen:
<style> .flexslider ul {margin:0;padding:0;} .flexslider ul > li:before {content:"";content:none;} .flex-control-paging li a {margin:0 5px;} </style> Bei derartigen Problemen gilt es, mit den css-Angaben zu experimentieren und immer mal wieder mit der Ausgabe in anderen Templates zu vergleichen. Bleiben die Probleme bestehen, könnten Sie erwägen den Template-Programmierer oder im CMSimpleforum um Rat zu fragen.

Anwendung in Template oder Newsbox

Da das Plugin jQuery nutzt, muss zuerst jQuery aufgerufen werden. Dazu in den Head-Bereich des Templates einfügen <?php flexslider_init();?> und in der Plugin-Konfiguration anklicken, dass das Plugin in Template oder Newsbox genutzt wird.
Dann in Newsbox wie im normalen Text einfügen, und im Template mit <?php echo flexslider();?>.
(Einbindung im Template basiert auf Tipps von cmb.)

Design-Änderungen durch Änderungen der flexslider/css/stylesheet.css

Flexslider-Größe

Flexslider nimmt standardmäßig die ganze Breite des Textbereichs ein. Man kann die Ausgabe verkleinern, indem man in der plugin/css/stylesheet.css die Zeile .flexslider {margin: 0; padding: 0;} erweitert zu etwa .flexslider {margin: 0; padding: 0; width:50%;}

Aussehen des Bildtextes

Das Aussehen des Bildtextes wird durch .flex-caption zusammen mit der ausgewählten Textdarstellung bestimmt, d.h. .flex-normal, .flex-inverted oder .flex-overlay und den anschließenden a:hover-Werten. Möchte man beispielsweise einen kleineren Overlay-Bereich, kann man width: 96%;padding: 2%; aus .flex-overlay löschen.

Eckige Buttons in der Navigationsliste

Unter .flex-control-paging li a löschen border-radius: 20px;.