Bildergalerien in 2 Varianten

Auf unserer Homepage können über 2 verschiedene Plugins Bildergalerien dargestellt werden. *der nachfolgende Text wurde aus der Anleitung des Entwickler (www.bretteleben.de) übernommen*:

1. Variante: Über das plugin "vsig" kann man Bildergalerien mit Thumbnails einfügen (siehe Beispiel: past rhymelights in Englisch).

Der Code, der in einen Beitrag einzufügen ist, besteht aus dem Aufruf selbst {*vsig}{/vsig*} (ohne die Sterne) und enthält den Namen des Ordners, in dem wir sich die Bilder befinden (müssen vorher hochgeladen werden). Der eingestellte Pfad zum Hauptordner (imageroot), also per Default "/images/stories/" wird vom Plugin automatisch ergänzt und ist nicht mit anzugeben.

Um einen Ordner in einem Unterordner zu verwenden, wird sinngemäß der Pfad unterhalb des eingestellten Hauptordners (per default "/images/stories/") angegeben, also zum Beispiel für den Ordner "/images/stories/ordner/unterordner":

{*vsig}ordner/unterordner{/vsig*} - ohne die Sterne

An sich war es das und die Galerie ist einsatzfertig. vsig="very simple image gallary"...

Bilder hochladen:
  • bitte die Größe vorher "webtauglich" anpassen - 500 Pixel Breite reichen aus, weil ja auch die Galerie nur 500 Pixel breit ist (geht gut in irfanview für mehrere Bilder gleichzeitig)
  • weil die Bilder in alphabetischer Reihenfolge angezeigt werden, die Bilder bei Bedarf umbenennen
  • Im Editor-Fenster auf "Bild einfügen" (untere Zeile) gehen, dann öffnet sich der Bild-Manager
  • in einen passenden Ordner wechseln und dort ein neues Unterverzeichnis erstellen
  • im Bildmanager am rechten Rand Mitte ist der Button für den Upload vom eigenen PC - hier können dann Bilder im jpg-, gif- und png-Format hochgeladen werden

...und man hat noch mehr Möglichkeiten: 

Eine ausführliche Anleitung dazu ist hier zu finden.

Im oben genannten Link sind auch noch andere Anwendungsbeispiele zu finden (über das Menü links) - man hat da verschiedene Möglichkeiten, mit zusätzlicher Angabe von Parametern das Aussehen zu ändern. Hier zur Info für die gewünschten Anpassungen die Grundeinstellungen des plugins auf unserer Homepage zusammen mit einer kurzen Erläuterung:
  • Gallery width: 500 - Breite der gesamten Galerie in Pixel (ganze Zahl)
  • max. Image height: 450 - maximale Höhe der Bilder in Pixel; mögliche Werte: leer (gesamte Breite ausnützen), (ganze Zahl)
  • Image quality: 80 - Qualität der Bilder in Prozent (ganze Zahl von 1-100)
  • Align the gallery: Mitte - Ausrichtung der Galerie im Artikel; mögliche Werte: 0 (rechts), 1 (mitte), 2 (links), 3 (float left), 4 (float right)
  • Thumbnail width: 135 - Breite der Thumbnails in Pixel (ganze Zahl)
  • Thumbnail height: 110 - Höhe der Thumbnails in Pixel (ganze Zahl)
  • Crop thumbnails: keep proportions - Sollen die Thumbnails proportional skaliert oder beschnitten werden; mögliche Werte: keep (proportional), crop (beschnitten)
  • Image thumbnail quality: 80 - Qualität der Thumbnails in Prozent (ganze Zahl von 1-100)
  • Space between thumbs: 3 - Platz zwischen den Thumbnails (ganze Zahl in Pixel)
  • Thumbnails are shown: Justified - below the image (0) - Lage der Thumbnails; mögliche Werte: 0 (unten), 1 (rechts), 2 (unten und am rechten Bildrand ausgerichtet)
  • Place for thumbnails in percent of gallery width: 30 - Prozent der Gesamtbreite reserviert für die Thumbnails (ganze Zahl von 1-100) z.B.: 30
    Hinweis: nur relevant wenn die Thumbnails rechts angezeigt werden
  • Sort order: A-Z - Sortierung der Bilder; mögliche Werte: 0 (A-Z - DEFAULT), 1 (Z-A), 2 (alt-neu), 3 (neu-alt), 4 (zufällig)
  • Use sets of size: 3 - Zahl der Thumbnails je Set unterhalb vom Galeriebild
  • Label sets: Serie
  • Link/button forward: - Wert für das Kontrollelement "Vor"; mögliche Werte: leer (Standardbutton); beliebiger Text; Dateiname eines Buttons
  • Link/button backward:  - Wert für das Kontrollelement "Zurück"; mögliche Werte: leer (Standardbutton); beliebiger Text; Dateiname eines Buttons (siehe Plugin Howto)
  • Show captions? Ja - Captions anzeigen; mögliche Werte: 0 (nein), 1 (ja)
  • Position of captions? Below - Position der Captions; mögliche Werte: 0 (unter dem Hauptbild), 1 (überblendet über das Hauptbild)
  • Use links? Ja - Links anzeigen; mögliche Werte: 0 (nein), 1 (ja)
  • Image root: /images/stories/
  • Buttonfolder: /images/stories/vsig_buttons/
  • Use JavaScript? Ja - soll JavaScript verwendet werden; mögliche Werte: 0 (nein), 1 (ja)
  • Foldername as ID? Nein - Name des Ordner als Identity des obersten DIV-containers; mögliche Werte: 0 (nein), 1 (ja)


Dann gibt es noch eine 2. Variante: die Bretteleben.de Simple Image Slideshow - hier werden einfach die Bilder der Reihe nach mit automatischem Wechsel und paralleler Weiterschaltemöglichkeit dargestellt.

(Hinweise zum Bilder hochladen siehe oben = analog zu "very simple image gallery".)

Das "Simple Picture Slideshow" Plugin wird aus dem jeweiligen Artikel aufgerufen. Dabei gibt es - neben der Wahl des Ordners, in dem die Bilder liegen - weitere Möglichkeiten, die Slideshow aufzuwerten oder zu gestalten.

Der Code besteht aus dem Aufruf selbst {*besps}{/besps*} (ohne die Sterne) und enthält den Namen des Ordners, in dem wir gerade die Bilder abgelegt haben. Der Pfad zum Ordner, also "/images/stories/" wird vom Plugin automatisch ergänzt und ist nicht mit anzugeben.

Um einen Ordner in einem Unterordner zu verwenden, wird sinngemäß der Pfad unterhalb von "/images/stories/" angegeben, also zum Beispiel für den Ordner "/images/stories/ordner/unterordner":

{*besps}ordner/unterordner{/besps*} - ohne die Sterne

Ein Aufruf sieht also zum Beispiel so aus:
{*besps}klassen/20nn/bilder/xyz{/besps*} - ohne die Sterne

An sich war es das und die Slideshow ist einsatzfertig.

Eine ausführliche Anleitung findet Ihr beim Entwickler www.bretteleben.de.