Gallery Revolution: konfiguracja i pomoc

Prześlij i zainstaluj mprgalleryrevolution, a następnie kliknij "Configure". Otwórz Galeria > Ustawienia > Konfiguracja. Wybierz produkt testowy z kilkoma natywnymi obrazami PrestaShop.

Pozostaw Włącz galerię produktów włączone. Otwórz produkt i potwierdź, że pojawia się dokładnie jedna działająca galeria. Moduł odczytuje natywne obrazy produktu i obsługuje również dołączone multimedia galerii produktu. Nie musisz tworzyć rekordu galerii, aby wyświetlać natywne obrazy produktu.

Hook produktu to displayAfterProductThumbs od PrestaShop 1.7 oraz displayLeftColumnProduct w wersji 1.6.1. Moduł integruje się także z natywnymi szablonami galerii i współdzielonymi dostawcami galerii. Jeśli Twój niestandardowy motyw zmienia ten obszar, przetestuj jego integrację przed ukryciem istniejącej galerii.

W Galeria > Ustawienia > Konfiguracja:

• Włącz galerię produktów. Zastępuje natywną galerię produktu galerią Gallery Revolution na stronach produktów; domyślnie: true.
• Układ galerii. Wybiera układ galerii produktu: carousel, grid lub filmstrip; domyślnie: carousel.
• Pozycja miniatur. Umieszcza miniatury w pozycji bottom, left, right, dots lub none; domyślnie: bottom.
• Układ miniatur. Wybiera pojedynczy przewijany wiersz miniatur lub siatkę z wieloma wierszami; domyślnie: swiper.
• Kolumny miniatur. Ustawia liczbę kolumn w trybie dolnej siatki miniatur; domyślnie: 6.
• Maksymalna liczba wierszy miniatur. Ogranicza liczbę wierszy siatki przed przewijaniem, przy czym 0 oznacza brak limitu; domyślnie: 0.
• Odstęp między miniaturami. Ustawia odstęp między miniaturami siatki w pikselach; domyślnie: 8.
• Nieprzezroczystość nieaktywnych miniatur. Ustawia nieprzezroczystość nieaktywnych miniatur od 0 do 1; domyślnie: 0.6.
• Tło galerii. Włącza kolor tła za głównym obrazem galerii; domyślnie: false.
• Kolor tła galerii. Ustawia kolor tła galerii, gdy tło jest włączone; domyślnie: transparent.
• Włącz zoom. Włącza przyciski powiększania w lightboksie obrazów produktu; domyślnie: true.
• Automatyczne odtwarzanie. Automatycznie uruchamia karuzelę galerii produktu; domyślnie: false.
• Opóźnienie automatycznego odtwarzania. Ustawia opóźnienie automatycznego odtwarzania w milisekundach; domyślnie: 5000.
• Ukryj natywną galerię. Dodaje CSS modułu ukrywający natywną galerię produktu PrestaShop; domyślnie: true.

Użyj dolnej siatki miniatur, gdy potrzebujesz kilku widocznych wierszy. Zmieniaj Kolumny miniatur, Maksymalna liczba wierszy miniatur i Odstęp między miniaturami razem. 0 maksymalnych wierszy oznacza brak limitu wierszy. Użyj Nieprzezroczystość nieaktywnych miniatur, aby dostosować kontrast niezaznaczonych miniatur.

Synchronizuj natywne obrazy nie jest widocznym polem tej konfiguracji. Natywne obrazy produktów są odczytywane bezpośrednio; ich oryginalne rekordy PrestaShop pozostają źródłem.

• Włącz lightbox. Otwiera obrazy galerii produktu w PhotoSwipe po kliknięciu; domyślnie: true.
• Kolor nakładki lightboxa. Ustawia kolor tła nakładki PhotoSwipe; domyślnie: #ffffff.
• Nieprzezroczystość nakładki lightboxa. Ustawia nieprzezroczystość nakładki od 0 do 1; domyślnie: 0.95.
• Pokaż podpisy w lightbox. Zezwala na podpisy w przeglądarce PhotoSwipe; domyślnie: true.
• Kolor podpisu lightboxa. Ustawia kolor tekstu podpisów w lightboksie; domyślnie: #ffffff.
• Kolor przycisków lightboxa. Ustawia kolor przycisków lightboxa, takich jak zamykanie, strzałki i przyciski paska narzędzi; domyślnie: #ffffff.
• Pasek miniatur lightboxa. Wyświetla pasek miniatur wewnątrz lightboxa; domyślnie: true.
• Pozycja paska miniatur (komputer). Umieszcza pasek miniatur lightboxa w pozycji left, right, top lub bottom; domyślnie: left.
• Pozycja paska miniatur (telefon). Umieszcza mobilny pasek miniatur lightboxa w pozycji top lub bottom; domyślnie: top.
• Włącz podpisy obrazów. Wyświetla podpisy z legend obrazów PrestaShop lub podpisów niestandardowych multimediów; domyślnie: false.
• Wyświetlanie podpisów. Wyświetla podpisy pod galerią, w lightboksie lub w obu miejscach; domyślnie: both.
• Nazwa parametru URL zdjęcia. Ustawia przetłumaczony parametr zapytania używany w linkach do obrazów, na przykład ?photo=2; domyślnie: photo.
• Akcja deep link. Określa, czy link do obrazu wybiera slajd, czy otwiera lightbox; domyślnie: lightbox.
• Pokaż przycisk udostępnij/kopiuj link. Dodaje przycisk kopiujący bezpośredni link do bieżącego obrazu; domyślnie: true.

Obecne wartości domyślne to biała nakładka o nieprzezroczystości 0.95 i widoczny pasek miniatur lightboxa. Po zmianie tła sprawdź kontrast przycisków i podpisów.

Używaj Włącz podpisy obrazów i Wyświetlanie podpisów razem z ustawieniami podpisów lightboxa. Podpisy pochodzą z legend natywnych obrazów lub podpisów dołączonych multimediów. Obraz bez podpisu nie otrzyma sensownego tekstu tylko dlatego, że podpisy są włączone.

Ustaw Nazwa parametru URL zdjęcia dla każdego języka. Przy domyślnej wartości photo link może wyglądać tak: https://example.com/product-name.html?photo=2. Akcja deep link ma domyślnie wartość lightbox; zamiast tego możesz wybrać zaznaczenie slajdu lub dostępną opcję wyłączenia. Udostępnij/skopiuj link i przetestuj go w nowej karcie przeglądarki.

• Włącz lightbox obrazów treści. Stosuje PhotoSwipe do skonfigurowanych obrazów w treści stron; domyślnie: true.
• Selektory obrazów treści. Określa za pomocą selektorów CSS, które obrazy treści są uwzględniane; domyślnie: .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.
• Wykluczone selektory obrazów. Wyklucza obrazy pasujące do tych selektorów. Domyślnie: .mprgallery img, .pswp img, img[data-mprgallery-ignore], img[data-no-lightbox], img.mprgallery-content-lightbox-ignore, footer img, #footer img. W razie potrzeby dodaj wykluczenia właściwe dla motywu.
• Pokaż miniatury w lightboksie treści. Wyświetla nawigację miniaturami dla obrazów treści; domyślnie: true.
• Pozycja miniatur. Umieszcza miniatury lightboxa treści w pozycji bottom, top, left lub right; domyślnie: bottom.
• Minimalna szerokość obrazu. Pomija węższe obrazy treści, aby ikony i odznaki nie otwierały się w lightboksie; domyślnie: 120.
• Minimalna wysokość obrazu. Pomija niższe obrazy treści, aby ikony i odznaki nie otwierały się w lightboksie; domyślnie: 80.

Domyślne selektory obejmują tekst sformatowany, CMS, opisy kategorii/produktów, treść edytora, wiersze obrazów SEO i elementy figure. Dostosuj selektory do motywu. Domyślne wykluczenia obejmują obrazy stopki oraz obrazy galerii/lightboxa i jawne wyłączenia.

Aby jawnie wskazać pełnowymiarowy obraz i miniaturę:

<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">

Użyj rzeczywistych wymiarów pełnowymiarowego obrazu. Aby wykluczyć ikonę, odznakę lub obraz dekoracyjny, dodaj atrybut lub klasę:

<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">

Jeśli obraz nie jest uwzględniany, sprawdź jego selektor, wykluczenia i minimalny rozmiar przed zmianą JavaScript.

• Włącz przesyłanie plików przez klientów. Włącza funkcję zdjęć klientów; domyślnie: true.
• Wymagany zakup. Przyjmuje zdjęcia tylko od zalogowanych klientów z ważnym zamówieniem na dany produkt; domyślnie: true.
• Maks. plików na upload. Ogranicza liczbę zdjęć przyjmowanych jednorazowo przez formularz klienta; domyślnie: 5.
• Maks. rozmiar pliku. Ustawia maksymalny rozmiar zdjęcia klienta w MB; domyślnie: 5.
• Automatyczne zatwierdzanie przesyłanych plików. Publikuje zdjęcia klientów bez ręcznej moderacji; domyślnie: false.

Klient musi się zalogować, aby przesłać plik, również przy wyłączonej opcji Wymagany zakup. Przy domyślnie włączonym wymogu zakupu potrzebuje ważnego zamówienia na ten produkt. Można przesyłać pliki obrazów JPEG, PNG i WebP w skonfigurowanym limicie rozmiaru każdego pliku. Obowiązują również limity przesyłania serwera.

Przy włączonej opcji Włącz przesyłanie plików przez klientów sekcja Zdjęcia klientów pojawia się, gdy istnieją zatwierdzone zdjęcia lub zalogowany klient może przesyłać zdjęcia. Uprawniony klient może przesłać pierwsze zdjęcie produktu bez zatwierdzonych zdjęć. Od PrestaShop 1.7 sekcja korzysta z karty dodatkowej treści produktu, a w wersji 1.6.1 z displayProductTabContent.

Otwórz Galeria > Zdjęcia klientów, aby zatwierdzić, odrzucić lub usunąć istniejące zgłoszenia. Zdjęcia oczekujące nie są publiczne. Automatyczne zatwierdzanie przesyłanych plików jest domyślnie wyłączone. Umiejscowienie sekcji zależy od wyświetlania odpowiedniego hooka produktu przez motyw.

• Automatyczne wykrywanie typów obrazów. Pozwala modułowi wybierać odpowiednie typy obrazów PrestaShop dla obrazów głównych, miniatur i lightboxa; domyślnie: true.
• Typ obrazu lightboxa. Ustawia typ obrazu PrestaShop dla lightboxa, gdy automatyczne wykrywanie jest wyłączone; domyślnie: thickbox_default.
• Główny typ wyświetlanego obrazu. Ustawia typ obrazu PrestaShop dla głównego obrazu galerii, gdy automatyczne wykrywanie jest wyłączone; domyślnie: medium_default.
• Typ obrazu miniatury. Ustawia typ obrazu PrestaShop dla miniatur, gdy automatyczne wykrywanie jest wyłączone; domyślnie: small_default.
• Jakość JPEG. Ustawia jakość JPEG wariantów przesłanych obrazów galerii; domyślnie: 85.
• Generuj WebP. Tworzy warianty WebP przesłanych obrazów galerii, jeśli serwer to obsługuje; domyślnie: true.
• Generuj AVIF. Tworzy warianty AVIF przesłanych obrazów galerii, jeśli serwer to obsługuje; domyślnie: false.
• Szerokość dużego obrazu. Ustawia szerokość generowanego dużego wariantu w pikselach; domyślnie: 1200.
• Średnia szerokość obrazu. Ustawia szerokość generowanego średniego wariantu w pikselach; domyślnie: 600.
• Szerokość miniatury. Ustawia szerokość generowanej miniatury w pikselach; domyślnie: 120.
• Leniwe ładowanie. Ładuje dodatkowe obrazy galerii produktu z opóźnieniem; domyślnie: true.
• Symbole zastępcze z rozmyciem. Tworzy i wykorzystuje maleńkie obrazy zastępcze podczas ładowania większych obrazów galerii; domyślnie: true.

Podczas pierwszego testu pozostaw Automatyczne wykrywanie typów obrazów włączone. Po wyłączeniu używaj typów obrazów istniejących w sklepie. Na przykład ustaw Typ obrazu lightboxa na thickbox_default, Główny typ wyświetlanego obrazu na large_default i Typ obrazu miniatury na small_default tylko wtedy, gdy te typy istnieją.

Szerokości skalowania i ustawienia JPEG/WebP/AVIF dotyczą wariantów przesłanych multimediów galerii. Nie regenerują wszystkich natywnych obrazów produktów. Generowanie WebP i AVIF wymaga odpowiednich funkcji PHP/GD. Po zmianie formatów sprawdź wygenerowane pliki.

Ustawienia Media obejmują Włącz AR na modelach 3D (włączone), Bezwładność obrotu 360 (włączone) i Automatyczny obrót 360 (wyłączone). AR jest dostępna na zgodnych urządzeniach i w zgodnych przeglądarkach. Przeglądarka 360 obsługuje przeciąganie, klawisze strzałek i przyciski zmiany klatki; automatyczny obrót ma przycisk pauzy i uruchamiania. Preferencja ograniczenia ruchu wyłącza początkowy automatyczny obrót i bezwładność.

Automatyczne odtwarzanie filmów jest domyślnie wyłączone i zapisywane, ale nie steruje odtwarzaniem w dostarczonym interfejsie sklepu. Filmy uruchamiają się po kliknięciu przycisku odtwarzania.

• Włącz analitykę wyświetleń obrazów. Śledzi wyświetlenia obrazów, otwarcia lightboxa i udostępnienia; domyślnie: false.
• Przechowywanie zdarzeń. Usuwa szczegółowe zdarzenia analityczne po podanej liczbie dni, zachowując zagregowane statystyki; domyślnie: 90.
• Włącz przycisk pobierania obrazu. Pokazuje przycisk pobierania na pasku narzędzi lightboxa; domyślnie: true.
• Wzorzec nazwy pliku pobierania. Steruje nazwami pobieranych plików obrazów za pomocą znaczników takich jak {shop}, {product} i {index}; domyślnie: {shop}-{product}-{index}.

Włącz analitykę, aby rejestrować wyświetlenia obrazów, otwarcia lightboxa i udostępnienia. Po tych działaniach przejrzyj Galeria > Analityka. Raporty mierzą zarejestrowane interakcje z obrazami, a nie dokładną liczbę odwiedzających.

Jako nazwę pobieranego pliku możesz użyć {shop}-{product}-{index}-of-{total}. Obsługiwane znaczniki obejmują {shop}, {product}, {index}, {total}, {id} i {original}. Przetestuj wynikową nazwę w przeglądarce.

Otwórz Galeria > Galerie, aby utworzyć lub edytować rekord:

• Tytuł. Przechowuje tłumaczalny tytuł galerii; domyślnie: empty.
• Opis. Przechowuje tłumaczalny opis galerii; domyślnie: empty.
• Typ. Przypisuje rekord galerii do custom, product, category lub cms; domyślnie: custom.
• ID encji. Przechowuje ID powiązanego produktu, kategorii lub strony CMS, gdy typ tego wymaga; domyślnie: empty.
• Układ. Ustawia układ rekordu galerii, w tym carousel, grid, masonry, slider lub filmstrip; domyślnie: carousel.
• Pozycja miniatur. Przechowuje pozycję miniatur tego rekordu galerii; domyślnie: bottom.
• Lightbox. Włącza lub wyłącza lightbox dla tego rekordu galerii; domyślnie: true.
• Automatyczne odtwarzanie. Włącza lub wyłącza automatyczne odtwarzanie tego rekordu galerii; domyślnie: false.
• Opóźnienie automatycznego odtwarzania. Ustawia opóźnienie automatycznego odtwarzania tego rekordu w milisekundach; domyślnie: 5000.
• Aktywny. Włącza lub wyłącza rekord galerii; domyślnie: true.

Świadomie wybierz Typ i odpowiadające ID encji. Układ rekordu ma więcej opcji niż globalny formularz produktu, w tym masonry i slider. Natywna galeria produktu korzysta z globalnych ustawień produktu; nie zakładaj, że zapisany układ rekordu zastępuje tę globalną konfigurację.

Prześlij obrazy, zmień ich kolejność i wybierz okładkę w Galerie lub Biblioteka mediów. Sprawdź, czy galeria jest aktywna i czy jej pliki istnieją. Galeria niestandardowa, kategorii lub CMS pojawia się tylko tam, gdzie wyświetla ją motyw lub integracja, więc przetestuj to miejsce.

W menedżerze mediów zapisanej galerii użyj Add images or MP4/WebM videos, aby przesłać zdjęcia i filmy. W przypadku mediów zewnętrznych wybierz YouTube or Vimeo video lub 3D model (HTTPS GLB URL), podaj URL i wybierz Add media. W polu Add 360 spin frames wybierz od 2 do 120 obrazów w jednym przesłaniu; klatki są sortowane według nazwy pliku. Obowiązują limity serwera dotyczące liczby plików i łącznego rozmiaru przesyłania. Aby wyświetlić media na stronie produktu, ustaw Typ galerii na product, a ID encji na ID produktu.

Aby dodać wersje językowe natywnych zdjęć produktu, otwórz panel Gallery Revolution na stronie edycji produktu. Wybierz pojedynczy sklep, a następnie użyj Upload or replace dla każdego zdjęcia i języka lub Remove language image, aby przywrócić natywne zdjęcie. Akceptowane są pliki JPEG, PNG, GIF i WebP w wyświetlonym limicie przesyłania.

Szablony motywu mogą nadpisywać:

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

Przydatne selektory CSS obejmują #mprgallery-product, .mprgallery__img i .mprgallery-content-lightbox-trigger. Na przykład:

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

Uruchom Galeria > Ustawienia > Integralność. Przetestuj nawigację miniaturami, dotykiem/przesuwaniem, powiększanie, podpisy, przyciski pełnego ekranu/lightboxa, zamykanie, linki udostępniania i pobieranie. Zmieniaj kombinacje produktu i sprawdzaj wybór obrazu. Przetestuj jeden obraz w treści CMS i jeden jawnie wykluczony obraz. Przetestuj pierwsze zgłoszenie klienta dla produktu bez zatwierdzonych zdjęć, następnie zatwierdź je i sprawdź widok publiczny. Przetestuj dołączone filmy, widok 360 i model 3D, jeśli z nich korzystasz.

Jeśli widzisz dwie galerie lub żadnej, sprawdź integrację motywu, Włącz galerię produktów, Ukryj natywną galerię, displayAfterProductThumbs / displayLeftColumnProduct i nadpisania szablonów. Jeśli duże obrazy nie działają, sprawdź nazwy typów obrazów, wygenerowane pliki i żądania przeglądarki. Przy brakujących lightboksach treści sprawdź selektory, wykluczenia i wymiary. W przypadku przesyłania sprawdź zalogowanie, status zakupu, dozwolony typ pliku, rozmiar przesyłania PHP i możliwość zapisu w magazynie.

Wykonaj kopię niestandardowych rekordów galerii, zdjęć klientów, plików multimedialnych i ustawień. Odinstalowanie usuwa menu modułu, preferencje, konfigurację i schemat. Usuwa również folder wariantów językowych w zewnętrznym magazynie obrazów modułu. Ta procedura nie usuwa natywnych rekordów obrazów produktów PrestaShop. Nie zakładaj automatycznego usunięcia wszystkich pozostałych niestandardowych plików.

Ponownie sprawdź przywróconą natywną galerię produktu i usuń wywołania motywu lub nadpisania dodane specjalnie dla tego modułu. Zachowaj kopie multimediów klientów i galerii przed odinstalowaniem.

Wymaga PrestaShop 1.6.1 lub nowszego oraz PHP 7.1 lub nowszego.