Jak dodać galerię zdjęć w Sitejet Builder

Jeśli na stronie powinien znaleźć się element, który wyświetla kilka obrazów jednocześnie, to najlepszym rozwiązaniem, aby to osiągnąć jest skorzystanie z galerii. W tym artykule pokażemy jak dodać i skonfigurować taki element.

Aby dodać galerię obrazów do strony należy z lewego paska bocznego wybrać ikonę Obrazy, a następnie przeciągnąć w żądane miejsce na stronie element Galeria.

W edytorze Sitejet Builder element Galeria posiada kilka predefiniowanych zestawów ustawień, zwanych wariantami, które mają wpływ na układ zdjęć w galerii oraz ich wygląd. Aby zmienić wariant galerii należy dwukrotnie kliknąć na element Galeria oznaczony żółtą ramką w głównym oknie edytora i rozwinąć sekcję Warianty w panelu ustawień. Kliknięcie w miniaturę żądanego układu spowoduje zastosowanie do aktualnie edytowanej Galerii.

Kolejnym krokiem konfiguracji galerii jest dodanie zdjęć. Aby to zrobić należy otworzyć ustawienia dwukrotnie klikając element Galeria oznaczony niebieską ramką w głównym oknie edytora. W panelu ustawień w sekcji Obraz widoczne będą 2 bloki:

1 - dodawanie nowych obrazów do galerii. Każdy wariant galerii tworzy domyślnie kilka miejsc na obrazy. Jeśli potrzebujesz dodać kolejne, skorzystaj z tej opcji. Każdy dodany tu obraz pojawi się automatycznie w bloku 2

2 - uzupełnianie lub zmiana dodanych już obrazów. Aby uzupełnić miejsca na obrazy dodane przez wybrany wariant galerii lub zamienić wcześniej dodane zdjęcia, należy odszukać żądaną pozycję w tym bloku i dwukrotnie kliknąć na zdjęciu.

Każdy wariant galerii ma swoją unikalną klasę CSS (np. .preset-gallery-v3-default). Po wybraniu go, nowy blok CSS zostanie automatycznie dodany do kodu CSS strony. Kod ten uwzględnia wszystkie ustawienia wybrane w panelu konfiguracji galerii. Oznacza to, że jeśli na stronie znajdzie się kilka galerii w tym samym wariancie, to zmiana ustawień jednego z nich będzie wpływała również na pozostałe.

Jeśli chcesz utworzyć dwie galerie korzystające w tego samego układu, ale mają się one różnić pozostałymi ustawieniami (np. inną liczbą kolumn), możesz zmienić klasę wariantu w polu Klasa ustawień wstępnych w zakładce Styl  panelu ustawień galerii – spowoduje to dodanie nowego bloku CSS z nową nazwą klasy, bez modyfikowania ustawień poprzedniego układu.

Filtrowana galeria to specjalny element, który wyświetla jednocześnie zdjęcia z wybranych kategorii. Po kliknięciu kategorii na stronie pokazują się tylko przypisane do niej obrazy. Zdjęcia mogą należeć do jednej lub wielu kategorii. Aby dodać taki element do strony należy z menu Obrazy na lewym pasku bocznym wybrać pozycję Filtrowana galeria i przeciągnąć ją w wybrane miejsce strony.

Aby przydzielić wybrane obrazy do kategorii należy wykonać następujące kroki:

• przejście do panelu ustawień przycisku wybranej kategorii poprzez dwukrotne kliknięcie na nim w głównym oknie edytora, a następnie wybranie zakładki Połącz. W polu URL należy wpisać identyfikator kategorii w formie #nazwa-kategorii, np. #krajobrazy.
  

• dodanie odpowiedniej klasy do obrazów należących do wybranej kategorii. Aby to zrobić należy dwukrotnie kliknąć na wybranym obrazie,w panelu ustawień przejść do zakładki Styl, a następnie rozwinąć sekcję Indentyfikator & Klasa. W polu Klasy CSS wpisać klasę w formacie: filter-nazwa-kategorii i nacisnąć ikonę plusa. Uwaga! Klasa powinna być zgodna z identyfikatorem ustawionym dla przycisku, poprzedzona słowem filter-, np. filter-krajobrazy.

Aby dodać przycisk z nową kategorią do galerii zaznacz jeden z nich w głównym oknie edytora i naciśnij CTRL+D (lub CMD+D Macu) na klawiaturze lub z menu kontekstowego wybierz pozycję Duplikuj. Spowoduje to powielenie go i będzie można przystąpić do  konfiguracji zgodnie z instrukcją zamieszczoną powyżej.

Galeria z dużą liczbą zdjęć może spowalniać ładowanie strony, jeśli pliki nie są odpowiednio przygotowane. Przed wgraniem zdjęć do Sitejet Builder warto zmniejszyć ich rozmiar. Optymalna szerokość zdjęcia w galerii to 1200–1600 pikseli — większe pliki nie poprawią jakości wyświetlania, ale znacząco zwiększą czas ładowania. Do kompresji zdjęć bez widocznej utraty jakości można użyć bezpłatnego narzędzia online squoosh.app.

Format WebP zapewnia najlepszy stosunek jakości do rozmiaru pliku i jest obsługiwany przez wszystkie nowoczesne przeglądarki. Jeśli masz zdjęcia w formacie JPG lub PNG, warto przekonwertować je na WebP przed wgraniem. Pamiętaj też o uzupełnieniu atrybutu alt dla każdego zdjęcia — krótki opis tego, co przedstawia obraz, pomaga wyszukiwarkom zrozumieć zawartość galerii i poprawia dostępność strony dla osób korzystających z czytników ekranowych.

Ile zdjęć może zawierać jedna galeria?
Sitejet Builder nie narzuca sztywnego limitu liczby zdjęć w galerii. W praktyce galeria z 20–30 zdjęciami działa płynnie, o ile pliki są odpowiednio zoptymalizowane. Przy większej liczbie zdjęć warto rozważyć podział na kilka galerii lub użycie filtrowanej galerii z kategoriami.

Czy galeria powiększa zdjęcia po kliknięciu (lightbox)?
Tak. Galeria w Sitejet Builder obsługuje efekt lightbox — po kliknięciu na miniaturę zdjęcie otwiera się w powiększonej wersji na ciemnym tle. Użytkownik może przeglądać kolejne zdjęcia strzałkami bez powracania do strony. Ta funkcja działa automatycznie w większości wariantów galerii.

Jak użyć galerii jako portfolio?

Filtrowana galeria to idealne narzędzie do budowy portfolio. Utwórz kategorie odpowiadające rodzajom prac (np. „wnętrza", „elewacje", „ogrody"), przypisz zdjęcia do odpowiednich kategorii i pozwól odwiedzającym przeglądać realizacje według interesującej ich tematyki. To rozwiązanie sprawdza się szczególnie dobrze u fotografów, architektów i firm budowlanych.

Czy galeria jest responsywna na telefonach?
Tak. Galeria automatycznie dostosowuje układ do mniejszych ekranów. Na komputerze zdjęcia wyświetlają się w kilku kolumnach, na telefonie układają się w jedną lub dwie kolumny, zachowując czytelność i proporcje. Warto sprawdzić podgląd mobilny w edytorze, aby upewnić się, że układ wygląda dobrze na różnych urządzeniach.