Aby stworzyć nową galerię zdjęć, najpierw przygotowujemy same pliki na serwerze, a następnie kopiujemy gotowy kod z już istniejącej galerii, podmieniamy w nim ścieżki i przypinamy stronę w odpowiednie miejsce.

Spis treści

1. Krok 0: Przygotowanie galerii na serwerze
2. Krok 1: Skopiowanie kodu z istniejącej galerii
3. Krok 2: Tworzenie nowej galerii
4. Krok 3: Jak prawidłowo podmienić ścieżki do zdjęć
5. Krok 4: Pobranie linku do nowej galerii
6. Krok 5: Dodanie galerii do zakładki Wyprawy Entomologiczne

Krok 0: Przygotowanie galerii na serwerze

Zanim stworzymy podstronę, musimy wgrać zdjęcia.

1. Z górnego menu wybierz Narzędzia -> Zarządzanie plikami -> Przeglądarka plików.
2. Przejdź do odpowiedniego katalogu, np. wyprawy.
3. Wybierz odpowiedni kraj lub stwórz nowy folder.

4. Wejdź do utworzonego folderu i na samym dole strony dodaj zdjęcia, które mają znaleźć się w galerii. Zmień nazwy plików na proste, np. A1.jpg, A2.jpg, A3.jpg (kolejno aż do ostatniego zdjęcia).

5. Skopiuj widoczną u góry ścieżkę do tego folderu (np. /images/galeria/wyprawy/australia/). Będzie potrzebna za chwilę.

Krok 1: Skopiowanie kodu z istniejącej galerii

1. Z górnego menu wybierz Wygląd -> Strony informacyjne -> Zarządzanie stronami.
2. Znajdź na liście gotową galerię (np. "Gruzja") i kliknij żółtą ikonę ołówka (Edytuj) po prawej stronie.

3. Skopiuj całą zawartość głównego okna z kodem. Zaznacz wszystko i wybierz Kopiuj.

Krok 2: Tworzenie nowej galerii

1. Wróć do zakładki Strony informacyjne i kliknij zielony przycisk "+ dodaj nową stronę" w lewym górnym rogu nad tabelą.
2. W formularzu nowej strony przypisz ją do grupy TEMP - TEMP (w polu "Grupa").
3. W sekcji opcji znajdź pozycję Czy strona będzie w formie kodu ?, zaznacz tak, wpisz tytuł nowej strony i wklej skopiowany kod do okna tekstowego na samym dole.

Krok 3: Jak prawidłowo podmienić ścieżki do zdjęć

Wklejony kod składa się z powtarzających się fragmentów. Każdy taki mały blok odpowiada za wyświetlenie jednego zdjęcia. Wygląda on tak:

<div
  class="ai-gal-item"
  data-src="/images/galeria/wyprawy/cypr/A1.jpg"
  data-title=""
>
  <img src="/images/galeria/wyprawy/cypr/A1.jpg" alt="alt" />
</div>

Aby galeria wyświetlała Twoje nowe zdjęcia, wykonaj te czynności:

1. Wyszukaj w kodzie starą ścieżkę (w tym przykładzie /images/galeria/wyprawy/cypr/A1.jpg).
2. Zamień ją na nową, którą skopiowałeś w Kroku 0 (np. /images/galeria/wyprawy/australia/A1.jpg).
3. Bardzo ważne: Ścieżkę musisz podmienić w dwóch miejscach dla każdego zdjęcia – przy data-src="..." oraz przy src="...".
4. Skopiuj cały ten mały blok i wklej go poniżej tyle razy, ile masz zdjęć w folderze. Pamiętaj, by w każdym kolejnym bloku zmienić końcówkę pliku (np. na A2.jpg, potem A3.jpg itd.).
5. Zjedź na dół i zapisz stronę.

Krok 4: Pobranie linku do nowej galerii

Aby umieścić galerię na odpowiedniej podstronie (np. w Wyprawach entomologicznych), musimy najpierw poznać jej dokładny link.

1. W górnym menu wybierz Wygląd -> Ustawienia wyglądu.

2. Przejdź do zakładki Górne menu.

3. Wybierz opcję dodawania nowej pozycji menu i kliknij Pojedyncze linki menu.

4. Z rozwijanej listy wybierz nowo utworzoną stronę (np. "Australia").

5. Przejdź na główną stronę swojego sklepu (jako klient). Zobaczysz, że nowa zakładka pojawiła się w menu głównym. Kliknij w nią, a następnie skopiuj cały adres URL z paska przeglądarki (np. https://dev.artinsect.com/australia-pm-27.html).

Krok 5: Dodanie galerii do zakładki Wyprawy Entomologiczne

Ostatnim etapem jest wklejenie pobranego linku we właściwe miejsce.

1. W panelu sklepu wejdź w Wygląd -> Strony informacyjne -> Zarządzanie stronami.
2. Znajdź na liście stronę docelową, np. WYPRAWY ENTOMOLOGICZNE i kliknij ikonę edycji (ołówek).
3. W edytorze tekstowym wpisz nazwę nowej galerii w odpowiednim miejscu (np. "Australia").
4. Zaznacz to nowe słowo myszką i kliknij ikonkę łańcuszka w pasku narzędzi edytora.
5. W okienku, które wyskoczy, wklej skopiowany wcześniej link w pole Adres URL i kliknij OK.
6. Zapisz zmiany na dole strony. Twoja galeria jest już w pełni podpięta i gotowa!