Press "Enter" to skip to content

Presta Shop – osadzenie galerii Unitegallery na stronie CMS

Admin 2

Darmowy skrypt http://unitegallery.net/ daje niesamowite możliwości stosunkowo łatwego osadzenia galerii na stronie internetowej. Jego instalacja jest bardzo łatwa, a rodzaje prezentacji zdjęć zdumiewające. Dodatkowo taka galeria jest w pełnie dostosowana do urządzeń mobilnych. Dziś pokażemy jak łatwo osadzić taki skrypt na stronie CMS. Będzie to proste osadzenie takiej galerii bez podziału na albumy albo kategorie zdjęć.

Z racji, że Presta Shop nie posiada wbudowanej galerii może okazać się to przydatne (Już poruszaliśmy tę kwestię w innych naszych artykułach: http://prestashopkrakow.pl/szybka-galeria-na-stronie-cms-zastepuje-modul-galerii-w-presta-shop/ ).

Wgranie zdjęć na serwer

Przede wszystkim musimy wysłać zdjęcia, które mają być w galerii. Skrypt jest tak zrobiony, że dodanie nowych zdjęć ogranicza się jedynie do przegrania dodatkowych fotografii. Zatem możemy na początek wgrać kilka podstawowych fotografii, a potem w miarę rozwoju sklepu przesyłać nowe.

Wgrać zdjęcia na sklep możemy zrobić na 2 sposoby :

  1. Poprzez FTP (połączenie bezpośrednie z serwerem)
  2. Poprzez edytor treści w dziale CMS

Ad1) Połączenie z FTP

(jeśli jest to dla Ciebie jasne – pomiń ten punkt)

  • Ściągamy TotalCommander
  • Instalujemy
  • Włączamy
  • Skrót klawiszowy CTRL+F
  • Nowe połączenie / new connection
  • Sesja – podajemy dowolną nazwę
  • Wpisujemy poniższe dane do połączenia (host – serwer, user – użytkownik, hasło)
  • Wciskamy OK
  • Zaznaczamy na liście zapisaną pozycję
  • Łączymy się
  • Gotowe.

Pliki należy wgrać do lokalizacji:

[folder-głowny]/img/cms/galeria

Jeśli nie ma tam folderu galeria – należy go utworzyć. Dodatkowo zapobiegawczo ustawić jego uprawnienia do zapisu na 777 (menu Plik -> Zmień atrybuty)

Ad2) Połączenie przez edytor CMS

Wchodzimy w:

Preferencje -> CMS

W tym celu nie musimy tworzyć żadnej strony CMS. Wystarczy nam któraś istniejąca. Wciskamy „Edytuj” następnie wybieramy opcje wstawiania obrazka:

Wciskamy przycisk przeglądaj i w przeglądarce plików:

Tworzymy folder „galeria” i wgrywamy do niego zdjęcia.

Wgranie wymaganych bibliotek.

Możemy je pobrać ze strony producenta http://unitegallery.net (https://github.com/vvvmax/unitegallery/archive/master.zip) lub MIRROR.

Następnie wgrywamy rozpakowany plik w lokalizację:

Struktura folderów powinna być następująca

Zmiany w kontrolerze PHP

Otwieramy plik:

Dokonujemy w nich 2 zmian:

#1 Znajdujemy funkcję:

Na jej końcu (przed zamykającą klamrą „}” ) wklejamy:

#2 Znajdujemy funkcję:

Na jej początku, po kodzie:

Wklejamy:

Zmiany w pliku szablonu

Otwieramy plik:

Znajdujemy fragment kodu:

Wklejamy przed nim:

Uwaga, wygląd galerii można dowolnie modyfikować wg przekazywanych wyżej parametrów. Można też stworzyć galerię o zupełnie innym wyglądzie (np. http://unitegallery.net/index.php?page=tiles-justified) wg wytycznych ze strony producenta. Należy to potem uwzględnić w powyższym kodzie w szablonie i podpiąć odp. style i biblioteki w funkcji setMedia() powyżej.

 

UWAGA! UWAGA! Aktualizacja kodu. Jeśli zależy Ci na szybszym wczytywaniu tej galerii użyj nowszej modyfikacji w/w kodu z nowszego artykułu na naszym blogu: prestashopkrakow.pl/przyspieszenie-wczytywania-unitegallery-na-stronie-cms/

Dodanie strony CMS z galerią

Następnie musimy w dziale:

Preferencje -> CMS

Dodać nową stronę CMS, opublikować ją i jej tytuł musi brzmieć: „Galeria”  (bez cudzysłowu).

Gotowe!


Aby mieć pewność, że zmiany są widoczne odśwież cache sklepu:

Parametry zaawansowane -> Wydajność -> Wyczyść pamięć podręczną

i asekuracyjnie na tej samej stronie chwilowo włącz:

Wymuszenie kompilacji -> Zapisz (Wyłączając pamięć podręczną),

Następnie wejdź na stronę galerii i jak wszystko jest OK przywróć tam poprzednie ustawienia kompilacji -> Zapisz.

 

Share This:

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.