meine für die 4.8er erstellte Bildergalerie mit Templates für Bildbeschreibungen (http://forum.contenido.org/viewtopic.php?f=60&t=32166) habe ich für die 4.9er überarbeitet. Die Funktionalität ist gleich geblieben, hinzugekommen ist, dass sich nun auch die Miniaturansichtsseiten responsiv verhalten.
FEATURES:
generell:
# Thumbnails für die Vorschaubilder werden automatisch angelegt/ entfernt.
# Auswahl der Bilderordner per Dropdown.
# Der Konfigurationsbereich für das Modul kann als Popup eingestellt werden damit man sich nach dem Speichern das ggf. notwendige Runterscrollen spart.
# HTML5 Fade-Effekt für Vorschau und Einzelbildanzeige ein-/ ausschaltbar.
Vorschau der Einzelbilder:
# Anzahl der Spalten/ Zeilen pro Vorschauseite frei festlegbar.
# Größe der Thumbnails ist einstellbar, passen sich anhand der festgelegten Spalten und Zeilen der Vorschauseite responsiv an.
# Navigationsleisten zum Blättern durch die Einzelseiten der Vorschau ober- und/oder unterhalb der Thumbnailtabelle einblendbar.
# Reihenfolge der Bilder kann per Textarea individuell vorgegeben werden. Zusätzlich ist eine automatische, alphabetische Sortierung auf- und absteigend per Klick möglich.
Ansicht Einzelbild:
# Darstellung als Vollbild oder Einbindung in das Seitenlayout per Checkbox wählbar.
# Im Vollbild passt sich das Bild der Fensterbreite/ -höhe automatisch an, so dass es immer komplett sichtbar ist. Ist die Vollbilddarstellung nicht gewählt (Einbindung des Einzelbildes in das normale Seitenlayout), gelten entweder festgelegte Pixel-Abgrenzungen der "Bühne" für die Anpassung oder - responsiv - der zur Verfügung stehende Platz.
# Sollte das Bild von den Abmessungen kleiner sein als die max. Höhe/ Breite kann es - wenn per Checkbox vorgegeben - gestreckt werden.
# Im Vollbild kann der Hintergrund des Layers per css frei gestaltet werden (Hintergrundfarbe, Hintergrundbild, Farbverlauf, halbtransparente pngs für Lightbox-Effekt, ...).
# Preloading der Einzelbilder ein-/ ausschaltbar.
# Bildbeschreibungen werden in einer eigenen Datenbanktabelle hinterlegt.
# Wenn ein Bild aus dem Galerieordner entfernt wird, kann die dazu gehörende Beschreibung aus der Tabelle per Bereinigen-Funktion gelöscht werden.
# Bildbeschreibungen können per Templates am Bild positioniert werden
# Per HTML/ CSS können die Bildbeschreibungen frei gestaltet werden, auch Verlinkungen sind möglich.
INSTALLATION
Modul & Co.
# Im Kommentar vom 13.12.2022 finden sich die Sourcen zu Modul-In- und -Output, CSS und Language.
# Kopieren der Bullet-Grafiken im Ordner in einen Ordner der Wahl irgendwo im Upload-Verzeichnis, "voreingestellt" in der Modulausgabe ist "upload/module/gallery_sd/".
# "Synchronisieren" der Module unter "Style -> Module"
# Anpassen der Bildpfade im Modulreiter "CSS" auf den Ordner, in dem die Bullet-Grafiken liegen.
# Ausführen des sql-statements zum Anlegen der Tabelle (in Datei "sql-statement.txt")
# Anlegen einer Vorlage mit dem Modul.
# Anlegen eines Ordners mit Bilddateien für eine Galerie (der Vorschau-Ordner mit den Thumbnails wird automatisch angelegt).
# Anlegen eines Artikels mit entsprechender Vorlage.
# Falls nicht der "Standardmandant" "cms" verwendet wird, bitte die Moduleingabe anpassen (in Abschnitten /***** begin assigning images to gallery *****/ und /*##### sec_templates begin #####*/).
Einrichten einer Galerie über den Reiter "Konfiguration" des angelegten Artikels
1) Oberer Konfigurationsbereich
# Nicht an Fehlermeldungen stören, die verschwinden nach dem ersten Speichern. ;O)
# Aktivieren der Checkbox für "Popup"-Darstellung um nach dem Speichern nicht immer nach unten scrollen zu müssen.
# Auswahl des Ordners mit den Bilddateien für die Galerie.
# Positionierung der Navigationsleisten für die Übersicht und die Einzelbilder festlegen. Bei der Übersicht muss eine Leiste eingebunden werden, bei den Einzelbildern kann sie genutzt werden. Jedes Einzelbild ist mit einem Layer versehen, mit dem man der per Klick auf das Bild (linkes, mittleres oder rechtes Drittel) vor- und zurückblättern sowie zur Übersicht zurückkehren kann.
# Festlegen der Thumbnailgröße. Wird später eine andere Thumbnailgröße gewünscht, einfach neue Größe eintragen und die Checkbox für das Erzeugen neuer Thumbnails aktivieren. Beim Speichern werden die alten Thumbs gelöscht und die neuen angelegt. Diese Thumbs werden in der Miniaturansicht skaliert.
# Anzahl der Zeilen und Spalten für die Übersichtsseiten eintragen.
# unter "Einzelbild" für oder gegen die Vollbilddarstellung entscheiden. Bei Vollbild, ist es ratsam zunächst einen einfarbigen Hintergrund zu wählen und im entsprechenden Input-Feld z. B. "background-color: #ffffff;" einzutragen. Bei Hintergrundbildern bitte KEINE ' verwenden -> url('pfad');! (Führt in der aktuellen Version noch zum Abbruch des Programmcodes und die Galerie muss neu angelegt werden.)
Entscheidet man sich gegen die Vollbilddarstellung, muss die Größe der Bühne festgelegt werden - sprich, die Größe des Bereichs die dem Bild inkl. Beschreibung im Seitenlayout maximal zur Verfügung stehen soll. Die Darstellung passt sich diesem Bereich automatisch an. Dabei können entweder Pixelabmessungen fest vorgegeben oder eine responsive Variante gewählt werden.
# Die Einzelbilder können über ihre eigentlichen Abmessungen hinaus proportional gestreckt werden, damit sie das gesamte Fenster ausfüllen oder nicht - Checkbox also ggf. aktivieren.
# Bei Aktivierung von "Bilder vorladen" werden beim Aufruf der Galerieübersichtsseiten noch nicht angeschaute Einzelbilder in den Browsercache geladen, damit sie beim Durchblättern der Einzelbildansicht direkt erscheinen und flüssig einfaden.
# Der Einfade-Effekt kann für die Übersichtsseiten und/ oder Einzelbildansicht (de-)aktiviert werden.
# Speichern.
2) Unterer Konfigurationsbereich
a) Reihenfolge der Bilder
# Oben links werden alle im ausgewählten Ordner enthaltenen Bilder angezeigt. Sind die Miniaturen blass dargestellt, wurde das Bild nicht in der Galerie berücksichtigt. Ist es dagegen "normal" gefärbt, wurde es eingereiht. Per Klick auf "wählen" lassen sich alle Dateinamen markieren und per Strg+c kopieren.
# Oben rechts werden alle nicht berücksichtigten Bilder des ausgewählten Ordners aufgeführt Per Klick auf "wählen" lassen sich auch hier alle Dateinamen markieren und per Strg+c kopieren. WICHTIG: eingelesen werden Bilddateien mit den Dateiendungen ".gif,.png,.jpg". Auf Groß-/ Kleinschreibung achten! (Änderungen im Quelltext der Modul-Eingabe unter /*##### sec_all_pics_in_folder begin #####*/ möglich.)
# Unten links befindet sich das Textfeld, in das die oben links oder oben rechts kopierten Dateinamen eingefügt werden können. Beim Einfügen wird meist eine überflüssige Zeile am Ende mit eingefügt. Diese bitte löschen.
# Speichern.
# Wenn unten links eine Warnung "getimagesize..." erscheinen sollte, wird vermutlich vor dem ersten Dateinamen ein Leerzeichen sein, welches nur gelöscht werden muss.
# Die Reihenfolge kann per Klick auf die Buttons "A-Z" und "Z-A" alphabetisch sortiert werden. Danach speichern, damit die Änderung bei den Miniaturen links neben dem Textfeld sichtbar wird.
# Wird ein neues Bild in den Ordner hochgeladen, erscheint es automatisch oben rechts im Bereich "Nicht in Galerie berücksichtigte Bilder". Zum Einfügen in die Galerie einfach den Dateinamen kopieren und unten links in einer eigenen Zeile einfügen (ggf. erzeugte überflüssige Leerzeilen/ -zeichen löschen).
# Sollte ein Dateiname einmal nicht korrekt geschrieben oder ein Bild aus dem Ordner gelöscht worden sein, wird es in der Bildvorschau links neben dem Textfelt nicht mehr angezeigt. Statt dessen macht ein Platzhalter auf das fehlende/ nicht korrekt bezeichnete Bild aufmerksam.
# Zum Ändern der Reihenfolge der Bilder muss nur die entsprechende Zeile verschoben werden. Auch ganze Blöcke lassen sich so per cut'n'paste verschieben.
# Zur besseren Orientierung werden die Seitenzahlen der Übersichtsseiten an den Miniaturen der entsprechenden Startbilder angezeigt.
# Wem die Bilder zu klein sind, der kann per Mouseover eine vergrößerte Version anzeigen lassen.
b) Bildbeschreibung
# Die Bildbeschreibung wird in eines der vorgefertigten Templates 2 bis 4 eingefügt:
2: Bild links, Text rechts
3: Text links, Bild rechts
4: Bild oben, Text unten
Das Template Nr. 1 beinhaltet lediglich das Bild und wird bei der Darstellung automatisch ausgewählt wenn kein anderes Template zugewiesen wurde.
# Unten rechts kann im ersten Dropdown zunächst einmal das gewünschte Bild ausgewählt werden.
# Nach dem klick auf [->] kommt ein zweites Dropdown zur Templateauswahl hinzu.
# Im Textfeld für die Beschreibung kann nun ebensolche erfasst werden.
# Wer Wert auf freie Gestaltung legt, kann sich per html und css austoben. Wichtig ist hierbei, dass statt der sonst üblichen Anführungszeichen " der Platzhalter ### genutzt wird.
Die unterhalb des Textfeldes aufgeführten Klassen können direkt verwendet werden. Beispiele zur Einbindung sind aufgeführt. Die Klassen können natürlich über den Modulreiter "CSS" verändert und ergänzt werden. Damit sie im Backend zur Erläuterung erscheinen, muss die Modul-Eingabe entsprechend angepasst werden.
Wichtig: Zum Speichern der Beschreibung die Checkbox "anwenden" aktivieren. Die Checkbox ist notwendig, um ein versehentliches Überschreiben von anderen Bildbeschreibungen zu verhindern.
# Im Dropdown für die Auswahl des Bildes erhalten alle mit einer Beschreibung versehenen Bilder eine Markierung mit der Nummer des verwendeten Templates. Ändert man das Layout eines Templates, sind automatisch alle mit diesem Template versehenen Bilder von der Änderung betroffen. Gleiches gilt natürlich für die Nutzung der für die Gestaltung der Beschreibung festgelegten css-Klassen.
# Werden Bilder aus dem Galerieordner gelöscht, verbleiben ggf. erfasste Beschreibungen in der Datenbanktabelle. Damit die nicht im Laufe der Zeit zumüllt (in die Tabelle werden alle Beschreibungen aller Bilder sämtlicher Galerien gespeichert) kann die Checkbox "Datenbank bereinigen" im oberen Konfigurationsbereich aktiviert werden. Dann einfach irgendein Bild unten rechts bei der Templatezuordnung auswählen und beim anschließenden Speichern wird die Datenbank gesäubert. Statusmeldungen zur Prüfung werden angezeigt.
ANPASSEN der Bildergalerie
# Die Bullet-Grafiken können natürlich ausgetauscht und die CSS-Klassen angepasst werden.
# Die Optik der Statusanzeige für das Preloading kann in der Modulausgabe ab der Zeile /********** BEGIN THUMBTABLE **********/ geändert werden.
# Die Geschwindigkeit des Einfadens wird über die CSS-Klassen geregelt. Dort also Ausschau halten nach den Angaben zu den Sekunden für transition und duration.
# Aktuell sind vier Templates enthalten, sie können beliebig geändert und/ oder um weitere ergänzt werden. Los geht's in der Modulausgabe ab Zeile /********** templates begin **********/
Die Anpassung der Templates ist nicht ganz trivial, da für die flexible Anpassung der Einzelbildanzeige an den zur Verfügung stehenden Platz die aktuellen Fenster-/ Bühnenabmessungen gegeneinander gerechnet werden und dann auf das Template umgerechnet werden müssen. Hierzu sollte man sich ein wenig mit den Variablen beschäftigen. Am besten also die Werte beim Basteln ausgeben lassen...
Die Standardanzeigen sind ja schon enthalten und wer lediglich die Aufteilung Bild/Text (70:30%) bzw. Text/Bild (30:70 %) anpassen möchte, der kann direkt an den JS-Variablen var_left_width und var_right_width rumschrauben. So lässt sich per copy'n'paste schnell ein weiteres Template Nr. 5 zum Beispiel mit der Aufteilung 50:50% erstellen.
Viel Spaß mit der Galerie
Kurioserweise läuft das bei mir in einer 4.9.6er problemlos. Erst, wenn ich die Inhalte der Variablen $htmlpath und $frontendpath per echo ausgeben will, dann kracht's bei mir auch. Also, lange Rede kurzer Sinn: schmeiss den Part hier einfach komplett raus: