Simple Image Gallery Extended - Joomla! Plugin - Logo

JOOMLA 5.x JOOMLA 4.x JOOMLA 3.x FREE PRO POPULAR

Name: Simple Image Gallery Extended - Version: 3.4.2-FREE / 3.6.5.0-PRO / 4.4.1.0-PRO / 5.0.1.0-PRO - Typ: Plugin - Lizenz: GPLv3
Beschreibung: Galerien in Artikeln einbinden - mit Turbomodus - Joomla! Extensions Directory

Übersicht über alle Downloads zu dieser Erweiterung: SIGE - Simple Image Gallery Extended Downloads

Simple Image Gallery Extended erstellt Galerien in Artikeln - mit Turbomodus

Plugin: SIGE - Simple Image Gallery Extended
Funktion: Galerie im Artikel - Bilder werden aus angegebenem Pfad geladen
Sprachen: Deutsch / Englisch
Zusatz: Editor Button - SIGE Parameter

Simple Image Gallery Extended ist ein mächtiges Galerie-Inhaltsplugin für Joomla!

Features

  • Thumbnailgenerierung und -speicherung: Vorschaubilder werden erstellt und gespeichert - schnelleres Laden, bessere Qualität
  • XHTML 1.1 valide - CSS und JS-Dateien werden im head-Bereich eingebunden, Syntaxfehler beseitigt
  • Turbomodus - Galerie als Textdatei abspeichern und bei weiteren Aufrufen einlesen lassen
  • Parameteraufruf - individuelle Galerien möglich
  • Verzögertes Laden der Bilder (Lazy Loading)
  • Backend-Komponente zum Erstellen von Galerien und Hinzufügen von Bildinformationen (PRO)
  • Einbindung von Slimbox, Lytebox, Shadowbox, Milkbox und Mootools optional, wenn sie nicht bereits durch andere Komponenten (Mootools von Joomla) eingebunden werden
  • Lytebox zur Darstellung einer Diashow und Vermeidung von JS-Konflikten eingebaut
  • Shadowbox zur Anzeige der Bilder eingebunden
  • Milkbox - leichtgewichtiger Lightbox Klon für die aktuelle Mootools Version
  • Anzahl der angezeigten Bilder einstellbar
  • Bilder können ohne JS-Effekt (Verlinkung) angezeigt werden
  • Zufällige Reihenfolge der Bildanzeige möglich
  • Sortierung nach Änderungsdatum möglich
  • Bildunterschrift einblenden
  • IPTC Daten auslesen (Title und Description)
  • Bildinformationen aus einer Textdatei auslesen (Mehrsprachigkeit)
  • Druckoption - Bild in der JS-Ansicht bequem ausdrucken
  • Downloadoption - Bild mit einem Klick runterladen
  • Einzelbild anzeigen - das Plugin kann auch einzelne Bilder anzeigen
  • Listenansicht - Bilder als Liste ausgeben
  • Wörter mit einer Galerie verbinden
  • Crop - Bildausschnitt anzeigen lassen
  • Wasserzeichen-Funktion (unterschiedliche Wasserzeichen möglich)
  • CSS Bildertooltip
  • Originalbilder können verkleinert werden
  • Eine index.html wird in jedem Bildordner zur Absicherung vor dem Auslesen des Inhalts über den Browser automatisch erzeugt
  • Editor Button - SIGE Parameter
  • Backend deutsch / englisch

Installation

Plugin im Adminmenü über Erweiterungen installieren und unter Erweiterungen -> Plugins -> Inhalt - SIGE - Simple Image Gallery Extended - Plugin anpassen und aktivieren.

Update

Eine neue Version kann einfach über eine bestehende Installation installiert werden. Des Weiteren kann eine alte Version vorher deinstalliert und eine neue normal installiert oder Dateien per ftp ersetzt werden (Pfad: plugins/content/sige).

Der Backlink auf die Projektseite kann in den Einstellungen deaktiviert werden.

Nutzung des SIGE Plugins

Mit {gallery}Ordner{/gallery} (Ordner muss im Verzeichnis images liegen) lässt sich die Galerie an der gewünschten Stelle einbinden. Die Galerie kann über Parameter gesteuert werden. (siehe Parameterliste)

Beispiel

  • Einen Ordner im Verzeichnis images erstellen. Zum Beispiel: joomla-rockt - Pfad ist demnach images/joomla-rockt
  • Bilder in den neuen Ordner laden
  • Im Artikel an gewünschter Stelle eingeben:
{gallery}joomla-rockt{/gallery}

Parameterliste

Galerien können individuell über Parameter im Syntaxaufruf eingestellt werden. Mit den Parametern kann jede Galerie unabhängig der globalen Einstellungen beeinflusst und angezeigt werden. Somit lassen sich vollkommen unterschiedliche Galerien in einem Artikel darstellen.

Mögliche Parameter

width - Breite der Vorschaubilder - Beispiel: 300
height - Höhe der Vorschaubilder - Beispiel: 300
gap_v - vertikaler Abstand - Beispiel: 30
gap_h - horizontaler Abstand - Beispiel: 30
quality - Qualität (jpg) - möglich: 1-100
quality_png - Qualität (png) - möglich: 1-9 (Kompressionsstufe)
displaynavtip - Navigationstipp einblenden - 1 = ja, 0 = nein
displaymessage - Artikelname einblenden - 1 = ja, 0 = nein
thumbs - Vorschaubilder generieren und abspeichern - 1 = ja, 0 = nein
limit - Limitierung einschalten - 1 = ja, 0 = nein
limit_quantity - Anzahl der Bilder - Beispiel: 10
noslim - Slimbox-Effekt ausschalten - 1 = ja, 0 = nein
sort - zufällige Reihenfolge - 1 = ja, 2 = nein, aufsteigend, 3 = nein, absteigend, 4 = nach Änderungsdatum aufsteigend, 5 = nach Änderungsdatum absteigend
root - Pfad zu den Bildern ausgehend vom Rootverzeichnis - 1 = ja, 0 = nein
ratio - Seitenverhältnisse der Bilder beibehalten - 1 = ja, 0 = nein
caption - Bildunterschrift anzeigen - 1 = ja, 0 = nein
caption_description - Kurzbeschreibung unter der Bildunterschrift anzeigen - 1 = yes, 0 = no (PRO)
iptc - Titel und Beschreibung aus IPTC Daten - 1 = ja, 0 = nein
iptcutf8 - IPTC Daten bereits utf8-kodiert? - 1 = ja, 0 = nein
print - Druckoption in Slimbox / Lytebox anzeigen - 1 = ja, 0 = nein
count - Zählvariable manuell setzen - Beispiel: 5
single - Einzelbilder anzeigen - Beispiel: name-des-bildes.jpg
scaption - Untertitel bei Einzelbildanzeige, nur in Verbindung mit single zu nutzen - Beispiel: Das ist mein Untertitel
single_gallery - bei Einzelbild Galerie aktivieren - 1 = ja, 0 = nein
salign - Einzelbilder ausrichten - Beispiel: left / center / right
connect - Einzelbilder in eine Galerie verbinden - Beispiel: bildset
download - Downloadbutton anzeigen - 1 = ja, 0 = nein
list - Bilder als Liste anzeigen - 1 = ja, 0 = nein
crop - Crop aktivieren - 1 = ja, 0 = nein
crop_factor - Zoomstufe - Beispiel 50 für 50 Prozent (ohne % angeben!)
thumbdetail - Bildausschnitt für Thumbnail wählen - 0 = 1:1, 1 = oben links, 2 = oben rechts, 3 = unten links, 4 = unten rechts
watermark - Wasserzeichen aktivieren - 1 = ja, 0 = nein
watermarkposition - Position des Wasserzeichens - 0 = zentriert, 1 = oben links, 2 = oben rechts, 3 = unten links, 4 = unten rechts
watermark_trans - Transparenz des Wasserzeichens - 0 bis 100 - 0 = Undurchsichtig, 100 - komplett transparent
encrypt - Verschlüsselungsmethode - 0 = ROT13 - sehr schwach, aber schnell. 1= MD5 - sicher, relativ schnell. 2 = SHA1 - sehr sicher, langsamer als MD5
image_info - Bildnamen oder IPTC-Werte anzeigen - 1 = ja, 0 = nein
image_link - Link setzen - Beispiel: https://www.kubik-rubik.de
image_link_local - Erlaubt interne Links zu setzen, zusammen mit image_link verwenden - 1 = yes, 0 = no
image_link_new - Link in einem Fenster öffnen - 1 = ja, 0 = nein
column_quantity - Bilder pro Zeile - Beispiel: 3 (für 3 Bilder pro Zeile)
css_image - CSS Image Tooltip aktivieren - 1 = ja, 0 = nein
css_image_half - halbe Größe bei Tooltip - 1 = ja, 0 = nein
copyright - Link zum Autor - 1 = ja, 0 = nein
word - Galerie mit einem Wort verlinken - Beispiel: Galerie
watermarkimage - Anderes Wasserzeichen wählen (Bild muss unter plugins/content/sige/plugin_sige liegen) - Beispiel: watermark-new.png
calcmaxthumbsize - Maximale Abmessungen aller Thumbnails berechnen - 1 = ja, 0 = nein
fileinfo - Informationen aus Textdatei (captions.txt - siehe Slide Zusatz) - 1 = ja, 0 = nein
turbo - Turbomodus aktivieren - 1 = ja, 0 = nein
resize_images - Verkleinerung der Originalbilder aktivieren - 1 = ja, 0 = nein
width_image - Maximale Breite der verkleinerten Originalbilder - Beispiel: 800
height_image - Maximale Höhe der verkleinerten Originalbilder - Beispiel: 800
ratio_image - Seitenverhältnisse bei der Umwandlung der Originalbilder beibehalten - 1 = ja, 0 = nein
images_new - Bereit erzeugte verkleinerte Originalbilder überschreiben - 1 = ja, 0 = nein
nodebug - Debugnachricht unterdrücken - 1 = ja, 0 = nein
filterImage - Filtert die geladenen Bilder nach bestimmten Namensteilen - Beispiel: .png|.webp (PRO)

Benutzung

Aufruf: PARAMETER=WERT. Die Parameter werden mit einem Komma getrennt. Die Reihenfolge ist nicht relevant, wichtig ist nur, dass das Bildverzeichnis an erster Stelle steht.

Parameter lassen sich mit dem Editor Button - SIGE Parameter sehr einfach nutzen!

Beispiel

Limitierung deaktiviert, Reihenfolge zufällig, Größe 100, vertikaler / horizontaler Abstand 20

Code:

{gallery}Bildordner,limit=0,random=1,width=100,height=100,gap_h=20,gap_v=20{/gallery}

Kein Slimbox-Effekt (Web 1.0-Galerie), Einzelbild bild.jpg, IPTC Daten anzeigen, Druckoption aktiviert, Zählvariable auf 5

Code:

{gallery}Bildordner,noslim=1,single=bild.jpg,iptc=1,print=1,count=5{/gallery}

Galerie in Listenform, Downloadbutton anzeigen, Bilder im Set "bilder" anzeigen, IPTC Daten sind utf8-kodiert

Code:

{gallery}Bildordner,list=1,download=1,connect=bilder,iptcutf8=1{/gallery}

PRO Features

Backend-Komponente

Simple Image Gallery Extended - Komponente - Galerien

Simple Image Gallery Extended - Komponente - Bilder

Masonry Ansicht

Simple Image Gallery Extended - Masonry Ansicht

Zusatz - Tipps und Tricks

Turbomodus aktivieren - Galerie wird in Sekunden geladen

Ab Version 1.7-2 kann der Turbomodus aktiviert werden. Dieses Feature gibt es in der Form nur in SIGE!

Zuerst muss man wie gewohnt eine Galerie erstellen. Wenn alles passend eingerichtet wurde, kann der Turbomodus mit dem Parameter turbo=1 im Syntaxaufruf aktiviert werden. Beim nächsten Laden werden 2 Textdateien erzeugt, die die komplette Ausgabe der Galerie beinhalten. Bei weiteren Aufrufen werden lediglich die Textdateien eingelesen, es entfällt das langwierige Bearbeiten aller Bilder. Der Turbomodus wird nicht global gesetzt, sondern muss in jedem Syntaxaufruf manuell aktiviert werden.

Info: In einem Test mit 50 großen Bildern konnte die Ladezeit mit dem Turbomodus von 17 Sekunden auf 1 Sekunde verbessert werden!

Sollte man im Nachhinein doch noch Änderungen an der Galerie durchführen, müssen die Textdateien neu erstellt werden. Das ist über den Parameter turbo=new möglich. Nachdem die neuen Textdateien erzeugt wurden (1 Aufruf der Galerie im Frontend nötig), muss man den Parameter wieder auf turbo=1 umstellen.

Hinweise zum Benutzen der Parameter gibt es im Slide "Parameterliste".

Bildinformationen aus einer Textdatei laden - mehrere Textdateien für unterschiedliche Sprachen

Bildinfomationen (Titel und Beschreibung) können ab Version 1.5-15 und 1.6-2 auch über eine Textdatei eingelesen werden.

Dazu muss eine Textdatei mit dem Namen captions.txt erstellt und in den jeweiligen Bildordner kopiert werden. Die Datei muss folgendermaßen aufgebaut sein:

bild.jpg|Titel des Bildes|Beschreibung des Bildes
bild2.jpg|Titel des 2. Bildes|Beschreibung des 2. Bildes|Alt-Attribut für das 2. Bild|Link zu einer Seite
...

Parameter:

  • 1 - Bildname
  • 2 - Bildtitel
  • 3 - Bildbeschreibung
  • 4 - Alt-Attribut
  • 5 - Link

Jede Zeile wird für ein Bild verwendet. Pro Zeile müssen mindestens die ersten beiden Parameter gesetzt werden, die anderen Parameter sind optional. Die Parameter werden mit einem Pipe-Symbol ( | ) von einander getrennt.

Zuerst kommt der exakte Bildnamen mit der Dateiendung, als 2. Argument der gewünschte Titel und anschließend eine Beschreibung.

SIGE unterstützt ebenfalls die Nutzung von verschiedenen Textdateien, die je nach gewählter Sprache eingelesen werden. Dazu müssen die Textdateien den richtigen Sprachkürzel im Namen beinhalten.

Beispiel: Deutsch - captions-de-DE.txt, Englisch - captions-en-GB.txt usw.

Damit kann man dem gleichen Bild je nach gewählter Sprache einen anderen Titel und Beschreibung vergeben.

Ab Version 1.7-2 muss man dieses Feature in den Einstellungen über die Option "Informationen aus Textdatei" explizit aktivieren.

Achtung: Die Dateien müssen mit der Kodierung UTF8 ohne BOM gespeichert werden (z.B.: mit Notepad++), um ohne Probleme zu funktionieren!

Galerie mit einem Wort im Text verlinken

Ab Version 1.5-15 und 1.6-2 kann man einzelne Wörter mit einer Galerie oder einem Bild verknüpfen. Es wird keine Galerie mit Thumbnails angezeigt, sondern es wird das gewünschte Wort im Schreibfluss mit einer Galerie verknüpft.

Parameter: word

Beispiel für einen Aufruf:

Hier sind unsere {gallery}bildordner,word=Urlaubsbilder{/gallery} zu finden!

Möchte man nur ein einzelnes Bild aus dem Ordner verknüpfen, dann muss man zusätzlich noch den Parameter single benutzen:

Hier ist das {gallery}bildordner,word=Bild,single=name.jpg{/gallery}!

Achtung: Es sind keine Sonderzeichen wie Komma oder Fragezeichen möglich (alle Sonderzeichen, die bei regulären Ausdrücken eine Bedeutung haben). Mehrere Wörter können aber mit einem Leerzeichen eingegeben werden.

Unterschiedliche Wasserzeichen verwenden

Ab Version 1.5-15 und 1.6-2 können pro Syntaxaufruf unterschiedliche Wasserzeichen gesetzt werden. Der benötigte Parameter lautet: watermarkimage

Die Wasserzeichenbilder müssen im Verzeichnis plugins/content/sige/plugin_sige abgelegt werden.

Beispiel für einen Aufruf:

{gallery}bildordner,watermarkimage=wasserzeichen-neu.png{/gallery}

wasserzeichen-neu.png ist das gewünschte Wasserzeichen und ist über plugins/content/sige/plugin_sige/wasserzeichen-neu.png aufrufbar.

Allgemeine Tipps

Die richtige Thumbnailgröße sollte am besten mit der "on-the-fly"-Methode ermittelt werden. Ist die richtige Größe gefunden, dann erst die Thumbnailgenerierung/-speicherung aktivieren. Thumbnails werden bei Änderung der Größe (wichtig ist das Verhältnis von Höhe zur Breite) neu generiert. -> seit Version 1.5-7 werden Thumbnails nur noch durch die Zusatzoption überschrieben! Qualitätseinstellung ändert die bereits vorhandenen Thumbnails nicht. Sollte eine Änderung nötig sein, dann entweder die Thumbnails im Ordner thumbs des jeweiligen Verzeichnisses löschen oder einfach kurz die Größenverhältnisse umstellen -> die Zusatzoption "Thumbnails überschreiben?" aktivieren. Seit der Version 1.5-3 können bereits erstellte Thumbnails ganz einfach überschrieben werden. Dafür muss die Option "Zusatz: Thumbnails überschreiben?" aktiviert und die Seite mit den Bildern einmal aufgerufen werden. Sind die Thumbnails in Ordnung, dann sollte die Option gleich wieder deaktiviert werden, damit die Thumbnails nicht bei jedem Aufruf neu generiert werden.

Exkurs: Interner Fehler 500 bei sehr vielen Bildern

Sind sehr viele Bilder vorhanden (so ab 60 aufwärts), dann kann es aufgrund von Beschränkungen des Hosters oder Überlast zu einem internen Fehler beim Generieren der Vorschaubilder kommen. Dieses Problem kann man seit der Version 1.5-4 sehr einfach umgehen. Die Option "Anzahl der angezeigten Bilder limitieren?" sollte aktiviert und die Anzahl der Bilder auf etwa 30 gestellt werden. Beim ersten Aufrufen der Seite werden dementsprechend nur 30 Vorschaubilder generiert. Nun muss die Anzahl der angezeigten Bilder erhöht werden, zum Beispiel auf 60. Bereits erstellte Thumbnails werden nicht neu generiert (Option "Zusatz: Thumbnails überschreiben?" muss deaktiviert sein!), es werden nur die neuen 30 Bilder verarbeitet. Das wird solange durchgeführt, bis alle Thumbnails erstellt wurden. Anschließend kann die Limit-Option wieder deaktiviert werden.

Eine einfache Lösung ist auch, bei einem internen Fehler die Seite mit F5 neu zu laden. Dann werden die Thumbnails beim nächsten Bild generiert, bei dem der Abbruch stattfand. Jedoch ist die erste Methode zu empfehlen!

Exkurs: Mehrere Artikel auf einer Seite - unterschiedliche Artikelbilder in einer Galerie

Hinweis: Seit Version 1.5-13 wird die Zählvariable auch bei mehreren Artikeln korrekt gesetzt!

Durch den Parameteraufruf count lässt sich die Zählvariable manuell setzen. Das ist dann wichtig, wenn man mehrere Artikel mit dem Pluginaufruf auf einer Seite anzeigt. Normalerweise wird in jedem Artikel die Zählvariable auf 0 gesetzt. Werden mehrere Artikel auf einer Seite angezeigt, dann werden die Bilder aufgrund der gleichen Variable in eine einzige Galerie zusammengefasst. Mit dem Parameteraufruf count kann das verhindert werden. Wenn mehrere Artikel mit dem Plugin auf einer Seite angezeigt werden, dann sollte die Zählvariable manuell gesetzt werden.

Beispiel: 1. Artikel 1. Galerie - count=1, 1. Artikel 2. Galerie - count=2, 2. Artikel 1. Galerie - count=3 usw.

Exkurs: Rand und Schatten um Thumbnails entfernen

Öffne /plugins/content/plugin_sige/sige.css

Lösche background:url(shadowAlpha.png) no-repeat bottom right!important; - im Selektor .sige_thumb für den Schatten
Lösche padding:4px; - im Selektor .sige_thumb img für den Rand

Changelog

+ = Hinzugefügt - ! = Entfernt - ^ = Geändert - # = Gefixt

Letzte Aktualisierung

Version 5.0.1.0-PRO - 2024-01-04

  • + Added Convert image names option. This option makes the image names human-readable. Example: my-vacation-2024.jpg becomes My Vacation 2024. Thanks to Antonio C. for requesting it!
  • ^ Improved Encoding recognition for IPTC data. In some cases, PHP could not correctly recognise the encoding of the provided IPTC data, which resulted in broken output. However, the detection mechanism has been enhanced, and the likelihood of such mismatches occurring should now be significantly reduced. Thanks to Maeder for reporting it!
  • ^ [PHP82] Resolved an issue of "Deprecated: Implicit conversion from float to int loses precision." in the crop function. Thanks to efrancis76 for reporting it!

Editor Button

Editor Button - SIGE Parameter

Übers Backend installieren und unter Erweiterungen - Plugins - Editor Button - SIGE Parameter konfigurieren. Es stehen 2 Methoden zur Verfügung: On-the-fly-Modalfenster und Parametereinstellungen des Plugins.

1. Methode (empfohlen):
Nach einem Klick auf den SIGE Parameter Button öffnet sich ein Modal-Fenster, in dem man alle Parameter (auch Bildordner) individuell setzen kann. Nach einem Klick auf "Einfügen" werden die gewünschten Parameter ins Textfeld übertragen.

2. Methode:
Gewünschte Parameter im Plugineinstellungsmenü setzen und das Plugin aktivieren. Alle Parameter werden mit einem Tooltip (Überfahren mit der Maustaste) genau erklärt!
Beim Verfassen eines Artikels auf den SIGE Parameter Button klicken. Der Code mit den eingestellten Parametern wird automatisch in den Textbereich geschrieben. Anschließend muss der Bildordner angepasst werden.

Hinweis: Das ist nur ein Hilfsplugin für das Hauptplugin SIGE!

Changelog

+ = Hinzugefügt - ! = Entfernt - ^ = Geändert - # = Gefixt

Download

Übersicht über alle Downloads zu dieser Erweiterung: SIGE - Simple Image Gallery Extended Downloads