|
Übersicht über die Möglichkeiten des Aufrufs direkt aus dem Artikel.
Das "Very Simple Image Gallery" Plugin wird aus dem jeweiligen Artikel aufgerufen. Dabei gibt es - neben der Wahl des Ordners, in dem die Bilder liegen - weitere Möglichkeiten, die Galerie aufzuwerten oder zu gestalten.
A.) Die Galerie selbst
Der Code besteht aus dem Aufruf selbst {*vsig}{/vsig*} (ohne die Sterne) und enthält den Namen des Ordners, in dem wir gerade die Bilder abgelegt haben. Der eingestellte Pfad zum Ordner (imageroot), also per Default "/images/stories/" wird vom Plugin automatisch ergänzt und ist nicht mit anzugeben.
Ein Aufruf sieht also zum Beispiel so aus
{*vsig}verysimple{/vsig*} - ohne die Sterne
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.
B.) Parameter Overrides
Beginnend mit Version 1.3 bietet die "Very Simple Image Gallery" die Möglichkeit, nahezu alle im Konfigurationspanel des Plugins gesetzten Werte direkt im Aufruf zu überschreiben. Damit können verschiedenst gestaltete Galerien erstellt werden. Hat man zum Beispiel voreingestellt, dass die Thumbnails unten angezeigt werden soll, dann kann man sie im Aufruf auch nach rechts verschieben. Man kann verschieden breite und hohe Galerien erstellen, mit verschieden breiten und hohen Thumbnails, etc. etc.
Dazu wird der Aufruf des Plugins um die benötigten Parameter erweitert. Diese folgen dem Ordnernamen, von diesem und untereinander jeweils getrennt durch einen vertikalen Trennstrich und haben das Format PARAMETER=WERT:
Übersicht über die möglichen Parameter:
width - Breite der gesamten Galerie in Pixel (ganze Zahl) z.B.: 600 height - maximale Höhe der Bilder in Pixel; mögliche Werte: leer (gesamte Breite ausnützen), (ganze Zahl) z.B.: 600 imquality - Qualität der Bilder in Prozent (ganze Zahl von 1-100) z.B.: 90
align - Ausrichtung der Galerie im Artikel; mögliche Werte: 0 (rechts), 1 (mitte), 2 (links), 3 (float left), 4 (float right)
twidth - Breite der Thumbnails in Pixel (ganze Zahl) z.B.: 80
theight - Höhe der Thumbnails in Pixel (ganze Zahl) z.B.: 60 crop - Sollen die Thumbnails proportional skaliert oder beschnitten werden; mögliche Werte: keep (proportional), crop (beschnitten), quality - Qualität der Thumbnails in Prozent (ganze Zahl von 1-100) z.B.: 80
space - Platz zwischen den Thumbnails (ganze Zahl in Pixel) z.B.: 3
right - Lage der Thumbnails; mögliche Werte: 0 (unten), 1 (rechts), 2 (unten und am rechten Bildrand ausgerichtet)
area - 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 - Sortierung der Bilder; mögliche Werte: 0 (A-Z - DEFAULT), 1 (Z-A), 2 (alt-neu), 3 (neu-alt), 4 (zufällig)
sets - Zahl der Thumbnails je Set
setstxt - Bezeichnung der Sets
cfwd - Wert für das Kontrollelement "Vor"; mögliche Werte: leer (Standardbutton); beliebiger Text; Dateiname eines Buttons (siehe Plugin Howto)
cbwd - Wert für das Kontrollelement "Zurück"; mögliche Werte: leer (Standardbutton); beliebiger Text; Dateiname eines Buttons (siehe Plugin Howto)
caps - Captions anzeigen; mögliche Werte: 0 (nein), 1 (ja)
inout - Position der Captions; mögliche Werte: 0 (unter dem Hauptbild), 1 (überblendet über das Hauptbild)
links - Links anzeigen; mögliche Werte: 0 (nein), 1 (ja)
script - soll JavaScript verwendet werden; mögliche Werte: 0 (nein), 1 (ja)
folderid - Name des Ordner als Identity des obersten DIV-containers; mögliche Werte: 0 (nein), 1 (ja)
Beispiele:
{*vsig}verysimple|width=600|right=2{/vsig*} - ohne die Sterne Ungeachtet der Voreinstellungen wird diese Galerie mit einer Breite von 600 Pixel (width=600) angezeigt. Die Thumbnails sind unter dem Hauptbild und werden mit diesem rechtsbündig ausgerichtet (right=2) {*vsig}verysimple|width=600|right=1|area=40{/vsig*} - ohne die Sterne Breite 600 Pixel (width=600), Thumbnails rechts (right=1), Platz für Thumbnails 40% von 600 (area=40)
{*vsig}verysimple|twidth=80|theight=60|space=3|quality=80{/vsig*} - ohne die Sterne Die Thumbnails sind 80 Pixel breit (twidth=80), 60 Pixel hoch (theight=60), zwischen den Thumbnails sind jeweils 3 Pixel (space=3) und sie werden mit 80% der möglichen Qualität erzeugt (quality=80)
Hinweise:
Die Parameter entsprechen den Parametern im Konfigurationspanel des Plugins und sind auf der Seite Anleitung Plugin ausführlich erläutert. Der erste Parameter innerhalb eines Aufrufs ist immer der Ordner mit den Bildern. Danach ist die Reihenfolge, in der die Overrides angegeben werden frei wählbar.
C.) Captions
Überschriften und Texte werden mit einem eigenen Aufruf angegeben. Dieser lautet:
{*vsig_c}Galerienummer|Bilddatei|Titel|Text{/vsig_c*} - ohne die Sterne
Galerienummer: Die Galerien innerhalb eines Beitrages werden vom Plugin automatisch von 0 beginnend durchnummeriert. Diese Eingabe ist unbedingt erforderlich.
Bilddatei: Der exakte Name der Datei "meinbild.jpg". Wird hier nichts eingegeben, dann wird der Aufruf als Default-Wert für die Galerie verwendet. Das bedeutet, er wird bei allen Bildern angezeigt, für die keine eigene Eingabe vorhanden ist.
Titel: Die Überschrift. Wird hier nichts eingegeben . . . dann wird keine Überschrift angezeigt.
Text: Der Text unterhalb der Überschrift. Wird hier nichts eingegeben . . . dann wird kein Text angezeigt.
Beispiele:
{*vsig_c}0||meinTitel|meinText{/vsig_c*} - ohne die Sterne Dieser Aufruf legt für die erste Galerie im Beitrag den Standardtitel "meinTitel" und den Stadardtext "meinText" fest, indem kein Bild angegeben wird. Hinweis: natürlich muss man keinen Stadardtext festlegen. Findet das Plugin für ein Bild keine Angabe, dann wird eben nichts angezeigt.
{*vsig_c}1|bild01.png||meinText{/vsig_c*} - ohne die Sterne Bei bild01.png in der zweiten Galerie im Beitrag wird keine Überschrift und als Text "meinText" angezeigt.
{*vsig_c}0|bild02.png||{/vsig_c*} - ohne die Sterne Bei bild02.png in der ersten Galerie im Beitrag wird nichts angezeigt (Auch nicht der weiter oben festgelegte Standardtext/-titel.)
{*vsig_c}0|bilda.jpg|meinTitelA|meinTextA{/vsig_c*} - ohne die Sterne {*vsig_c}0|bildb.jpg|meinTitelB|meinTextB{/vsig_c*} - ohne die Sterne {*vsig_c}0|bildc.jpg|meinTitelC|meinTextC{/vsig_c*} - ohne die Sterne {*vsig_c}0|bildd.jpg|meinTitelD|meinTextD{/vsig_c*} - ohne die Sterne ... ich glaube, das Prinzip ist klar
Hinweise: Wer keine Captions anzeigen möchte, der kann Sie nutzen, um über die Titelzeile der Captions die Attribute "alt" und "title" der Bilder zu setzen. Findet das Plugin für ein Bild einen Caption-Call, dann wird die Titelzeile auch dann als ALT/TITLE verwendet, wenn Captions nicht aktiviert sind. Mit einem leeren Default-Aufruf kann so zum Beispiel die Anzeige des Dateinamens als ALT/TITLE deaktiviert werden.
Wo im Beitrag und in welcher Reihenfolge diese Angaben gemacht werden ist ohne Belang. Die Anzahl der Parameter in einem Aufruf muss immer 4 sein. Das bedeutet, es müssen immer 3 vertikale Trennstriche (broken vertikal bar) angegeben sein, auch wenn zum Beispiel kein Text angegeben wird, der Trennstrich nach dem Titel muss vorhanden sein! Diese Trenner sind hier geschützte Zeichen und dürfen im Text der Eingaben nicht verwendet werden.
D.) Links
Möchten wir die Bilder der Galerie verlinken, dann kommt zusätzlich noch eine dritte Form des Aufrufs zum Einsatz:
{*vsig_l}Galerienummer|Bilddatei|Verweisziel|Titel|target{/vsig_l*} - ohne die Sterne
Galerienummer: Die Galerien innerhalb eines Beitrages werden vom Plugin automatisch von 0 beginnend durchnummeriert. Diese Eingabe ist unbedingt erforderlich.
Bilddatei: Der exakte Name der Datei "meinbild.jpg". Wird hier nichts eingegeben, dann wird der Aufruf als Default-Wert für die Galerie verwendet. Das bedeutet, er wird für alle Bilder verwendet, für die keine eigene Eingabe vorhanden ist.
Verweisziel: Die URL zu der verlinkt werden soll. Z.B.: http://www.bretteleben.de
Titel: Der Text, der beim Überfahren des Bildes für den Link angezeigt werden soll. z.B.: bretteleben.de target: Das Fenster, in dem das Verweisziel geöffnet werden soll. z.B.: _blank (neues Fenster), _self (selbes Fenster) Beispiele:
{*vsig_l}0||http://www.bretteleben.de|bretteleben.de|_blank{/vsig_l*} - ohne die Sterne Dieser Aufruf legt durch den leeren Bildnamen für die erste Galerie im Beitrag den Standardlink www.bretteleben.de mit dem Text bretteleben.de fest, geöffnet wird der Link in einem neuen Fenster.
{*vsig_l}1|bild01.png|http://www.disney.com|Disney|_self{/vsig_l*} - ohne die Sterne bild01.png in der zweiten Galerie wird mit www.disney.com verlinkt, der Link öffnet im selben Fenster.
{*vsig_l}0|bild02.png|||{/vsig_l*} - ohne die Sterne bild02.png in der ersten Galerie im Beitrag soll nicht verlinkt werden. Ein Sonderfall, denn wenn man Links aktiviert hat, dann werden alle Bilder der Galerie verlinkt. bild02.png wird in diesem Fall einen leeren Verweis haben und auf die selbe Seite verlinken.
{*vsig_l}0|bilda.jpg|http://www.meine.domain.com/meinTollesProdukt1|tollesProdukt1|_self{/vsig_l*} - ohne die Sterne {*vsig_l}0|bildb.jpg|http://www.meine.domain.com/meinTollesProdukt2|tollesProdukt2|_self{/vsig_l*} - ohne die Sterne {*vsig_l}0|bildc.jpg|http://www.meine.domain.com/meinTollesProdukt3|tollesProdukt3|_self{/vsig_l*} - ohne die Sterne {*vsig_l}0|bildd.jpg|http://www.meine.domain.com/meinTollesProdukt4|tollesProdukt4|_self{/vsig_l*} - ohne die Sterne ... usw.
Hinweise: Wo im Beitrag und in welcher Reihenfolge diese Angaben gemacht werden ist ohne Belang. Die Anzahl der Parameter in einem Aufruf muss immer 5 sein. Das bedeutet, es müssen immer 4 vertikale Trennstriche (broken vertikal bar) angegeben sein, auch wenn eine Angabe (zum Beispiel der Name der Bilddatei) leer bleibt! Diese Trenner sind hier geschützte Zeichen und dürfen im Text der Eingaben nicht verwendet werden.
Das wars! Viel Spass mit dem Plugin!
Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung.
Ich freue mich über jeden, der die Möglichkeit findet, mich durch einen Link zu www.bretteleben.de auf seiner Webseite zu unterstützen. Das Plugin selbst produziert keine versteckten Links oder sonstige Nettigkeiten welcher Art auch immer. Wer für sein Projekt zusätzliche Funktionen oder Adaptierungen über die Möglichkeiten des hier gebotenen Supports benötigt, der ist eingeladen, mich mit einer Beschreibung der gewünschten Leistungen und dem angedachten Budget per Email zu kontaktieren (Menüpunkt "Kontakt" im Topmenü). |
Also dein Plugin läuft wunderbar... echt top! Ich habe da nur noch ein "kleines Problem" ;-) : Wenn ich die Thumbnails rechts neben dem Hauptbild anzeigen lassen möchte, verrutscht mir das Navigationsmenü (in der linken Joomla-Spalte) ganz nach unten... es steht dann also unter der eingefügten Gallery. Werden die Thumbnail unter dem Hauptbild angezeigt, ist alles OK... die Navigation in der linken Spalte ist ganz oben, dort wo sie sein soll... nur wenn die Thumbnails rechts neben dem Hauptbild angezeigt werden sollen, rutscht die Navigation in der linken Spalten unter die Gallery... sie bleibt links, aber eben unten. Leider kann ich hier keinen Screenshot einfügen... aber einen Link: http://www.nms-voelkermarkt.ksn.at/joomla/index.php?option=com_content&view=article&id=48:nms-begruessung&catid=37:200910&Itemid=56
Ich habe schon mit etlichen Einstellungen gespielt, also die Breiten verändert, die Ausrichtung der Gallery usw. leider ohne Erfolg. Hättest du noch einen Tipp?
Danke und liebe Grüße!
Peter
Danke für die prompte Hilfe!
Öffne die Datei /plugins/content/vsig.php mit einem Texteditor. In Zeile 41 wird der Parameter für den Ausgangsordner gesetzt:
$rootfolder = '/images/stories/';
Gruß
Andreas
No there is no easy solution but I am working on it. For the moment the gallery works best with images of the same proportions.
Best regards
Andreas
...wie kann ich das Bilderverzeichnis von images/stories auf ein anderes Verzeichnis ändern?
Danke!
I was wondering if anyone has come up with a solution yet to have an option to correctly display vertical images? For instance, I want the max height of the images to be 499px. For Vertical images to scale correctly I would need them to display at only 332px wide. When it is based on width, my vertical images stretch or are displayed at 750 wide by about 1100 tall and it throws the look of the gallery off.
any ideas? I took a look at vsig.php but I'm not seeing an easy solution.
Thanks,
Wendy
Yes, open the plugins stylesheet /plugins/content/plugin_vsig/vsig.css with a text editor. Change the selector .vsig_thumb{} from:
.vsig_thumb {float:left;margin:0px -5px 0px 0px;padding:0px;background:url(shadowAlpha.png) no-repeat bottom right !important;background:url(shadow.gif) no-repeat bottom right;}
to:
.vsig_thumb {float:left;margin:0px -5px 0px 0px;padding:0px;}
Best regards
Andreas
Is it possible to turn off drop shadow on thumbnails?
To change thew position of the captions, open the stylesheet of the plugin at /plugins/content/plugin_vsig/vsig.css with a text editor. The selector .vsig_top div.inside {} holds the settings for the captions displayed over the image, the selector .vsig_top div.outside {} the ones for the captions below the main image.
To move the captions displayed over the main image from the bottom to the top just replace "bottom:5px;" with "top:5px;" in .vsig_top div.inside {}.
Of course it's possible to do more modifications - have fun :)
Best regards
Andreas
I want to ask if i can do the following:
Lets say i create a gallery with 5 images and have some captions, i want to be able to put text links inside the captions so that when user clicks it he can open a new page or file in a new window.
So i m using this code:
{*vsig}directory{/vsig*}
{*vsig_c}0|pic1.jpg|Pic 1 Title|Click for more{/vsig_c*}
{*vsig_l}0||http://www.mysite.com/images/pic1highres.jpg|High Resolution|_blank{/vsig_l*}
The problem is that its hard for the visitor to see the "Click for more text" so i want to put it on top of the image instead of inside or below.
Can i do this?