Jest to komponent przeznaczony dla silników CMS Joomla! Do budowania oraz zarządzania galeriami na stronie. Funkcjonalności galerii oraz możliwości jej
ustawień powodują, że pozostawia swą konkurencję w tyle. Przeanalizujmy proces dodawania nowej galerii.
Aby zamieści na stronie nową galerię zalogujmy się do panelu administracyjnego strony.
Z górnego menu wybierzmy i rozwińmy zakładkę komponenty. Z rozwiniętej listy kliknijmy nazwę komponentu Unite Gallery. Domyślnie system przeniesie nas do listy już istniejących galerii, które oczywiście możemy edytować, dowolnie zmieniać oraz usuwać.
Aby dodać nową galerię należy zjechać na dół strony i odszukać przycisk „Create New Gallery”.
Po wybraniu tej opcji system poprosi nas o wybranie stylu galerii jaką chcemy utworzyć. Mamy stosunkowo duży wybór.
Oczywiście same nazwy nic nie mówią. Każdy rodzaj galerii ma swój określony wygląd i sposób działania. Wygląd można przedstawić za pomocą poniższych schematów.
Jak widać mamy możliwość budowania tradycyjnych galerii z listą zdjęć jak i ciekawych pokazów slajdów, które można wykorzystać do budowy atrakcyjnych banerów dla stron internetowych. Czas powrócić do zbudowania naszej pierwszej galerii. Z okna popup „Choose a gallery” wybierzmy opcję Tile Grid. Na powyższym schemacie widać że galeria ma tradycyjny charakter miniatur, jednak w odróżnieniu od tych tradycyjnych posiada ciekawą paginację dzięki której możemy przewijać dany zestaw zdjęć by przejść do kolejnego zestawu. Po wybraniu opcji system przeniesie nas do miejsca gdzie będziemy mogli nadać galerii nazwę, przydzielić do kategorii, określić czy ma być na całą szerokość strony czy może rozmiar ma być narzucony odgórnie.
Dwa pola są wymagane jest to nazwa i alias. Należy pamiętać że aliasy nie powinny zawierać żadnych znaków specjalnych, powinny składać się z liter i cyfr. Poniżej przykład wypełnienia pól.
Po wypełnieniu pól możemy przejść do zapisu galerii. Służy do tego przycisk „Create Gallery”.
Po kliknięciu przycisku system po raz kolejny przekieruje nas, tym razem do bardziej rozbudowanego formularz, w którym to będziemy mieli decydujący wpływ na jej wygląd oraz na to co będzie się w niej wyświetlało.
Pierwsza część zawiera dane które mogliśmy już wcześniej wprowadzić. Jeżeli pomyliliśmy się lub zmieniliśmy zdanie to w tym miejscu możemy to poprawić.
Możemy poprawić tytuł galerii oraz alias, z którego tworzony jest kod (Gallery Shortcode), umożliwiający umieszczenie galerii w dowolnym miejscu na stronie. O umieszczaniu galerii w treści będę pisał w dalszej części kursu.
Mamy ponowny wpływ na ustawienie czy galeria ma zajmować całą dostępną szerokość. Możemy również określić jej minimalny rozmiar. Może on być pomocny w przypadku urządzeń mobilnych.
Przejdźmy teraz do prawej strony formularza. Mieszczą się tam opcje, które mają wpływ na wygląd galerii. Oczywiście galeria posiada ustawienia domyślne, jeżeli nie jesteśmy pewni co do ich działania po prostu nie zmieniajmy ich i przechodźmy do dalszych etapów.
W tym okienku możemy ustawić rozmiary zdjęć.
Tile Width – określamy szerokość zdjęcia
Tile Height – określamy wysokość zdjęcia
Gallery Padding Sides – odstęp dla całej grupy obrazów od reszty treści
Grid Padding – odstęp poszczególnych obrazów od reszty zdjęć
Space Between Columns – odstęp kolumny z obrazami
Space Between Rows – odstęp wiersza z obrazami
Ustawienia domyślne są na tyle sensowne, że pozostawimy je w naszej galerii przykładowej niezmienione. Przejdźmy do kolejnego etapu jakim jest „Grid Navigation”.
W tym okienku określamy jak ma wyglądać nawigacja pomiędzy grupami obrazów. Na schemacie galerii nawigacja ma postać okrągłych punktów pod zdjęciami. Tak jak wskazuje kursor myszki na poniższym obrazku.
Enable Navigation – określamy czy nawigacja ma być włączona czy nie. Oczywiście tę opcję powinno się pozostawić bez zmian.
Number Of Rows – ilość wierszy ze zdjęciami. Jak na schemacie domyślnie ustawione są trzy wiersze. W naszym przykładzie pozostawimy tę opcję również niezmienioną.
Navigation Type – Określamy typ nawigacji, czy galeria ma posiadać pod zdjęciami punktory czy strzałki po bokach.
Bullets Color – określamy kolor punktorów.
Space Between Bullets – określamy odstęp między punktorami.
Bullets Margin Top – określamy odstęp punktorów od grupy zdjęć.
Kolejny blok służy do określenia pozycji całej galerii od reszty treści.
Position on the page – pozycja na stronie, czy galeria ma być wycentrowana, skierowana do lewej lub prawej strony.
Margin Top – odstęp od góry
Margin Bottom – odstęp od dołu
Margin Left – odstęp od lewej strony
Margin Right – odstęp od prawej strony
Kolejny krok ma wpływ na graficzny wygląd galerii. Możemy w nim zdefiniować obramowania, cienie oraz efekty obrazów np. po najechaniu na nie kursorem myszki. Zajmijmy się pierwszą grupą.
Tile As Link – czy obrazy mają być zarazem linkami do innej treści. Domyślnie jest ta opcja wyłączona, ponieważ głównym zadaniem galerii po kliknięciu zdjęcia jest pokazanie tego samego obrazu w większych rozmiarach.
Enable Border – czy zdjęcia maja posiadać obramowanie
Tile Border Width – szerokość obramowania
Tile Border Color – kolor obramowania
Tile Border Radius – czy rogi mają być zaokrąglone. Jeżeli tak to jak mocno. 2Px to delikatne zaokrąglenie. Im większa wartość tym większe zaokrąglenie.
Warto w tym momencie podkreślić, że nie zmieniliśmy jeszcze żadnej opcji. Galeria domyślnie ma bardzo uniwersalne ustawienia. Mnogość funkcji jednak zaspokoi najbardziej wybrednych użytkowników.
Przechodzimy do kolejnej grupy, w której określamy głównie cienie.
Enable Outline – czy po kliknięciu w zdjęcie ma pojawić się dodatkowe obramowanie.
Enable Shadow – włącz cienie
Tile Shadow Pos Hor – przesunięcie cienia od góry
Tile Shadow Pos Vert – przesunięcie cienia w poziomie
Tile Shadow Blur – wielkość cienia
Tile Shadow Spread – głębokość cienia
Tile Shadow Color – kolor cienia
Istnieje aplikacja online, która w ciekawy sposób pokazuje w czasie rzeczywistym każde z ustawień. Aplikacja znajduje się na stronie http://css3generator.com/ w bloku „Box Shadow”. Dzięki aplikacji można ustawić cieć dokładnie tak jak sobie go wyobrażamy. Kolejna grupa wymagająca omówienia to efekty obrazów.
Enable Image Effect – włącz efekty dla obrazów.
Enable Mouseover Overlay – włącz przesłonięcie obrazu po najechaniu na niego kursorem myszki.
Tile Overlay Opacity – przezroczystość przesłony
Tile Overlay Color – kolor przesłony
Enable Icons On Mouseover – pokaż ikony na obrazie
Show Link Icon – pokaż ikonę z linkiem np do treści, domyślnie pokaże się ikona do podglądu
Space Between Icons – odstęp między ikonami
Enable Tile Text Panel – pokaż tytuł obrazu.
Jak działają efekty dla obrazów pokazuje poniższy przykład. Pierwszy obraz to domyśny widok zdjęcia dla galerii. Kolejny pokazuje moment najechania kursorem myszki na obraz. Widoczne ściemnienie to właśnie nasza przesłona, lekko przezroczysta, w domyślnym ustawieniu czarna.
Kolejna grupa opcji pozwala na ustawienie wyglądu opisu obrazu.
Text Panel Padding Top – wewnętrzny margines od góry, w panelu dla tekstu
Text Panel Padding Bottom – wewnętrzny margines od dołu, w panelu dla tekstu
Text Panel Padding Left – wewnętrzny margines od lewej strony, w panelu dla tekstu
Text Panel Padding Right – wewnętrzny margines od prawej strony, w panelu dla tekstu
Text Panel Background Color – kolor tła panelu
Text Panel Background Opacity – przezroczystość panelu od 0.1 do 1
Text Panel Text Color – kolor tekstu
Text Panel Text Align – wycentrowanie tekstu
Text Panel Font Size – rozmiar czcionki
Text Panel Bold Text – czy tekst ma być pogrubiony
Panel z tytułem obrazu pojawia się po najechaniu kursorem myszki na obraz. Nie wpływa zatem negatywnie na czytelność galerii, a wręcz przeciwnie. Jak wygląda obraz z ustawionym podpisem pokazuje poniższy przykład.
Ostatnią grupą opcji „Troubleshooting”. Jest to bardzo ważna grupa ponieważ definiuje zasady ładowania skryptów galerii. Zarządzanie tymi ustawieniami wymaga znajomości budowy danej witryny. Złe ustawienie opcji może spowodować nie poprawne wyświetlanie galerii lub brak wyświetlania galerii.
Opcje te jednak mają jak największy sens.
Include jQuery Library – załaduj skrypt jQuery
Put JS Includes To Body - załaduj skrypty galerii do ciała strony
Debug Javascript Errors – debuguj język javascript w celu np. poznania błędów.
Opcje te pozwalają dostosować galerię do stron które posiadają np. inne dodatki również współpracujące z biblioteką jQuery. Jeżeli posiadasz inną galerie z komponentu Unite Gallery i działa ona poprawnie najlepiej zrobisz gdy zastosujesz te same opcje do nowej grupy.
Przebrnęliśmy przez wszystkie opcje ustawień galerii, kolejny raz podkreślić należy, że żadna nie została zmieniona. Zobaczymy jak wygląda nasza galeria na ustawieniach domyślnych. Naprzód jednak musimy załadować do niej obrazy. W celu przypisania galerii obrazów przejdźmy do zakładki „Items”.
System przekieruje nas do panelu zarządzania obrazami i filmami. Aby dodać obrazy należy kliknąć niebieski przycisk „add images”.
Po kliknięciu przycisku otworzy nam się okienko menadżera plików, dzięki któremu będziemy mogli wysłać zdjęcia na serwer.
Menadżer pokazuje strukturę katalogów znajdujących się na serwerze. Wybieramy katalog do którego chcemy wysłać obrazy. Aby zachować porządek przejdę do folderu „galeries”, a w nim utworzę nowy folder o nazwie „przykladowa”.
Kolejnym etapem jest zaznaczenie obrazów na naszym komputerze.
I przeciągnięcie ich do naszego okienka menadżera obrazów.
Następnie klikamy przycisk „Select Images”. Po chwili zostają wysłane na serwer i są już widoczne w naszej galerii.
Wracamy do zakładki Settings i klikamy przycisk „Update Gallery”
Czas umieścić galerię na którejś z podstron. W tym celu klikamy przycisk „Generate Shortcode”.
Po kliknięciu przycisku pojawi nam się okno popup z którego musimy skopiować kod umieszczenia.
Gdy skopiujemy kod zamykamy okienko krzyżykiem w górnym, prawym rogu.
Przechodzimy do umieszczenia kodu na podstronie. Przejdźmy do górnego menu, rozwińmy zakładkę „Artykuły” i kliknijmy z rozwinięcia „artykuły”
Systemy przekieruje nas do listy artykułów, podstron zamieszczonych w naszym serwisie.
W celu edycji treści wystarczy kliknąć w tytuł artykułu, podstrony jaki chcemy edytować. System przeniesie nas do formularza edycji.
Aby zamieścić galerię na edytowanej podstronie wystarczy wkleić kod w miejscu gdzie chcemy by nasza nowa galeria wyświetlała się. Ja to zrobię pod treścią.
Gdy wkleimy kod możemy zapisać i zamknąć edycję przyciskiem „zapisz i zamknij”.
Teraz przejdźmy do naszej podstrony zobaczyć jak wygląda nasza galeria.
Każdą galerię można edytować i zmieniać ustawienia lub obrazy. Wystarczy z listy galerii kliknąć na tytuł tej, którą zamierzamy edytować.