Isotope Gallery ist ein Joomla-Modul für responsive Bild- und Videogalerien mit Filterfunktionen, optionaler Bildgrößenanpassung, verschiedenen Layouts und einem LightGallery-Popup-Viewer.
1. Voraussetzungen
- Joomla 3.6 oder neuer, PHP 8+.
- Das Modul muss installiert sein in
modules/mod_mx_isotopegallery. - Für die Bildgrößenanpassung werden PHP-GD-Unterstützung und ein beschreibbares Joomla-Cache-Verzeichnis empfohlen.
- Bei YouTube- und Vimeo-Elementen muss der Browser des Besuchers in der Lage sein, die externen Medien zu laden.
2. Installation und Veröffentlichung
- Öffnen Sie im Joomla-Administrator „System > Installieren > Erweiterungen“.
- Laden Sie
mod_mx_isotopegallery.zipund schließen Sie die Installation ab. - Öffnen Sie „Erweiterungen > Module“ und erstellen oder bearbeiten Sie ein Isotope-Galerie-Modul.
- Wählen Sie eine Template-Position aus, setzen Sie das Modul auf „Veröffentlicht“ und konfigurieren Sie die Menüzuordnung.
- Speichern Sie das Modul und öffnen Sie eine zugewiesene Frontend-Seite.
Das Paket verwendet Dateien aus seinem assets, core, field, elementsund tmpl Verzeichnisse. Behalten Sie diese Verzeichnisse bei, wenn Sie das Modul verschieben oder aktualisieren.
3. Schnellstart
- Wählen Sie unter „Quelle“ die Option „Artikel“, „Benutzerdefinierte Elemente“ oder „Ordner“ aus.
- Konfigurieren Sie die für diese Quelle angezeigten Felder und fügen Sie mindestens ein verwendbares Element oder einen Artikel hinzu.
- Wählen Sie unter „Layout“ die Option „Galerie“ oder „Isotope“ und legen Sie anschließend die Anzahl der Spalten fest.
- Legen Sie fest, ob die Popup-Galerie aktiviert sein soll, und konfigurieren Sie deren Steuerelemente in den Galerieeinstellungen.
- Veröffentlichen Sie das Modul an einer Position, die von der aktiven Vorlage gerendert wird.
4. Quellenoptionen
Artikel
Artikel werden aus der Joomla-Komponente com_content und beschränken sich auf veröffentlichte, zugängliche Artikel sowie die aktive Sprache.
- Mit „Kategorie auswählen“ werden die Artikelkategorien ausgewählt.
- „Artikel aus Unterkategorien“ bezieht Unterkategorien mit ein, sofern diese Option aktiviert ist.
- „Kategorietiefe“ begrenzt die Anzahl der einbezogenen Unterebenen.
- „Empfohlene Artikel“ zeigt alle Artikel an, blendet sie aus oder zeigt nur empfohlene Artikel an.
- „Sortierfeld“ unterstützt die Sortierung nach Manager-Reihenfolge, Reihenfolge der vorgestellten Artikel, Aufrufen, Titel, ID, Alias und Veröffentlichungsdatum.
- „Sortierrichtung“ wählt die aufsteigende oder absteigende Reihenfolge aus.
- „Anzahl“ legt die maximale Anzahl an Artikeln fest. Der Wert
0bedeutet „keine Begrenzung“. - „Link öffnen“ öffnet den Artikel im selben Fenster, in einem neuen Fenster oder in einem Popup-Fenster.
Artikeltext und Metadaten
- Kategorietitel, Artikeltitel, Beschreibung, Datum, Autor und „Weiterlesen“ können ein- oder ausgeblendet werden.
- „Maximale Länge des Titels“ und „Maximale Länge der Beschreibung“ kürzen den angezeigten Text. Verwenden Sie
0, um den gesamten Text anzuzeigen. - Das Datumsformat akzeptiert die aufgeführten PHP-Datumsformate, wie z. B.
Y-m-dundl, d F Y. - „Weiterlesen“-Text ändert die Bezeichnung, die für den Artikel-Link verwendet wird.
Benutzerdefinierte Elemente
Benutzerdefinierte Elemente werden im Unterformular „Elemente“ eingegeben. Fügen Sie für jedes Galerieelement eine Zeile hinzu.
| Feld | Verwendung |
|---|---|
| Typ | Wählen Sie image, youtubeoder vimeo. |
| Bild | Wählen Sie ein Joomla-Medienbild aus, wenn der Typ image. |
| YouTube / Vimeo | Fügen Sie die vollständige Video-URL für den ausgewählten Videotyp ein. |
| Filtername | Geben Sie einen oder mehrere Filterklassennamen ein, die durch Leerzeichen getrennt sind, zum Beispiel nature featured. |
| Titel, Autor, Info | Optionaler Text, der zusammen mit dem Eintrag angezeigt wird. |
| Link „Weiterlesen“ | Optionale URL, die dem Titel des Eintrags hinzugefügt wird. |
| Link in neuem Fenster öffnen | Wählen Sie aus, ob der „Weiterlesen“-Link im aktuellen oder in einem neuen Fenster geöffnet werden soll. |
| Elementhöhe für den Galerie-Stil | Verwenden Sie „Normal“ oder „Doppelt“. Dies gilt für das Galerie-Layout, nicht für das Isotope-Layout. |
Um benutzerdefinierte Filter zu verwenden, aktivieren Sie „Filter verwenden“, erstellen Sie Filternamen im Unterformular „Filter“ und verwenden Sie dieselben Namen im Feld „Filtername“ jedes Elements.
Ordner
Wählen Sie ein Verzeichnis unterhalb des images Verzeichnis mit „Ordnerverzeichnis“ aus. Das Modul durchsucht dieses Verzeichnis und seine Unterverzeichnisse.
- Die Bildreihenfolge unterstützt alphabetische Reihenfolge, „Neueste zuerst“ und zufällige Reihenfolge.
- Zu den unterstützten lokalen Mediendateiendungen gehören
jpg,jpeg,png,gif,bmp,webp,mp4,webm,ogg,ogv,mov, undm4v. - „Bildtitel“ zeigt den Dateinamen ohne Dateiendung an. Unterstriche, Bindestriche und Zahlen werden in Leerzeichen umgewandelt.
- Wenn „Filterung verwenden“ aktiviert ist, werden die Namen der Unterordner der ersten Ebene zu Filter-Schaltflächen.
images/gallery/landscape/sunrise.jpg
images/gallery/portrait/person.jpg
Bei images/gallery ausgewählt, landscape und portrait können als Ordnerfilter verwendet werden.
5. Filterung
Artikel-Filter
Aktivieren Sie für Artikel Kategorie- und/oder Tag-Filter. Die Filter-Schaltflächen werden aus den Kategorien und Tags generiert, die in den geladenen Artikelergebnissen vorhanden sind. Aktivieren Sie „Filterbezeichnungen anzeigen“, um die konfigurierten Bezeichnungen anzuzeigen, und aktivieren Sie „Schaltfläche ‚Alle‘ anzeigen“, um die Schaltfläche „Alle Elemente“ mit dem Text aus dem Feld „Text der Schaltfläche ‚Alle‘“ anzuzeigen.
Benutzerdefinierte Elementfilter
Benutzerdefinierte Filternamen sind CSS-Klassennamen. Halten Sie die Namen einfach und verwenden Sie in der Filterdefinition und in den Elementzeilen dieselbe Schreibweise. Wenn ein Element mehrere Namen enthält, erscheint es in jedem passenden Filter.
Ordnerfilter
Ordnerfilter verwenden die erste Verzeichnisebene unterhalb des ausgewählten Ordners. Dateien, die sich direkt im ausgewählten Ordner befinden, gehören nicht zu einem benannten Ordnerfilter, bleiben aber über „Alle“ sichtbar.
6. Bilder und Größenanpassung
Bildquellen für Artikel
Aktivieren Sie die gewünschten Bildquellen und legen Sie deren Priorität unter „Reihenfolge zum Abrufen“ fest. Die Standardreihenfolge lautet:
image_intro, image_fulltext, inline_introtext, inline_fulltext
- „Aus Bild-Einleitung“ liest das Einführungsbild des Artikels ein.
- „Aus Bild-Volltext“ liest das Volltextbild des Artikels ein.
- „Aus Inline-Einleitungstext“ sucht nach Bildern innerhalb des Einleitungstextes.
- „Aus Inline-Volltext“ sucht nach Bildern im Volltext.
Es wird das erste verfügbare Bild in der konfigurierten Reihenfolge verwendet. „Placeholder Path“ liefert das Ersatzbild, wenn kein Artikelbild verfügbar ist.
Einstellungen zur Größenanpassung
Stellen Sie den Größenanpassungsmodus auf eine der Optionen ein, um zwischengespeicherte Versionen lokaler Bilder zu erstellen. Bei „Keine“ bleibt das Originalbild unverändert.
- „Zentrieren“ passt die Größe an und zentriert dabei das Ergebnis.
- „Füllen“ passt die Größe so an, dass die gewünschten Abmessungen ausgefüllt werden, wobei die Ränder möglicherweise beschnitten werden.
- „Anpassen“ hält das Bild innerhalb der gewünschten Abmessungen.
- „Dehnen“ erzwingt die gewünschten Breite und Höhe und kann das Seitenverhältnis verändern.
- Die Komprimierungsqualität akzeptiert Werte von 1 bis 100.
- „Ausgabeformat“ kann das Quellformat beibehalten oder GIF, JPEG, PNG oder WEBP erzeugen.
- „Transparenz beibehalten“ gilt für die Ausgabe im GIF- und PNG-Format.
- „Bildbreite“ und „Bildhöhe“ legen die Zielabmessungen fest. Die Werte müssen größer als Null sein, wenn die Größenanpassung aktiviert ist.
Die generierten Dateien werden im Verzeichnis „resize“ des Joomla-Caches gespeichert. Stellen Sie sicher, dass PHP dieses Verzeichnis erstellen und darin schreiben kann. Externe Bilder und Videodateien werden vom Bildgrößenanpassungs-Helper nicht verarbeitet.
7. Layout und Darstellung
- Layout: „Galerie“ verwendet die Darstellung als Galerie-Element; „Isotope“ verwendet die Isotope-Raster-Darstellung.
- Parallax-Effekt: Aktiviert Parallax-Bilder für das Isotope-Layout.
- Spalten: Wählt eine bis sechs Spalten aus.
- Stil: Wählt das Stylesheet „Hell“ oder „Dunkel“ aus.
- Details: Zeigt Details beim Darüberfahren mit der Maus an oder standardmäßig.
- Farbe: Legt die Akzentfarbe für Hintergründe, Links und aktive Filter fest.
- Abstand zwischen Elementen: Legt den Abstand zwischen den Elementen fest.
- Font Awesome: Lädt Font Awesome 4 oder 5 nur bei Bedarf, um die Kompatibilität mit Symbolen zu gewährleisten.
- SEO-Korrekturen: Aktivieren Sie diese Option, wenn die Vorlage den Stammpfad der Website zu den Miniaturansichten der Galeriebilder hinzufügen muss.
- jQuery laden: Nur aktivieren, wenn die Vorlage noch kein jQuery bereitstellt.
- Benutzerdefiniertes CSS: Fügt der Seite CSS-Deklarationen hinzu. Beschränken Sie die Selektoren auf das Modul, um Änderungen an anderen Komponenten zu vermeiden.
8. Galerie-Einstellungen
Diese Einstellungen konfigurieren das LightGallery-Popup. Sie wirken sich nur aus, wenn „Popup-Galerie verwenden“ aktiviert ist.
| Einstellung | Wirkung |
|---|---|
| Weißes Design | Verwendet das weiße Design der LightGallery. |
| Übergangstyp | Verwendet einen Fade- oder Slide-Übergang. |
| Schleife | Ermöglicht die Navigation vom letzten Element zurück zum ersten. |
| Download-Schaltfläche | Blendet das Download-Steuerelement ein oder aus. |
| Miniaturansicht | Blendet Miniaturansichten ein oder aus. |
| Miniaturbild-Animation | Verwendet animierte oder statische Miniaturansichten. |
| Automatische Wiedergabe / Steuerelemente für die automatische Wiedergabe | Startet die automatische Wiedergabe und legt fest, ob die Wiedergabesteuerung sichtbar ist. |
| Zeit zwischen den Übergängen | Legt die Pause bei der automatischen Wiedergabe in Millisekunden fest. |
| Dauer des Übergangs | Legt die Animationsdauer in Millisekunden fest. |
| Vollbild, Zoom, Mausrad, Teilen | Aktiviert oder deaktiviert die entsprechende Viewer-Funktion. |
| Drehsteuerelemente | Aktiviert Dreh- und Spiegelungswerkzeuge mit separaten Schaltern für jedes Steuerelement. |
| Drehgeschwindigkeit | Legt die Dauer der Drehanimation in Millisekunden fest. |
Videos aus lokalen Ordnern sowie benutzerdefinierte YouTube- oder Vimeo-Elemente nutzen die Videounterstützung der Galerie, wenn das Popup aktiviert ist. Die Richtlinien zur automatischen Wiedergabe im Browser erfordern möglicherweise eine stummgeschaltete Wiedergabe oder eine Benutzerinteraktion.
9. Erweiterte Einstellungen
- „Modulklassen-Suffix“ fügt dem Modul-Wrapper ein Klassen-Suffix für vorlagenspezifisches Styling hinzu.
- „Alternatives Layout“ wählt eine verfügbare Überschreibung des Modullayouts aus.
- „Caching“ kann die globale Joomla-Einstellung verwenden oder das Modul-Caching deaktivieren.
- „Cache-Dauer“ legt die Lebensdauer des Caches fest, wenn das Caching aktiviert ist.
10. Fehlerbehebung
Es werden keine Elemente angezeigt
- Stellen Sie sicher, dass das Modul veröffentlicht, dem aktuellen Menüpunkt zugewiesen und an einer gerenderten Template-Position platziert ist.
- Überprüfen Sie bei Artikeln den Veröffentlichungsstatus, die Zugriffsebene, die Sprache, die Kategorien, die Einstellungen für „Empfohlene Artikel“ und die Anzahl.
- Bei benutzerdefinierten Elementen stellen Sie sicher, dass das Unterformular Elemente enthält und dass die Bild- oder Video-URLs gültig sind.
- Bei Ordnern überprüfen Sie, ob der ausgewählte Pfad unterhalb
imagesund unterstützte Dateien enthält.
Filter fehlen
Artikel-Filter werden ausschließlich aus den Ergebnissen des aktuellen Artikels erstellt. Benutzerdefinierte Filter erfordern übereinstimmende Namen sowohl in der Filterliste als auch in den Elementzeilen. Ordner-Filter erfordern Unterverzeichnisse der ersten Ebene.
Bilder werden nicht in der Größe angepasst
Wählen Sie einen Modus zur Größenanpassung, geben Sie positive Abmessungen ein, stellen Sie sicher, dass PHP GD unterstützt wird, und überprüfen Sie, ob das Joomla-Cache-Verzeichnis beschreibbar ist. Die Größenanpassung gilt für lokale Bilder, nicht für Remote-URLs oder Videos.
Das Popup-Fenster öffnet sich nicht
Aktivieren Sie „Popup-Galerie verwenden“, überprüfen Sie auf JavaScript-Fehler oder Bibliothekskonflikte und vermeiden Sie das Laden einer zweiten, inkompatiblen jQuery-Kopie. Leeren Sie den Joomla- und den Browser-Cache, nachdem Sie Skripte oder Stile geändert haben.
Das Video wird nicht abgespielt
Überprüfen Sie die Medien-URL, die Dateiberechtigungen, den MIME-Typ, die Browserunterstützung sowie die Datenschutz- oder Einbettungseinstellungen des externen Anbieters. Die automatische Wiedergabe kann vom Browser blockiert werden, bis der Besucher mit der Seite interagiert.
11. Aktualisieren
Sichern Sie vor dem Aktualisieren die Modulkonfiguration und die Website-Dateien. Installieren Sie die neuere ZIP-Datei über den Erweiterungsinstallateur von Joomla. Das Erweiterungsmanifest gibt einen Update-Server an, sodass Joomla möglicherweise auch Updates anbietet, wenn der Server erreichbar ist.
