Galeria obrazów dla Prestashop - darmowy moduł DC pGallery

Tworząc sklepy internetowe na PrestaShop, w niemal połowie projektów musiałem jakoś rozwiązywać problem wyświetlania galerii zdjęć. Klient chciał pokazać realizacje, inspiracje, portfolio czy po prostu więcej zdjęć produktu – i nagle okazywało się, że standardowe narzędzia są mocno ograniczone.

Standardowe opisy produktów i strony CMS pozwalają co prawda wrzucić zdjęcia ręcznie, ale efekt jest zwykle słaby. Dodawanie zdjęć „na piechotę” przez edytor daje niezadowalające rezultaty – brak responsywności, żadnej ładnej siatki, a już na pewno żadnego eleganckiego lightboxa. PrestaShop natywnie nie dostarcza odpowiednich stylów CSS ani mechanizmów do prawdziwej, nowoczesnej galerii.

Owszem, istnieją różne rozszerzenia – jedne dodają dodatkową zakładkę z galeriami przy edycji produktu, inne tworzą osobną stronę galerii. Problem pojawia się jednak wtedy, gdy chcesz wstawić galerię w dowolnym miejscu – wewnątrz treści opisu produktu, w skróconym opisie, na stronie statycznej CMS czy nawet w opisie kategorii. Wtedy nagle okazuje się, że nie ma uniwersalnego, prostego rozwiązania.

Właśnie dlatego stworzyłem Design Cart pGallery. Jest jakby potomkiem mojego pluginu dla Joomla DC Gallery. 

To moduł, który rozwiązuje ten ból raz na zawsze. Dzięki niemu galerię wstawiasz jedną prostą linijką shortcode’u – gdziekolwiek chcesz. I co ważne – na jednej podstronie możesz mieć kilka całkowicie niezależnych galerii, każda z własnymi ustawieniami.

Koniec z kombinowaniem, pisaniem własnego HTML-a i waleniem głową w mur ograniczeń PrestaShop.

Poniżej możesz zobaczyć wideo na którym prezentuję instalację modułu i od razu podłączenie galerii na karcie produktu:

Zobacz też:

• Oferta tworzenia sklepów internetowych
• Sklepy internetowe Prestashop

 

Moje rozwiązanie – jedna linijka shortcode i gotowe

Rozwiązanie, które przygotowałem, jest banalnie proste w użyciu, a jednocześnie bardzo potężne.

Zamiast walczyć z edytorem, pisać ręcznie kod HTML, kombinować z klasami CSS i lightboxami – wystarczy wkleić jedną linijkę shortcode.

 

Jak działa shortcode?

Działanie jest intuicyjne. W dowolnym miejscu, gdzie masz edytor tekstu (opis produktu, strona CMS, kategoria itp.), wklejasz kod w formie:

{dcgallery source="nazwa-folderu"}

lub z dodatkowymi parametrami, jeśli chcesz zmienić wygląd:

{dcgallery source="realizacje" mode="tiles" columns="4" ratio="1:1"}

Moduł automatycznie rozpoznaje folder, wczytuje wszystkie zdjęcia z niego i wyświetla galerię w wybranym stylu.

 

Skąd pobierane są zdjęcia?

Wszystkie zdjęcia trzymasz w zwykłym folderze na serwerze (w katalogu modułu). Wgrywasz je przez FTP, menedżer plików hostingu albo nawet przez panel PrestaShop. Moduł sam je skanuje, sortuje i przygotowuje do wyświetlenia. Nie musisz nic dodawać w panelu administracyjnym PrestaShop – zdjęcia są w folderze = są w galerii.

 

Dlaczego nie trzeba pisać HTML?

Bo nie musisz. Nie kombinujesz z <div class="row">, nie walczysz z responsywnością, nie dodajesz ręcznie skryptów lightboxa. Cała logika, style, obsługa mobile i efekty są już w module. Ty tylko deklarujesz, co i gdzie chcesz zobaczyć. Czysto, szybko i bez błędów.

 

Jak szybko można stworzyć nową galerię?

Naprawdę szybko. W praktyce wygląda to tak:

1. Tworzysz folder (np. realizacja-xyz)
2. Wrzucasz do niego zdjęcia
3. Kopiujesz shortcode
4. Wklejasz w opisie produktu lub na stronie CMS

I gotowe. Całość zajmuje zwykle 2-3 minuty.

To właśnie jest największa siła tego modułu – zamienia coś, co kiedyś było godzinami pracy, w kilka kliknięć.

 

W jakich miejscach można używać galerii?

Jedną z największych zalet Design Cart pGallery jest to, że shortcode działa praktycznie wszędzie, gdzie masz edytor HTML.

 

1. W opisach produktów

Najpopularniejsze miejsce. W głównym opisie wrzucasz galerię realizacji, detali lub zdjęć od klientów.

 

2. W skróconych opisach produktów

Działa też w description_short – super na listach produktów i kartach kategorii.

 

3. Na stronach CMS

Idealnie na strony „Realizacje”, „Portfolio”, „Inspiracje” – możesz wrzucić nawet kilka galerii na jednej podstronie.

 

4. W kategoriach CMS

Świetnie sprawdza się w opisach kategorii (np. inspiracje do sypialni, kuchni itd.).

 

5. W innych polach HTML sklepu

Dzięki hookowi filterHtmlContent shortcode działa też w accordionach, blokach HTML, widgetach i praktycznie każdym polu z treścią.

Praktyczne scenariusze:

• Galeria realizacji w opisie produktu
• Karuzela zdjęć „przed i po”
• Pinterestowa siatka na stronie portfolio
• Mini-galeria wariantów koloru na liście produktów

Dzięki temu jeden moduł zastępuje kilka różnych rozwiązań.

 

7 sposobów prezentacji zdjęć w jednym module

Design Cart pGallery oferuje aż 7 różnych trybów wyświetlania galerii w jednym module. Każdy z nich dopasujesz do konkretnej potrzeby.

 

1. Normal – klasyczna siatka zdjęć

Kiedy używać? Gdy potrzebujesz uporządkowanej, równomiernej galerii. Dla jakich zdjęć? Zdjęć o podobnych proporcjach. Przykładowe zastosowanie: Galerie produktowe, realizacje, detale.

Shortcode: 

{dcgallery source="demo" mode="normal" columns="4" ratio="1:1"}

 

2. Tiles – efekt Pinterest / Masonry

Kiedy używać? Gdy chcesz dynamicznego, nowoczesnego układu. Dla jakich zdjęć? Zdjęć o różnych proporcjach i rozmiarach. Przykładowe zastosowanie: Portfolio, inspiracje, strony Realizacje.

Shortcode:

 {dcgallery source="demo" mode="tiles" columns="4"}

 

3. Slideshow – pokaz slajdów

Kiedy używać? Gdy chcesz skupić uwagę na jednym zdjęciu naraz. Dla jakich zdjęć? Dużych, efektownych fotografii. Przykładowe zastosowanie: Historia marki, kolekcje, „przed i po”.

Shortcode: 

{dcgallery source="demo" mode="slideshow" slide_ratio="16:9"}

 

4. Carousel – karuzela zdjęć

Kiedy używać? Gdy chcesz pokazać kilka zdjęć jednocześnie z przewijaniem. Dla jakich zdjęć? Zdjęć średniej wielkości (referencje, warianty). Przykładowe zastosowanie: Karuzele realizacji, logotypy, mini-galerie.

Shortcode: 

{dcgallery source="demo" mode="carousel" slides_visible="3" slide_ratio="16:9"}

 

5. Coverflow – efekt 3D

Kiedy używać? Gdy zależy Ci na efektownym, premium wyglądzie. Dla jakich zdjęć? Zdjęć poziomych o podobnych proporcjach. Przykładowe zastosowanie: Landing page, wyróżnione realizacje.

Shortcode: 

{dcgallery source="demo" mode="coverflow"}

 

6. Cards – galeria kart

Kiedy używać? Gdy chcesz interaktywnego efektu przewijania jak talia kart. Dla jakich zdjęć? Zdjęć kwadratowych lub lekko pionowych. Przykładowe zastosowanie: Inspiracje, kreatywne galerie.

Shortcode: 

{dcgallery source="demo" mode="cards"}

 

7. Thumbs – galeria z miniaturami

Kiedy używać? Gdy potrzebujesz klasycznej galerii produktowej z podglądem miniaturek. Dla jakich zdjęć? Zdjęć produktów i szczegółów. Przykładowe zastosowanie: Zaawansowana galeria produktu, szczegółowe realizacje.

Shortcode: 

{dcgallery source="demo" mode="thumbs" slide_ratio="16:9"}

 

Dzięki tym 7 trybom jeden moduł w zupełności wystarcza.

 

Szerokie zastosowanie galerii

Przez wiele lat przy wdrażaniu sklepów na PrestaShop większość instalacji wyglądała podobnie – tworzyłem dodatkowe zakładki z galeriami i dodawałem osobną galerię do produktów. Do innych zadań, np. prezentacji zdjęć dostarczonych przez klientów, musiałem instalować kolejne moduły.

Design Cart pGallery zmienia ten stan rzeczy.

Masz teraz jeden moduł, który załatwia prawie wszystko. Na jednej karcie produktu możesz jednocześnie pokazać:

• galerię realizacji w trybie siatki lub masonry,
• karuzelę zdjęć przesłanych przez użytkowników,
• pokaz slajdów z najlepszymi ujęciami.

Nie musisz już żonglować kilkoma różnymi rozszerzeniami. Jeden moduł, jeden spójny styl i pełna elastyczność.

 

Jedna strona – wiele niezależnych galerii

To jedna z najmocniejszych cech tego modułu.

Na jednej stronie (czy to strona CMS, czy opis produktu) możesz wstawić kilka shortcode’ów naraz. Każda galeria działa całkowicie niezależnie:

• ma własne ustawienia (tryb, liczba kolumn, proporcje, kolory nawigacji itd.),
• korzysta z własnego lightboxa,
• nie koliduje z pozostałymi galeriami.

Dzięki temu możesz na jednej podstronie mieć np. klasyczną siatkę na górze, karuzelę w środku i galerię z miniaturami na dole – każda wygląda i zachowuje się dokładnie tak, jak chcesz.

 

Lightbox, który działa automatycznie

Moduł ma wbudowany nowoczesny lightbox (GLightbox), który uruchamia się automatycznie tam, gdzie jest potrzebny.

Po kliknięciu w zdjęcie otwiera się powiększenie z możliwością nawigacji strzałkami między zdjęciami w danej galerii. Działa świetnie na urządzeniach mobilnych – swipe, pinch zoom, wszystko responsywne.

Ważne: Lightbox jest aktywny tylko w trybach normal, tiles i carousel. W trybach slideshow, coverflow, cards i thumbs kliknięcie w zdjęcie nie otwiera lightboxa (zgodnie z charakterem tych prezentacji).

Dzięki temu nie musisz nic konfigurować – moduł sam wie, kiedy lightbox ma działać.

 

Zdjęcia trzymasz na serwerze – moduł robi resztę

Cała filozofia modułu jest prosta: zdjęcia trzymasz na serwerze, a moduł zajmuje się resztą.

Wystarczy, że w folderze bazowym (domyślnie img/mygalleries) utworzysz swój folder, np. realizacje-sypialnia. Zdjęcia wgrywasz klasycznie przez FTP, menedżer plików w hostingu albo panel PrestaShop.

Moduł automatycznie wykrywa wszystkie pliki w tym folderze, obsługuje formaty JPG, PNG, WebP, AVIF (i GIF), sortuje je alfabetycznie według nazwy pliku i wyświetla w galerii.

Nie ma żadnego uploadu w panelu administracyjnym – po prostu wrzucasz pliki i od razu działają.

 

Dlaczego shortcode są lepsze od ręcznego HTML?

Przez lata pisałem galerie ręcznie i wiem, jak to wygląda. Shortcode wygrywa w każdym aspekcie:

• Łatwiejsza edycja – zmieniasz jeden parametr i cała galeria się aktualizuje.
• Mniej błędów – nie ma ryzyka zepsucia struktury HTML, zamykających się tagów czy konfliktów CSS.
• Szybsza rozbudowa sklepu – dodajesz nowe galerie w kilka sekund, a nie w kilkanaście minut.
• Łatwe kopiowanie – możesz skopiować shortcode z jednej strony/produktu na drugą i od razu masz działającą galerię.

Raz ustawiony folder i shortcode działają wszędzie. To oszczędza masę czasu i nerwów przy większych sklepach.

 

Dla kogo stworzyliśmy Design Cart pGallery?

Moduł stworzyłem przede wszystkim z myślą o:

• sklepach internetowych, które chcą bogato prezentować produkty,
• firmach usługowych pokazujących swoje realizacje,
• producentach chcących dobrze wyeksponować ofertę,
• sklepach z realizacjami (meble, wykończenia, dekoracje, fotowoltaika itp.),
• portfolio B2B,
• stronach referencyjnych,
• katalogach produktów.

Jeśli regularnie musisz pokazywać zdjęcia – czy to w opisach produktów, czy na stronach CMS – to ten moduł jest właśnie dla Ciebie.

 

Instalacja krok po kroku

Instalacja i uruchomienie galerii jest bardzo prosta:

1. Instalacja modułu – wgranie i aktywacja w panelu PrestaShop.
2. Utworzenie folderu galerii – np. img/mygalleries/realizacje.
3. Wgranie zdjęć – przez FTP lub menedżer plików.
4. Wklejenie shortcode – np. {dcgallery source="realizacje" mode="normal"} w opisie produktu lub na stronie CMS.
5. Publikacja galerii – zapisujesz zmiany i gotowe.

Całość zajmuje dosłownie kilka minut.

 

Konfiguracja Design Cart pGallery

Konfiguracja modułu jest prosta i przejrzysta. Znajdziesz ją w panelu administracyjnym PrestaShop:

Moduły → Design Cart Gallery → Konfiguruj

Najważniejsze ustawienia globalne:

• Folder bazowy galerii Domyślnie img/mygalleries. To główny katalog, w którym będą tworzone wszystkie Twoje foldery z galeriami (np. img/mygalleries/realizacje, img/mygalleries/portfolio itd.).
• Domyślny tryb galerii Wybierasz, jaki tryb ma być używany, gdy nie podasz parametru mode w shortcode (domyślnie normal).
• Liczba kolumn Domyślna liczba kolumn w trybach normal i tiles.
• Proporcje zdjęć
  • ratio – proporcje kafelków w trybie normal (np. 1:1, 3:4, 16:9)
  • slide_ratio – proporcje slajdów w trybach Swiper (slideshow, carousel, coverflow itd.)
• Carousel – widoczne slajdy Ile zdjęć ma być widocznych naraz w trybie carousel.
• Odstępy między zdjęciami (space) Odległość w pikselach między elementami (zarówno w siatce, jak i w sliderach).
• Pętla Włączenie/wyłączenie zapętlenia w Swiperze i w lightboxie.
• Wygląd nawigacji Swiper Możesz zmienić kolory przycisków prev/next, ich przezroczystość oraz przezroczystość po najechaniu myszką.

Ważna zasada:

Ustawienia z shortcode zawsze mają pierwszeństwo nad ustawieniami globalnymi. Dzięki temu możesz na jednej stronie mieć galerie w zupełnie różnych stylach, a resztę kontrolować z poziomu panelu.

Po zmianie konfiguracji warto wyczyścić cache PrestaShop, żeby nowe ustawienia od razu się pojawiły.

Ten dział konfiguracji jest na tyle intuicyjny, że po pierwszej galerii dalsza praca jest już w pełni komfortowa.

 

Pobierz Design Cart pGallery

Pobranie z Design Cart

Najnowszą wersję modułu wraz z dokumentacją, aktualizacjami i wsparciem możesz pobrać bezpośrednio ze strony Design Cart.

1

 

Pobranie z GitHub

Moduł jest też dostępny na GitHubie. Tam znajdziesz historię zmian, zgłoszenia błędów oraz możesz śledzić rozwój projektu.

 

Podsumowanie

Design Cart pGallery rozwiązuje jeden z najbardziej irytujących problemów w PrestaShop – brak uniwersalnego, prostego i ładnego sposobu na wyświetlanie galerii zdjęć w dowolnym miejscu sklepu.

Zamiast kombinować z dodatkowymi modułami, tworzyć osobne zakładki czy pisać ręcznie HTML i CSS, wystarczy jedna linijka shortcode {dcgallery ...} i masz profesjonalną galerię gotową do działania.

Shortcode jest o niebo wygodniejszy od ręcznego budowania galerii – łatwiej go edytować, prawie niemożliwe jest zrobienie błędu, a kopiowanie galerii między produktami i stronami zajmuje sekundy.

Dodanie naprawdę dobrej, responsywnej galerii z lightboxem do produktu lub strony CMS zajmuje dosłownie 2-3 minuty: folder → zdjęcia → shortcode → gotowe.

I właśnie dlatego po instalacji zaczynam używać tego modułu dosłownie wszędzie – w opisach produktów, na stronach CMS, w kategoriach, accordionach i wszędzie tam, gdzie tylko da się wrzucić treść HTML.

To jedno z tych rozszerzeń, które realnie przyspiesza pracę i podnosi jakość prezentacji sklepu.