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)
Two galleries
13 Montag, den 07. Mai 2012 um 17:03 Uhr
Gabriela

Hello
I'm trying to create two galleries, the first going very well. But the second is not.
I put the first:
the gallery number 0 and the second on 1. I am using the gallery that has links "becssg_l"

Thanks for everything

@Gabriela
Mittwoch, den 09. Mai 2012 um 20:27 Uhr
A. Berger

Hi Gabriela!

Please post a link to the page with the two galleries and the code you are using in your article.

Best regards
Andreas

New
12 Freitag, den 27. April 2012 um 02:33 Uhr
Rafaella

Hi, I;m new to Joomla and im struggling a lot with it!
i already know css and html but my teacher wants us to us joomla for the final project, unfortunately!

I followed all the steps described here but look what happens:

www.rchavesdesigns.com/index.php/portfolio

it only shows the {*becssg}/images/stories/cssgallery{/becssg*} part as text, instead of calling the gallery!

HEEEELP!
thanks!

@Andy
Mittwoch, den 09. Mai 2012 um 21:05 Uhr
A. Berger

Hi Andy!

I added the asterisks to prevent the code from getting executed here. ;)

Best regards
Andreas

the Fix
Dienstag, den 08. Mai 2012 um 18:57 Uhr
Andy

Remove the astrix * from the call tag

@Rafaella
Dienstag, den 01. Mai 2012 um 15:55 Uhr
A. Berger

Hi Rafaella!

Did you enable the plugin?

Best regards
Andreas

Hintergrund von Captions ändern
11 Donnerstag, den 19. April 2012 um 17:51 Uhr
anonymous

Hi,

ist es möglich die Hintergrundfarbe für die Captions zu ändern oder mit einem Rahmen auszustatten?
Also nicht für Überschrift und Text einzeln, sondern gesamt, das umschließende DIV sozusagen.

@anonymous
Donnerstag, den 19. April 2012 um 19:50 Uhr
A. Berger

Hallo anonymous!

Im Moment müsstest Du dazu am Plugin selbst herumbasteln, aber ich habe ohnehin vor innerhalb der nächsten Woche ein Update zu machen und werde im Zuge dessen ein optionales externes Stylesheet einbauen. Dann geht das einfacher. Ich hoffe, es hat so lange Zeit.

Gruß
Andreas

Ich Brauche noch etwas hilfe
10 Samstag, den 07. April 2012 um 18:41 Uhr
Biber3000

Ich habe gerade mit Interesse die sehr gute Anleitung gelesen, aber wenn ich das mache wird auf der Website noch angezeigt, dass der Ordner nicht gefunden werden kann. Muss man noch irgendetwas aktivieren oder was mache ich sonst falsch?

LG

@Biber3000
Montag, den 09. April 2012 um 15:16 Uhr
A. Berger

Hallo Biber3000!

Bitte überprüfe, ob die Verzeichnisrechte des Ordners passen (Ordner 755, Bilder 644), ob es den Ordner wirklich gibt (Tippfehler?) und wechsle im Artikel mal in die HTML-Ansicht um zu überprüfen, ob der Code nicht vielleicht versehentlich durch HTML-Tags fragmentiert ist.

Hilft das alles nichts, poste bitte einen Link zur Seite und den Code, den Du im Artikel verwendest, ich schau mir das gerne an.

Gruß
Andreas

Excellent Product
9 Samstag, den 11. Februar 2012 um 01:31 Uhr
Dfagredam

Hi. I jus want to congratulate you for this amazing plugin. I love every aspect of it and it works perfectly and smooth. Thanks for your step by step tutorial.

Beautiful job. Keep it up.

Trouble
8 Sonntag, den 08. Januar 2012 um 05:31 Uhr
Coyote

Hi! I´m new in Joomla and i'would like to use your plugin, i've followed all the instructions of the tutorial but at the end the article shows a message which says that the CSS Gallery couldn´t find the folder, i've checked the root, code, the images and a really don't know what to do now, i'll apreciate any suggestions !!! Thanks.
Here is the link: www.puertosukai.com/index.php?option=com_content&view=article&id=69&Itemid=84

P.S. So sorry for my poor english is not my language ;)

@Coyote
Mittwoch, den 11. Januar 2012 um 13:32 Uhr
A. Berger

Hi Coyote!

I'm sorry but I could not find the plugin on this page.

Best regards
Andreas

change the presentation
7 Freitag, den 06. Januar 2012 um 23:08 Uhr
fred

hi , I would like to know how to change the presentation of css gallery. I want  do invertion whith the top end the bottom. I do very much manipulation on cssgallery.php but nothing was good. some bugs. Some one have a solution? Thanks

desole pour mon anglais.

Merci à vous.. Fred

@fred
Mittwoch, den 11. Januar 2012 um 13:55 Uhr
A. Berger

Hi Fred!

Up till now there is no such layout, but once you have finished your modifications, I would appreciate if you could post a link to the page.

Best regards
Andreas

Image
6 Dienstag, den 13. Dezember 2011 um 11:03 Uhr
Suberbawer

Hi, the plug its really usefull, thank you very much....but i have a problem...its possible to show just the thumbails without the main image in big?

thanks....

@Suberbawer
Dienstag, den 13. Dezember 2011 um 20:08 Uhr
A. Berger

Hi Suberbawer!

I'm sorry, but this is not possible with this plugin. Maybe you want to have a look at extensions.joomla.org, I'm pretty sure you will find an extension that fits your needs.

Best regards
Andreas

The Main Image is not showing.
5 Freitag, den 09. Dezember 2011 um 23:48 Uhr
Gbenga Mogaji

Thank you for making this plugin available. I tried using it but my main image is not showing. Please what can I do?

cacluton.org/media.html#g_66_0

Cheers

@Gbenga Mogaji
Sonntag, den 11. Dezember 2011 um 20:17 Uhr
A. Berger

Hi Gbenga!

I'm sorry but the page seems not to be available.

Best regards
Andreas

CSS Gallery
4 Montag, den 21. November 2011 um 18:40 Uhr
Luke

Hi,

I have a quick question about your gallery plugin - it looks great!  Can the thumbnails be "seperated" from the main image;   ie:  the main image placed in content and the thumbnails placed in module(s) elsewhere?    Or maybe its better to ask if it can be adapted to work like this.

kind regards,
luke
lwlbar AT yahoo DOT com

@Luke
Montag, den 21. November 2011 um 21:58 Uhr
A. Berger

Hi Luke!

No, neither this nor my other gallery plugin offer this functionality and I have ad hoc no idea how to realize this without creating a completely new extension.

Best regards
Andreas

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 33 Gäste online