Gallery Revolution: Einrichtung und Hilfe

Laden Sie mprgalleryrevolution hoch, installieren Sie es und klicken Sie auf "Configure". Öffnen Sie Galerie > Einstellungen > Konfiguration. Wählen Sie ein Testprodukt mit mehreren nativen PrestaShop-Bildern.

Lassen Sie Produktgalerie aktivieren aktiviert. Öffnen Sie das Produkt und bestätigen Sie, dass genau eine nutzbare Galerie erscheint. Das Modul liest native Produktbilder und unterstützt außerdem zugeordnete Medien der Produktgalerie. Sie müssen keinen Galeriedatensatz erstellen, um native Produktbilder anzuzeigen.

Der Produkt-Hook ist displayAfterProductThumbs ab PrestaShop 1.7 und displayLeftColumnProduct unter 1.6.1. Das Modul integriert sich außerdem in native Galerievorlagen und gemeinsame Galerieanbieter. Wenn Ihr angepasstes Theme diesen Bereich verändert, testen Sie die Integration, bevor Sie die vorhandene Galerie ausblenden.

Unter Galerie > Einstellungen > Konfiguration:

• Produktgalerie aktivieren. Ersetzt die native Produktgalerie auf Produktseiten durch Gallery Revolution; Standard: true.
• Galerie-Layout. Wählt das Layout der Produktgalerie: carousel, grid oder filmstrip; Standard: carousel.
• Vorschaubilder-Position. Platziert Miniaturbilder bei bottom, left, right, dots oder none; Standard: bottom.
• Vorschaubilder-Layout. Wählt eine einzelne scrollbare Miniaturbildzeile oder ein Raster mit mehreren Zeilen; Standard: swiper.
• Vorschaubild-Spalten. Legt die Spaltenzahl für Miniaturbilder im unteren Rastermodus fest; Standard: 6.
• Maximale Vorschaubild-Zeilen. Begrenzt die Rasterzeilen vor dem Scrollen, wobei 0 unbegrenzt bedeutet; Standard: 0.
• Vorschaubild-Abstand. Legt den Abstand zwischen Miniaturbildern im Raster in Pixeln fest; Standard: 8.
• Deckkraft inaktiver Miniaturbilder. Legt die Deckkraft nicht aktiver Miniaturbilder von 0 bis 1 fest; Standard: 0.6.
• Galerie-Hintergrund. Aktiviert eine Hintergrundfarbe hinter dem Hauptbild der Galerie; Standard: false.
• Galerie-Hintergrundfarbe. Legt die Hintergrundfarbe der Galerie fest, wenn der Galeriehintergrund aktiviert ist; Standard: transparent.
• Zoom aktivieren. Aktiviert Zoom-Steuerelemente in der Lightbox für Produktbilder; Standard: true.
• Automatische Wiedergabe. Startet das Karussell der Produktgalerie automatisch; Standard: false.
• Automatische Wiedergabeverzögerung. Legt die Verzögerung der automatischen Wiedergabe in Millisekunden fest; Standard: 5000.
• Native Galerie ausblenden. Fügt Modul-CSS hinzu, das die native PrestaShop-Produktgalerie ausblendet; Standard: true.

Verwenden Sie Miniaturbilder als unteres Raster, wenn mehrere Zeilen sichtbar sein sollen. Ändern Sie Vorschaubild-Spalten, Maximale Vorschaubild-Zeilen und Vorschaubild-Abstand gemeinsam. 0 maximale Zeilen bedeutet keine Zeilenbegrenzung. Passen Sie mit Deckkraft inaktiver Miniaturbilder den Kontrast nicht ausgewählter Miniaturbilder an.

Native Bilder synchronisieren ist kein sichtbares Feld in dieser Konfiguration. Native Produktbilder werden direkt gelesen; ihre ursprünglichen PrestaShop-Datensätze bleiben die Quelle.

• Lightbox aktivieren. Öffnet Bilder der Produktgalerie beim Anklicken in PhotoSwipe; Standard: true.
• Lightbox-Overlay-Farbe. Legt die Hintergrundfarbe des PhotoSwipe-Overlays fest; Standard: #ffffff.
• Lightbox-Overlay-Deckkraft. Legt die Deckkraft des Overlays von 0 bis 1 fest; Standard: 0.95.
• Beschriftungen in der Lightbox anzeigen. Ermöglicht Bildunterschriften im PhotoSwipe-Betrachter; Standard: true.
• Lightbox-Beschriftungsfarbe. Legt die Textfarbe der Bildunterschriften in der Lightbox fest; Standard: #ffffff.
• Lightbox-Steuerungsfarbe. Legt die Farbe der Lightbox-Steuerelemente wie Schließen, Pfeile und Symbolleistenschaltflächen fest; Standard: #ffffff.
• Lightbox-Miniaturstreifen. Zeigt einen Miniaturbildstreifen innerhalb der Lightbox; Standard: true.
• Vorschaustreifen-Position (Desktop). Platziert den Miniaturbildstreifen der Lightbox bei left, right, top oder bottom; Standard: left.
• Vorschaustreifen-Position (Mobil). Platziert den Miniaturbildstreifen der mobilen Lightbox bei top oder bottom; Standard: top.
• Bildunterschriften aktivieren. Zeigt Bildunterschriften aus PrestaShop-Bildlegenden oder eigenen Medienunterschriften; Standard: false.
• Beschriftungsanzeige. Zeigt Bildunterschriften unter der Galerie, in der Lightbox oder an beiden Stellen; Standard: both.
• Name des Foto-URL-Parameters. Legt den übersetzten Abfrageparameter für Bildlinks fest, zum Beispiel ?photo=2; Standard: photo.
• Deep-Link-Aktion. Entscheidet, ob ein Bildlink das Bild auswählt oder die Lightbox öffnet; Standard: lightbox.
• Teilen/Link-kopieren-Schaltfläche anzeigen. Fügt eine Schaltfläche hinzu, die einen direkten Link zum aktuellen Bild kopiert; Standard: true.

Die aktuellen Standardwerte sind ein weißes Overlay mit 0.95 Deckkraft und ein sichtbarer Miniaturbildstreifen in der Lightbox. Prüfen Sie den Kontrast von Steuerelementen und Bildunterschriften, wenn Sie den Hintergrund ändern.

Verwenden Sie Bildunterschriften aktivieren und Beschriftungsanzeige zusammen mit den Einstellungen für Lightbox-Bildunterschriften. Die Texte stammen aus nativen Bildlegenden oder Unterschriften zugeordneter Medien. Ein Bild ohne Bildunterschrift erhält allein durch das Aktivieren der Funktion keinen aussagekräftigen Text.

Legen Sie Name des Foto-URL-Parameters für jede Sprache fest. Mit dem Standardwert photo kann ein Link so aussehen: https://example.com/product-name.html?photo=2. Deep-Link-Aktion ist standardmäßig lightbox; alternativ können Sie ein Bild auswählen lassen oder die verfügbare Aus-Option verwenden. Teilen/kopieren Sie den Link und testen Sie ihn in einem neuen Browser-Tab.

• Lightbox für Inhaltsbilder aktivieren. Wendet PhotoSwipe auf konfigurierte Bilder innerhalb von Seiteninhalten an; Standard: true.
• Selektoren für Inhaltsbilder. Definiert per CSS-Selektor, welche Inhaltsbilder einbezogen werden; Standard: .rte img, .cms-content img, .page-content.page-cms img, .category-description img, .product-description img, .product-description-short img, .mce-content-body img, .mpr-seo-row__img img, figure img.
• Ausgeschlossene Bildselektoren. Schließt Bilder aus, die diesen Selektoren entsprechen. Standard: .mprgallery img, .pswp img, img[data-mprgallery-ignore], img[data-no-lightbox], img.mprgallery-content-lightbox-ignore, footer img, #footer img. Ergänzen Sie bei Bedarf Theme-spezifische Ausschlüsse.
• Miniaturen in der Inhalts-Lightbox anzeigen. Zeigt eine Miniaturbildnavigation für Inhaltsbilder; Standard: true.
• Position der Miniaturen. Platziert Miniaturbilder der Inhalts-Lightbox bei bottom, top, left oder right; Standard: bottom.
• Mindestbreite des Bildes. Ignoriert schmalere Inhaltsbilder, damit Symbole und Abzeichen nicht in der Lightbox geöffnet werden; Standard: 120.
• Mindesthöhe des Bildes. Ignoriert niedrigere Inhaltsbilder, damit Symbole und Abzeichen nicht in der Lightbox geöffnet werden; Standard: 80.

Die Standardselektoren decken Rich Text, CMS, Kategorie-/Produktbeschreibungen, Editorinhalte, SEO-Bildzeilen und Abbildungen ab. Passen Sie die Selektoren an Ihr Theme an. Die Standardausschlüsse umfassen Bilder im Footer sowie Galerie-/Lightbox-Bilder und ausdrücklich ausgeschlossene Bilder.

So geben Sie das Bild in voller Größe und das Miniaturbild ausdrücklich an:

<img src="/img/cms/example-small.jpg"
     data-mprgallery-full="/img/cms/example-large.jpg"
     data-mprgallery-thumb="/img/cms/example-thumb.jpg"
     data-pswp-width="1600" data-pswp-height="1200"
     alt="Your image description">

Verwenden Sie die tatsächlichen Abmessungen in voller Größe. Um ein Symbol, Abzeichen oder dekoratives Bild auszuschließen, fügen Sie ein Attribut oder eine Klasse hinzu:

<img src="/img/cms/badge.png" alt="Badge" data-no-lightbox>
<img src="/img/cms/logo.png" alt="Logo" data-mprgallery-ignore>
<img src="/img/cms/icon.png" alt="Icon" class="mprgallery-content-lightbox-ignore">

Wenn ein Bild nicht einbezogen wird, prüfen Sie seinen Selektor, Ausschlüsse und Mindestgröße, bevor Sie JavaScript ändern.

• Kunden-Uploads aktivieren. Aktiviert die Kundenfoto-Funktion; Standard: true.
• Kauf erforderlich. Akzeptiert Kunden-Uploads nur von angemeldeten Kunden mit einer gültigen Bestellung für das Produkt; Standard: true.
• Max. Dateien pro Upload. Begrenzt die Anzahl der Fotos, die das Kunden-Uploadformular gleichzeitig akzeptiert; Standard: 5.
• Max. Dateigröße. Legt die maximale Größe eines Kundenfotos in MB fest; Standard: 5.
• Uploads automatisch genehmigen. Veröffentlicht Kundenfotos ohne manuelle Moderation; Standard: false.

Kunden müssen sich zum Hochladen einer Datei anmelden, auch wenn Kauf erforderlich deaktiviert ist. Bei der standardmäßig aktivierten Kaufanforderung benötigen sie eine gültige Bestellung für dieses Produkt. Uploads akzeptieren JPEG-, PNG- und WebP-Bilddateien innerhalb der konfigurierten Größe je Datei. Zusätzlich gelten die Upload-Limits des Servers.

Bei aktivierter Option Kunden-Uploads aktivieren erscheint der Bereich Kundenfotos, wenn genehmigte Fotos vorhanden sind oder der angemeldete Kunde zum Hochladen berechtigt ist. Berechtigte Kunden können das erste Foto für ein Produkt ohne genehmigte Fotos einreichen. Ab PrestaShop 1.7 verwendet der Bereich einen Tab für zusätzliche Produktinhalte; unter 1.6.1 verwendet er displayProductTabContent.

Öffnen Sie Galerie > Kundenfotos, um vorhandene Einreichungen zu genehmigen, abzulehnen oder zu löschen. Ausstehende Fotos sind nicht öffentlich. Uploads automatisch genehmigen ist standardmäßig deaktiviert. Die Platzierung hängt davon ab, dass Ihr Theme den entsprechenden Produkt-Hook ausgibt.

• Bildtypen automatisch erkennen. Lässt das Modul geeignete PrestaShop-Bildtypen für Hauptbilder, Miniaturbilder und Lightbox-Bilder auswählen; Standard: true.
• Lightbox-Bildtyp. Legt den PrestaShop-Bildtyp für Lightbox-Bilder fest, wenn die automatische Erkennung deaktiviert ist; Standard: thickbox_default.
• Hauptanzeige-Bildtyp. Legt den PrestaShop-Bildtyp für das Hauptbild der Galerie fest, wenn die automatische Erkennung deaktiviert ist; Standard: medium_default.
• Vorschaubild-Typ. Legt den PrestaShop-Bildtyp für Miniaturbilder fest, wenn die automatische Erkennung deaktiviert ist; Standard: small_default.
• JPEG-Qualität. Legt die JPEG-Qualität für Varianten hochgeladener Galeriebilder fest; Standard: 85.
• WebP generieren. Erstellt WebP-Varianten hochgeladener Galeriebilder, wenn der Server dies unterstützt; Standard: true.
• AVIF generieren. Erstellt AVIF-Varianten hochgeladener Galeriebilder, wenn der Server dies unterstützt; Standard: false.
• Große Bildbreite. Legt die Breite der erzeugten großen Variante in Pixeln fest; Standard: 1200.
• Mittlere Bildbreite. Legt die Breite der erzeugten mittleren Variante in Pixeln fest; Standard: 600.
• Vorschaubild-Breite. Legt die Breite der erzeugten Miniaturbilder in Pixeln fest; Standard: 120.
• Lazy Loading. Lädt weitere Bilder der Produktgalerie verzögert; Standard: true.
• Blur-up-Platzhalter. Erstellt und verwendet winzige Platzhalterbilder, während größere Galeriebilder laden; Standard: true.

Lassen Sie Bildtypen automatisch erkennen für den ersten Test aktiviert. Wenn Sie es deaktivieren, verwenden Sie Bildtypen, die in Ihrem Shop existieren. Setzen Sie beispielsweise Lightbox-Bildtyp auf thickbox_default, Hauptanzeige-Bildtyp auf large_default und Vorschaubild-Typ auf small_default nur dann, wenn diese Typen vorhanden sind.

Die Größenanpassungsbreiten und JPEG-/WebP-/AVIF-Einstellungen gelten für Varianten hochgeladener Galeriemedien. Sie generieren nicht jedes native Produktbild neu. Für die Erzeugung von WebP und AVIF werden die entsprechenden PHP-/GD-Funktionen benötigt. Prüfen Sie die erzeugten Dateien, wenn Sie Formate ändern.

Die Einstellungen unter Media umfassen AR auf 3D-Modellen aktivieren (an), 360-Grad-Drehträgheit (an) und 360-Grad-Autodrehung (aus). AR ist auf kompatiblen Geräten und in kompatiblen Browsern verfügbar. Der 360-Betrachter unterstützt Ziehen, Pfeiltasten und Schaltflächen für einzelne Bilder; die automatische Drehung lässt sich pausieren und starten. Die Einstellung für reduzierte Bewegung deaktiviert die anfängliche automatische Drehung und die Trägheit.

Videos automatisch wiedergeben ist standardmäßig ausgeschaltet und wird gespeichert, steuert die Wiedergabe im mitgelieferten Frontoffice jedoch nicht. Videos starten beim Anklicken der Wiedergabeschaltfläche.

• Bildansicht-Analysen aktivieren. Erfasst Bildansichten, Lightbox-Öffnungen und Aktionen zum Teilen; Standard: false.
• Ereignisaufbewahrung. Löscht detaillierte Analyseereignisse nach dieser Anzahl von Tagen und behält aggregierte Statistiken; Standard: 90.
• Bild-Download-Button aktivieren. Zeigt eine Download-Schaltfläche in der Lightbox-Symbolleiste; Standard: true.
• Download-Dateinamenmuster. Steuert Dateinamen heruntergeladener Bilder mit Platzhaltern wie {shop}, {product} und {index}; Standard: {shop}-{product}-{index}.

Aktivieren Sie Analysen, um Bildansichten, das Öffnen der Lightbox und das Teilen von Bildern zu erfassen. Prüfen Sie nach den Aktionen Galerie > Analysen. Diese Berichte messen erfasste Bildinteraktionen statt exakter Besucherzahlen.

Für einen Downloadnamen können Sie {shop}-{product}-{index}-of-{total} verwenden. Unterstützte Platzhalter sind {shop}, {product}, {index}, {total}, {id} und {original}. Testen Sie den resultierenden Namen in Ihrem Browser.

Öffnen Sie Galerie > Galerien, um einen Datensatz zu erstellen oder zu bearbeiten:

• Titel. Speichert den übersetzbaren Galerietitel; Standard: empty.
• Beschreibung. Speichert die übersetzbare Galeriebeschreibung; Standard: empty.
• Typ. Ordnet den Galeriedatensatz custom, product, category oder cms zu; Standard: custom.
• Entitäts-ID. Speichert die zugehörige Produkt-, Kategorie- oder CMS-Seiten-ID, wenn der Typ eine benötigt; Standard: empty.
• Layout. Legt das Layout des Galeriedatensatzes fest, darunter carousel, grid, masonry, slider oder filmstrip; Standard: carousel.
• Vorschaubilder-Position. Speichert die Miniaturbildposition für diesen Galeriedatensatz; Standard: bottom.
• Lightbox. Aktiviert oder deaktiviert die Lightbox für diesen Galeriedatensatz; Standard: true.
• Automatische Wiedergabe. Aktiviert oder deaktiviert die automatische Wiedergabe für diesen Galeriedatensatz; Standard: false.
• Automatische Wiedergabeverzögerung. Legt die Verzögerung der automatischen Wiedergabe dieses Galeriedatensatzes in Millisekunden fest; Standard: 5000.
• Aktiv. Aktiviert oder deaktiviert den Galeriedatensatz; Standard: true.

Wählen Sie Typ und die entsprechende Entitäts-ID bewusst aus. Das Datensatzlayout bietet mehr Möglichkeiten als das globale Produktformular, darunter Masonry und Slider. Die Ausgabe der nativen Produktgalerie verwendet die globalen Produkteinstellungen. Gehen Sie nicht davon aus, dass das gespeicherte Layout eines Datensatzes diese globale Konfiguration ersetzt.

Laden Sie Bilder hoch, ordnen Sie sie neu und wählen Sie ein Titelbild unter Galerien oder Medienbibliothek. Prüfen Sie, ob die Galerie aktiv ist und ihre Dateien vorhanden sind. Eine eigene, Kategorie- oder CMS-Galerie erscheint nur dort, wo Ihr Theme oder eine Integration sie anzeigt; testen Sie diese Position.

Verwenden Sie in der Medienverwaltung einer gespeicherten Galerie Add images or MP4/WebM videos, um Bilder und Videos hochzuladen. Wählen Sie für externe Medien YouTube or Vimeo video oder 3D model (HTTPS GLB URL), geben Sie die URL ein und klicken Sie auf Add media. Wählen Sie bei Add 360 spin frames 2 bis 120 Bilder in einem Upload aus; die Einzelbilder werden nach Dateinamen sortiert. Es gelten die Servergrenzen für Dateianzahl und gesamte Uploadgröße. Setzen Sie für die Produktanzeige den Galerie-Typ auf product und die Entitäts-ID auf die Produkt-ID.

Öffnen Sie für sprachspezifische native Produktbilder den Bereich Gallery Revolution auf der Produktbearbeitungsseite. Wählen Sie einen einzelnen Shop und verwenden Sie Upload or replace für jedes Bild und jede Sprache oder Remove language image, um wieder das native Bild zu verwenden. JPEG-, PNG-, GIF- und WebP-Dateien werden innerhalb des angezeigten Uploadlimits akzeptiert.

Theme-Vorlagen können folgende Dateien überschreiben:

themes/your-theme/modules/mprgalleryrevolution/views/templates/hook/product-gallery.tpl
themes/your-theme/modules/mprgalleryrevolution/views/templates/hook/customer-gallery.tpl

Nützliche CSS-Ziele sind #mprgallery-product, .mprgallery__img und .mprgallery-content-lightbox-trigger. Zum Beispiel:

#mprgallery-product { --mprgallery-bg: #f8f8f8; --mprgallery-thumb-opacity: 0.55; }
#mprgallery-product .mprgallery__img { object-fit: contain; }
.mprgallery-content-lightbox-trigger { cursor: zoom-in; }

Führen Sie Galerie > Einstellungen > Integrität aus. Testen Sie Miniaturbildnavigation, Touch-/Wisch-Navigation, Zoom, Bildunterschriften, Vollbild-/Lightbox-Steuerelemente, Schließverhalten, Teilen-Links und Downloads. Wechseln Sie Produktkombinationen und prüfen Sie die Bildauswahl. Testen Sie ein CMS-Inhaltsbild und ein ausdrücklich ausgeschlossenes Bild. Testen Sie den ersten Kunden-Upload bei einem Produkt ohne genehmigte Fotos, genehmigen Sie ihn und prüfen Sie die öffentliche Anzeige. Testen Sie zugeordnete Videos, eine 360-Ansicht und ein 3D-Modell, wenn Sie diese verwenden.

Wenn Sie zwei Galerien oder keine sehen, prüfen Sie Theme-Integration, Produktgalerie aktivieren, Native Galerie ausblenden, displayAfterProductThumbs / displayLeftColumnProduct und Vorlagenüberschreibungen. Wenn große Bilder nicht laden, prüfen Sie Bildtypnamen, erzeugte Dateien und Browseranfragen. Bei fehlenden Inhalts-Lightboxen prüfen Sie Selektoren, Ausschlüsse und Abmessungen. Bei Uploads prüfen Sie Anmeldung, Kaufstatus, erlaubten Dateityp, PHP-Uploadgröße und beschreibbaren Speicher.

Sichern Sie eigene Galeriedatensätze, Kundenfotos, Mediendateien und Einstellungen. Die Deinstallation entfernt Modulmenüs, Präferenzen, Konfiguration und Schema. Sie löscht außerdem den Ordner für Sprachvarianten im externen Bildspeicher des Moduls. Native PrestaShop-Produktbilddatensätze werden durch diese Routine nicht entfernt. Verlassen Sie sich nicht darauf, dass alle übrigen eigenen Dateien automatisch bereinigt werden.

Prüfen Sie die wiederhergestellte native Produktgalerie erneut und entfernen Sie Theme-Aufrufe oder Überschreibungen, die Sie speziell für dieses Modul hinzugefügt haben. Bewahren Sie Sicherungen von Kunden- und Galeriemedien vor der Deinstallation auf.

Erfordert PrestaShop 1.6.1 oder neuer und PHP 7.1 oder neuer.