Unite Gallery Joomla 3

Unite galleryJest 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.

1

Aby zamieści na stronie nową galerię zalogujmy się do panelu administracyjnego strony.

 

2

 

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ć.

 

3

 

Aby dodać nową galerię należy zjechać na dół strony i odszukać przycisk „Create New Gallery”.

 

4

 

Po wybraniu tej opcji system poprosi nas o wybranie stylu galerii jaką chcemy utworzyć. Mamy stosunkowo duży wybór.

 

5

 

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.

 

6

 

7

 

8

 

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.

 

9

 

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.

 

10

 

Po wypełnieniu pól możemy przejść do zapisu galerii. Służy do tego przycisk „Create Gallery”.

 

11

 

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.

 

12

 

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ć.

 

13

 

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.

 

14

 

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.

 

15

 

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.

 

16

 

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”.

 

17

 

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.

 

18

  • 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.

 

 

19

  • 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ą.

 

20

  • 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.

 

21

  • 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.

 

22

  • 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.

 

2324

 

Kolejna grupa opcji pozwala na ustawienie wyglądu opisu obrazu.

 

25

 

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.

 

26

 

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.

 

27

 

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”.

 

28

 

System przekieruje nas do panelu zarządzania obrazami i filmami. Aby dodać obrazy należy kliknąć niebieski przycisk „add images”.

 

29

 

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.

 

30

 

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”.

 

31

32

 

Kolejnym etapem jest zaznaczenie obrazów na naszym komputerze.

 

33

 

I przeciągnięcie ich do naszego okienka menadżera obrazów.

 

34

 

Następnie klikamy przycisk „Select Images”. Po chwili zostają wysłane na serwer i są już widoczne w naszej galerii.

 

35

 

Wracamy do zakładki Settings i klikamy przycisk „Update Gallery”

 

36

 

Czas umieścić galerię na którejś z podstron. W tym celu klikamy przycisk „Generate Shortcode”.

 

37

 

Po kliknięciu przycisku pojawi nam się okno popup z którego musimy skopiować kod umieszczenia.

 

38

 

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”

 

39

 

Systemy przekieruje nas do listy artykułów, podstron zamieszczonych w naszym serwisie.

 

40

 

W celu edycji treści wystarczy kliknąć w tytuł artykułu, podstrony jaki chcemy edytować. System przeniesie nas do formularza edycji.

 

41

 

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ą.

 

42

 

Gdy wkleimy kod możemy zapisać i zamknąć edycję przyciskiem „zapisz i zamknij”.

 

43

 

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ć.

 

 

44

Aktualności

Nowa strona internetowa X-CMS

26-05-2017 Wyświetleń:1160 Aktualności

Strona internetowa dla X-CMS

Projekt systemu zarządzania treścią X-CMS z naszego warsztatu doczekał się własnej strony internetowej. Uznaliśmy, że projekt jest na tyle rozwinięty iż powinien posiadać własny serwis internetowy i na nim przechowywać...

Czytaj więcej

Tworzenie stron WWW - częste pytania

12-10-2016 Wyświetleń:2405 Aktualności

Często zadawane nam są pytania dotyczące samego procesu tworzenia stron internetowych. Dlatego zdecydowaliśmy się na rozpoczęcie cyklu artykułów, odpowiadających na najczęstsze pytania.

Czytaj więcej

Aplikacja do wystawiania faktur Online

02-05-2015 Wyświetleń:247096 Aktualności

Udostępniliśmy nowe rozszerzenie do naszego systemu zarządzania treścią – aplikację do wystawiania faktur online. Teraz możesz mieć dostęp do swoich dokumentów z każdego

Czytaj więcej

Najnowsze kursy

Tworzenie stron z Page Builder

22-01-2016 Wyświetleń:2257 Joomla!

Jest potężnym narzędziem służącym do organizacji treści na stronach serwisu. Posiada kilkadziesiąt dodatków, a jego moc tkwi w prostocie układania elementów na stronie serwisu.

Czytaj więcej

Joomla 3 - Edycja treści

01-05-2015 Wyświetleń:4863 Joomla!

  Głównym elementem systemu CMS Joomla! Jest komponent artykułów. To właśnie ten komponent odpowiada za wyświetlanie treści na podstronach. Aby przejść do panelu

Czytaj więcej