Presta Shop – osadzenie galerii Unitegallery na stronie CMS

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: https://pskrk.com/szybka-galeria-na-stronie-cms-zastepuje-modul-galerii-w-presta-shop/ ).

Efekt końcowy: http://carobeauty.pl/content/5-galeria

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ę:

themes/{NASZ-SZABLON}/js/unitegallery

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

  |-unitegallery
  |  |-themes
  |  |  |-slider
  |  |  |-tilesgrid
  |  |  |-tiles
  |  |  |-compact
  |  |  |-grid
  |  |  |-carousel
  |  |  |-video
  |  |  |  |-images
  |  |  |-default
  |  |  |  |-images
  |  |-images
  |  |-css
  |  |-skins
  |  |  |-alexis
  |  |  |  |-images
  |  |  |-default
  |  |-js

Zmiany w kontrolerze PHP

Otwieramy plik:

controllers/front/CmsController.php

Dokonujemy w nich 2 zmian:

#1 Znajdujemy funkcję:

setMedia()

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

$this->addJS(_THEME_JS_DIR_.'unitegallery/js/unitegallery.min.js');
$this->addCSS(_THEME_JS_DIR_.'unitegallery/css/unite-gallery.css');
$this->addJS(_THEME_JS_DIR_.'unitegallery/themes/tilesgrid/ug-theme-tilesgrid.js');
$this->addCSS(_THEME_JS_DIR_.'unitegallery/themes/default/ug-theme-default.css');

#2 Znajdujemy funkcję:

initContent()

Na jej początku, po kodzie:

$this->context->smarty->assign('home_title', $parent_cat->name);
$this->context->smarty->assign('cgv_id', Configuration::get('PS_CONDITIONS_CMS_ID'));

Wklejamy:

$this->context->smarty->assign('skippath', _PS_ROOT_DIR_ );
$this->context->smarty->assign('unigallery', glob(_PS_ROOT_DIR_.'/img/cms/galeria/*.*') );

Zmiany w pliku szablonu

Otwieramy plik:

themes/{NASZ-SZABLON}/cms.tpl

Znajdujemy fragment kodu:

{$cms->content}

Wklejamy przed nim:

{if $cms->meta_title == 'Galeria'}
   <div id="gallery" style="display:none;">
	{foreach from=$unigallery item=itemimage}
    <img alt="Image 1 Title" src="{$itemimage|replace:$skippath:''}"
				data-image="{$itemimage|replace:$skippath:''}"
				data-description="{$cms->meta_title}" />
    {/foreach}
   </div>
		{literal}
		<script type="text/javascript"> 
			
			jQuery(document).ready(function(){ 
				jQuery("#gallery").unitegallery({
					gallery_theme: "tilesgrid",
					grid_num_rows: 3,
					gallery_width: "100%",
					theme_gallery_padding: -20, //padding from sides of the gallery
					grid_padding: 0, //set padding to the grid
					grid_space_between_cols: 5, //space between columns
					grid_space_between_rows: 5, //space between rows
					gallery_width: "100%",
					tile_enable_border: false,
					tile_border_color: "#FFFFFF",
					thumb_image_overlay_effect: true,
					thumb_image_overlay_type: "blur",
					tile_enable_shadow: false,
					theme_navigation_type: "bullets",
					tile_enable_overlay: true, //enable tile color overlay (on mouseover)
					tile_overlay_opacity: 0.4, //tile overlay opacity
					tile_overlay_color: "#000000", //tile overlay color
				});	 
			}); 
		</script>
		{/literal}
  {/if}

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: pskrk.com/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.