Tworzymy sekcję "Galeria" CMS Joomla, Gantry 5
Aby utworzyć sekcję przejdź do panelu szablonu Gantry i wybierz kontur/zarys Home-Particles.
Do zbudowania sekcji wykorzystamy kolejna wolną sekcję "Features"
Następną sekcją jest galeria z opcją fitrowania zdjęć. Ponieważ nie mamy darmowej cząstki z taką funkcjonalnością zastosujemy całkiem inne podejście. Użyjemy gotowego kodu z Uikit, który oczywiscie posiada taką opcję :)
Wskazówka:
Edycja kodu bezpośrednio w cząstce jest bardzo niewygodna, dlatego użyj edytora kodu a następnie skopiuj kod do cząstki.
Scieżka do folderu media, którą używa gantry wyglada nastepująco: gantry-media:// Użyjemy ją w naszym kodzie do pobierania obrazków z folderu media Joomla
Tworzymy zawartość "Galeria"
W tym celu wykorzystamy cząstkę "Custom HTML" oraz kod filtra oraz lightboxa, który oferuja nam Uikit. Atom Gantry Uikit, który zainstalowalośmy z naszej paczki joomlead nie ładuje automatycznie kodu js dla komponentów takich jak filter, slider, countdown, toltip, notification, parallax, lightbox. Chyba, że korzystamy z cząstek Joomlead. Jeżeli korzystamy z własnych komponentów musimy dodać go ręcznie. Dzięki temu nie ładujemy niepotrzebnego kodu. Aby dodać js dla fitra i lightboxa, które użyjemy w galerii wejdź na zaplecze naszego szablonu Gantry w miejsce gdzie dodawaliśmy Uikit for Gantry 5 (zarys bazowy zakładka Page Settings, na samym dole Atoms) i dodaj, przeciągając atom Custom CSS/JS i dodaj w nim trzy moduły js, które pobraliśmy do katalogu js/jlcomponents.
Dodaj moduł js filtra i lightboxa
Tak przygotowani możemy dodać naszą galerię.
Przykład kodu galeri z filtrami na bazie Uikit z prefixami Joomlead - linkSkopiuj kod i wklej w cząstce Features, która znajduje sie w sekcji o tej samej nazwie. Zmień jej nazwe na galeria. Zdjęcia umieściłem w folderze galeria więc scieżka prowadzi do tego katalogu. Ty zrób według własnego uznania i popraw ścieżki do zdjęć.
Wskazówka:
Jeżeli korzystasz z frameworka Uikit z Atomem Joomlead w swoim projekcie musisz używać prefiksu jl- zamiast uk-. W edytorze vsc wywołaj Ctrl + F, następnie znajdź prefiksy uk- i zastąp je prefiksem jl-
Efekt na stronie:
Nie mamy oczywiście nagłówka sekcji ale tym zajmiemy sie w kolejnej częsci samouczka Joomla + Gantry 5 . Moglibyśmy użyć kolejny raz cząstki "Custom HTML" i dodać klasę dla subtitle i title następnie ostylować ją w css, ale pokażę wam jak zbudować prostą cząstkę wielokrotnego użytku. Zapraszam
cdn...
