Startseite Joomla CSS Gallery - Anleitung Plugin
Hauptmenü
Meist gelesen
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

Wenn Sie die Erweiterungen und Scripts auf diesen Seiten nützlich finden, freue ich mich über Ihre Unterstützung. Danke!

Betrag: 

Neueste Beiträge
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
CSS Gallery Plugin Installation und Verwendung
Geschrieben von: Andreas Berger   
Sonntag, den 14. Dezember 2008 um 12:09 Uhr

Eine Schritt für Schritt Anleitung für Installation und Verwendung des bretteleben.de CSS Gallery Plugins.

Installation

1.) In die Administrationsoberfläche einloggen


2.) Den Menüpunkt "Erweiterungen" > "Installieren/Deinstallieren" auswählen


3.) Die Paketdatei mit dem bretteleben.de CSS Gallery Plugin auswählen


4.) Auf "Hochladen und Installieren" klicken


5.) Wenn alles geklappt hat, erhält man die Meldung "Plugin erfolgreich installiert"


6.) Den Menüpunkt "Erweiterungen" > "Plugins" auswählen


7.) Das "bretteleben.de CSS Gallery Plugin" suchen und anklicken


8.) Der erste konfigurierbare Parameter ist die Breite der Galerie in Pixel.


9.) Als nächstes kommt die Höhe. "Galerie" bezieht sich bei Breite und Höhe auf das jeweils gross dargestellte Bild. Bei Bildern im Querformat also zum Beispiel: Breite 400 Pixel, Höhe 300 Pixel. Bei Bildern im Portraitformat umgekehrt.



Um keine unnötig großen Abstände zwischen Inhalt und Hauptbild bzw. zwischen Hauptbild und Thumbnails entstehen zu lassen, empfiehlt es sich darauf zu achten, dass das Verhältnis dieser beiden Parameter dem tatsächlichen Verhältnis von Breite zu Höhe entspricht.

Eine Übereinstimmung mit den tatsächlichen Werten von Breite und Höhe ist nicht erforderlich, da die Bilder ohnehin skaliert werden.


10.) Der nächste Parameter ist die Qualität der skalierten Bilder in Prozent. Hier empfehlen sich Werte zwischen 80 und 90, 95 Prozent. Dieser Bereich bietet eine günstige Kombination aus Qualität und Dateigrösse.


11.) Der nächste Parameter legt fest, ob die Bilder proportional skaliert oder entsprechend der festgelegten Maximalwerte beschnitten werden sollen.


12.) Der nächste Parameter legt die Positionierung der Galerie relativ zum verfügbaren Platz fest. Zur Auswahl stehen Links, Zentriert, Rechts, float left und float right. Die beiden letzten Optionen ermöglichen es, die Galerie mit Text umfliessen zu lassen. Sie machen die Galerie gleichzeitig aber auch wesentlich abhängiger vom verwendeten Template und werden wohl nicht immer den gewünschten Effekt haben.


13.) "Sort Order" regelt die Reihenfolge, in der die Bilder angezeigt werden. Zur Auswahl stehen die Optionen alphabetisch aufsteigen, alphabetisch absteigend, von alt zu neu und von neu zu alt (jeweils Änderungsdatum und nicht Erstellungsdatum!) und zufällig.


14.) Preload: Ich empfehle, die Bilder gleich mit der Seite laden zu lassen. Das verzögert zwar den Seitenaufbau selbst, dafür ist die Verwendung der Galerie bei weitem angenehmer, als wenn erst dabei die Hauptbilder geladen werden.

Augenmaß bei der Wahl der Dateigrößen (siehe Punkt vor) ist hier in jedem Fall angebracht!


15.) "Use fixed Startimage" legt fest, ob das erste Bild fix angezeigt werden soll, ob ob es beim Überfahren der Galerie mit der Maus ausgeblendet werden soll. Zweitere Variante empfiehlt sich, wenn man Bilder mit Transparenz oder verschiedenen Formaten verwendet.


16.) "Thumbnails per row" legt fest, wieviele Thumbnails je Reihe angezeigt werden sollen.


Welcher Wert hier empfehlenswert ist, hängt von der Breite des Hauptbildes ab. Einfach ausprobieren.


17.) Als nächster Parameter ist die Qualität der Thumbnails festzulegen. In den meisten Fällen sind 80% hier bereits mehr als ausreichend.


18.) Als nächstes kann der Abstand der Thumbnails zueinander in Pixel festgelegt werden. Welcher Wert hier passend ist, muss im Einzelfall entschieden werden. Fixe Regeln gibt es keine.


19.) Der nächste Parameter legt fest, ob die Thumbnails proportional skaliert oder entsprechend der festgelegten Maximalwerte beschnitten werden sollen.


20.) Aktiviert man die Option "Show Captions", dann hat man die Möglichkeit, im Beitrag die Bilder einer Galerie mit Titel und Text zu versehen.


21.) Mit der Aktivierung von "Use links?" schlußendlich hat man zusätzlich die Möglichkeit, die Bilder der Galerie zu verlinken. Link, Titel und Ziel (Attribut target) werden im Artikel angegeben.


22.) Image root legt den Stammordner fest, in dem (direkt oder in Unterordnern) alle Bilder liegen. Standardmässig ist hier in Joomla!1.5 der Ordner /images/stories/ und in Joomla!1.6/1.7 der Ordner /images/ eingestellt (und dieser Ordner wird auch verwendet, wenn das Feld leer ist). In den meisten Fällen ist hier keine Änderung erforderlich, nur wer seine Bilder in einer Ordnerstruktur außerhalb von /images/stories/ (Joomla!1.5) bzw. /images/ (Joomla!1.6/1.7) organisiert hat, der kann hier den entsprechenden Pfad angeben.
Der hier festgelegte Pfad wird vom Plugin bei jedem Aufruf einer Galerie automatisch ergänzt und darf im Code im Artikel nicht mehr wiederholt werden!


23.) Abschliessend finden wir hier die Ergebnisses des GD-Checks, den das Plugin durchführt. Die GD Library ist eine der gängigsten Erweiterungen zur Bildbearbeitung für PHP und wird vom Plugin verwendet, um die Thumbnails zu erzeugen. Überprüft wird, ob die Erweiterung überhaupt vorhanden ist und ob die vom Plugin unterstützen Dateiformate (jpg, png, gif) verfügbar sind.




Sind ein oder zwei Dateiformate nicht verfügbar, dann wird die Galerie mit dem/den verbleibenden immer noch funktionieren.

Ist die GD-Lib gänzlich deaktiviert, dann kann die Galerie nicht verwendet werden. In diesem Fall empfiehlt es sich, bei seinem Hoster nachzufragen, ob sie aktiviert werden kann.


24.) Das Plugin aktivieren


25.) Auf Speichern klicken - und fertig


 

Verwendung


Damit man mit dem Plugin etwas anfangen kann, brauchen wir als Nächstes die entsprechenden Bilder. Diese legen wir in einem Ordner unter (Joomla-Installation)/images/stories ab. Wer Joomla!1.6/1.7 verwendet, der wird vermutlich standardmässig den ordner /images/ verwenden. Davon abgesehen bleibt Alles gleich.

1.) Den Menüpunkt "Site" > "Medien" auswählen


2.) Hier in den Ordner "Media" > "stories" wechseln


3.) Einen neuen Unterordner für die Bilder anlegen. Im Beispiel wähle ich dafür den Namen "cssgallery"


4.) In den neu angelegten Ordner wechseln.


5.) Und hier die Bilder hochladen. Das Plugin akzeptiert die Dateitypen ".jpg", ".gif" und ".png".


6.) Jetzt im Menüpunkt "Inhalt" > "Beiträge" den gewünschten Beitrag öffnen.


7.) An der gewünschten Stelle den Code zum Aufruf des Plugins eingeben.

Der Code besteht aus dem Aufruf selbst {*becssg}{/becssg*} (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/" für Joomla!1.5 und "/images/" für Joomla!1.6/1.7 wird vom Plugin automatisch ergänzt und ist nicht mit anzugeben.

Ein Aufruf sieht also zum Beispiel so aus

{*becssg}cssgallery{/becssg*} - ohne die Sterne


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

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

An sich war es das und die Galerie ist einsatzfertig.

Will man zusätzlich zu den Bildern auch Text anzeigen oder für die aktuelle Galerie die im Backend eingestellten Werte überschreiben, dann geht es im zweiten Teil der Anleitung (Link am Ende der Seite) weiter.


8.) Speichern - Fertig!


 

Wartung

Das Plugin legt beim Aufruf im Ordner mit den Bildern je einen Unterordner für die skalierten Bilder und einen für die Thumbnails an. Dort speichert es die neu erstellten Dateien mit der Namenskovention:

"Bildname" Unterstrich "Breite" Unterstrich "Höhe" Unterstrich "Qualität" Punkt "Dateityp".

Also zum Beispiel: "bild01_399_299_90.jpg"

Das Plugin erstellt zwar die Dateien, löscht aber keine. Hat man verschiedene Einstellungen ausprobiert, kann es sinnvoll sein, die nicht mehr benötigten Bilder zu löschen.

1.) Dazu wechseln wir - nachdem die Galerie im Frontend zumindest einmal aufgerufen wurde - wieder in den Menüpunkt "Site" > "Medien"


2.) Im Ordner der Galerie (im Beispiel "cssgallery") finden wir jetzt zwei Unterordner. In Joomla!1.5 sind das die Unterordner "images" und "thumbnails", in Joomla!1.6/1.7 die Unterordner "becssg_images" und "becssg_thumbs". In diesen sind die neu erstellten Dateien abgelegt.


3.) Der Ordner "images/becssg_images" enthält die Bilddateien, die die Galerie als Hauptbilder anzeigt.

Dass man hier oft ungerade Werte für Breite und Höhe vorfindet, owohl man z.B. exakt 400x300 eingestellt hat, hängt damit zusammen, dass die Breite nach dem Austeilen der Thumbnails je Reihe an die sich ergebende Gesamtbreite angepasst und die Höhe danach dazu passend neu berechnet wird.


4.) Sowohl im Ordner "images/becssg_images" als auch im zweiten Ordner "thumbnails/becssg_thumbs" kann man nicht mehr benötigte Bilder bedenkenlos löschen. Löscht man versehentlich ein aktuelles Bild - kein Problem, beim nächsten Aufruf der Galerie wird es neu erstellt.


Hinweis:
Das Plugin überprüft Bilder anhand von Name und Größe. Ersetzt man ein Original durch ein anderes selber Größe und mit selbem Namen, dann wird das nicht automatisch erkannt, sondern muss man die skalierten Versionen des ersetzten Bildes in den Ordnern "images" und "thumbnails" manuell löschen. Beim nächsten Aufruf greift das Plugin dann auf das neue Original zu.


Übersicht über die Möglichkeiten des Aufrufs direkt aus dem Artikel: Anleitung Plugin Code


Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung. Bitte geben Sie bei Ihrer Frage die verwendete Joomla! Version an und posten Sie bei Problemen - soweit möglich - einen Link zur betroffenen Seite.

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ü).


Wer die Erweiterung nutzt den bitte ich, sie auf extensions.joomla.org zu bewerten und einen Erfahrungsbericht zu posten.

Zuletzt aktualisiert am Freitag, den 28. Oktober 2011 um 18:21 Uhr
 
Kommentare (13)
Wow!
3 Donnerstag, den 03. November 2011 um 20:15 Uhr
Marianna

Excellent plugin.  Simple - easy - and I am so glad it does need Flash or Javascrip.

If I may make one suggestion - I don't know how easy/hard/possible it is to do... but in the article Editor window... to add the button with the code below... (like the Read more button) so when you click it, it will place {*becssg}{/becssg*}  in your article editor.

But STUNNING JOB! WELL DONE!!!

@Marianna
Donnerstag, den 03. November 2011 um 20:29 Uhr
A. Berger

Hi Marianna!

I promise, the day this plugin has absolutely no more flaws/bugs and I have absolutely no idea how to improve it further, I will start writing a second plugin to insert the code for the first plugin into the article editor. :D

Best regards
Andreas

2 large images and captions and text at the same time
2 Donnerstag, den 07. April 2011 um 22:02 Uhr
leo a.

i can't figure out why the 3rd thumbnail of the first row makes 2 big images and text appear at the same time, but the 3rd image of the second row doesn't.  do you have a clue?
http://coastmailers.com/samples/gallery/promotions/
i can toggle the fixed startimage setting, but then i have the other problem where putting your mouse over the gallery makes large image disappear.
i don't want the startimage to disappear and i don't want to get double images on any of the gallery items.  is that possible?

in reply to your reply
Freitag, den 08. April 2011 um 14:25 Uhr
leo a.

i figured out why 3rd image of 2nd row hides 1st image, and why 3rd image of 1st row doesn't hide first image even though they are both portrait style pictures and the first fixed image is a landscape style picture.
the reason is because the portrait picture of the 2nd row has extra white space on the left and right of it, and the portrait picture of 1st row doesn't have that extra white space on the left and right of it.

@leo a.
Donnerstag, den 07. April 2011 um 22:47 Uhr
A. Berger

Hi Leo!

Other than during my first visit on your site, you now have set the parameter "Use fixed Startimage" to "Yes". This prevents the start image from disappearing when hovering the main image from outside the gallery, by using a fixed (i.e. always visible) start image.
This means that the start image is always there but gets hidden behind the image that belongs to the thumbnail you are currently hovering.
And this means, hovering the third image of the second row does not make a second image appear but this specific image is smaller than the other images and therefore the fixed start image is not completely hidden.

Taking all together, I repeat the advice from my last comment to have a look at my other gallery plugin. Whilst the "CSS Gallery" is mainly focused on providing a fully functional gallery with just CSS (taking into account some limitations), the "Very Simple Image Gallery", that uses JavaScript too, is a lot more flexible especially when it comes to show images of different proportions in one gallery.

Best regards
Andreas

hover / mouseover / rollover makes image disappear
1 Donnerstag, den 07. April 2011 um 21:37 Uhr
leo a.

when you rollover the main large image with mouse cursor, it disappears.  why is this?

http://coastmailers.com/samples/gallery/promotions/

Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135
Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 41 Gäste online