Piękne, responsywne galerie zdjęć - DJ-MediaTools

W katalogu rozszerzeń Joomla! znajdziesz ponad 200 różnych rozszerzeń, za pomocą których możesz tworzyć fotogalerie. Galerie zdjęć możesz oglądać na wielu witrynach. Przecież jeden obraz wart jest tysiąca słów.

Ja od dłuższego czasu po wielu testach różnych rozszerzeń do tworzenia galerii, stosuję tylko dwa rozwiązania. Pierwsze, to bezpłatne rozszerzenie Phoca Gallery, którego autorem jest Czech Jan Pavelka, natomiast drugie,  komercyjne rozszerzenie, polskiej produkcji z niesamowitymi możliwościami, to DJ-MediaTools. Autorzy tego rozszerzenia, to zespół osób mocno związanych ze społecznością Joomla! w Polsce pracujący pod marką DJ-Extensions. Ostatnio przyglądam się także możliwościom i rozwojowi produktu Balbooa Joomla Gallery.

W tym artykule skupię się tylko na jednym z nich - DJ-MediaTools. To produkt, który daje niesamowite możliwości. Przykłady zastosowania w konkretnej witrynie opisuje w książce Joomla! 3.x. Praktyczny kurs. Za jego pomocą możesz tworzyć nie tylko świetnie wyglądające galerie, ale także slidery! Grafiki wyświetlane w nich mogą znajdować się w jakimś folderze, artykułach lub innym rozszerzeniu zainstalowanym w witrynie. Elementy tworzone za pomocą tego rozszerzenia mogą być dołączane do artykułów, wstawiane do modułów lub stanowić oddzielne widoki komponentu. Za pomocą DJ-MediaTools możesz wyświetlać także wideo pochodzące z serwisów YouTube i Vimeo. Możesz również wykorzystać wideo, zamiast statycznych obrazów w tworzonych sliderach. Jego możliwości możesz sprawdzić otwierając stronę demonstracyjną DJ-MediaTools.

DJ-MediaTools to rozszerzenie komercyjne, którego koszt wynosi 50$ dla 6-cio miesięcznej subskrypcji i wparcia technicznego ze strony firmy. 

Plik instalacyjny oprócz komponentu zawiera także sporą ilość dodatkowych rozszerzeń (modułów i dodatków), dzięki którym otrzymujesz mnóstwo dodatkowych funkcjonalności. Szczegółową dokumentację, wideo tutoriale, a także wersję demonstracyjną znajdziesz na stronie DJ-MediaTools.

Instalacja i konfiguracja DJ-MediaTools

Instalacja i konfiguracja komponentu jest prosta i intuicyjna. Po opłaceniu subskrypcji, pobierasz plik komponentu (DJ-MediaTools All in one) oraz pliki języka polskiego (Language Packs) i za pomocą instalatora Joomla! (menu Rozszerzenia / Instalacje) instalujesz je w swojej witrynie.

Dostęp do wszystkich opcji komponentu znajdziesz klikając w menu Komponenty pozycję DJ-MediaTools. W oknie panelu kontrolnego DJ-MediaTools zobaczysz pasek boczny z czterema odsyłaczami: Panel, Albumy, Elementy własne i Obrazy & CSS Cache oraz 7 przycisków, które prowadzą do najważniejszych funkcji komponentu. W przyborniku znajdziesz tylko jeden przycisk: Opcje. Po prawej stronie znajduje się sekcja informująca o aktualnie zainstalowanej wersji rozszerzenia oraz pole umożliwiające rejestrację. Warto to zrobić, aby system mógł w przyszłości zainstalować nowsze wersje rozszerzenia. Numer licencji znajdziesz po zalogowaniu się do witryny DJ-Extensions i kliknięciu w menu pozycji My Acount. W polu paste licence key here wklej kod Twojej licencji DJ-MediaTools, a następnie kliknij przycisk Register.

Jeżeli wprowadzony kod jest prawidłowy, zobaczysz stosowny komunikat wraz z informacją, do kiedy jest on ważny. 

Komponent DJ-MediaTools posiada wiele opcji konfiguracyjnych. W tym artykule skupię się na tym, aby pokazać Ci tylko te, które będą potrzebne do utworzenia galerii zdjęć i wideo oraz slidera. 

Tworzenie galerii zdjęć

OK, utwórzmy zatem pierwszy album! W tym celu kliknij odnośnik Nowy album znajdujący na pulpicie. W polu Tytuł wpisz tytuł albumu, natomiast w polu Źródło albumu wybierz z listy skąd będą pobierane obrazy. W tym przykładzie pozostawiam pozycję: Elementy własne. W polu Folder przesyłania kliknij przycisk Wybierz, a następnie w polu Utwórz nowy folder wpisz nazwę nowego folderu i kliknij przycisk Utwórz. Teraz kliknij odnośnik z nazwą nowo utworzonego folderu, aby został on przypisany do albumu.

Do obszaru Przesyłanie wielu obrazów możesz dodać dowolną ilość obrazów do tworzonego albumu. Aby przesłać przygotowane wcześniej pliki na serwer, wystarczy przeciągnąć je do tego obszaru. Możesz także skorzystać z przycisku Dodaj obrazy. Po wskazaniu plików, które mają być przesłane na serwer, system automatycznie rozpocznie proces wgrywania plików. Jeżeli tak się nie stanie, to kliknij przycisk Rozpocznij przesyłanie i obserwuj jak przebiega proces wgrywania plików. Jeżeli wszystkie pliki zostaną wgrane, zobaczysz ich miniaturki w obszarze pod polem Źródło albumu (Album source). W obszarze z miniaturkami możesz za pomocą mechanizmu przeciągnij i upuść zmieniać kolejność wyświetlania poszczególnych obrazów, zmieniać nazwę, dodać opis, a także usuwać je z albumu. Zapisz wprowadzone zmiany klikając przycisk Zapisz i zamknij.

Spróbuj teraz samodzielnie, utworzyć kolejny album. Pamiętaj, aby pliki wgrać do odpowiedniego folderu! Jeżeli wszystko zostało wykonane tak jak należy, to w menadżerze albumów na liście widoczne będą dwie pozycje.

Aby zarządzać obrazami umieszczonymi w poszczególnych albumach kliknij w pasku bocznym link Elementy własne. W kolumnie Album możesz sprawdzić, czy poszczególne obrazy znajdują się w odpowiednich albumach.

Aby Twoje galerie były widoczne w witrynie, musisz jeszcze utworzyć odpowiednie pozycje menu lub utworzyć nowe menu. Mój przykład opiera się na standardowej wersji Joomla! wraz z przykładowymi treściami, dlatego dodam do menu poziomego nową pozycję, która będzie zawierać dwie dodatkowe pozycje podrzędne. Pozycja główna będzie pokazywać wszystkie galerie (albumy) utworzone za pomocą tego rozszerzenia, natomiast pozycje podrzędne będą wyświetlały konkretne albumy.

Jako typ pozycji menu dla pozycji głównej wybieram w sekcji DJ-MediaTools pozycję: Widok siatki albumów. Następnie tworzę dwie pozycje podrzędne. Jako typ pozycji menu wybieram w sekcji DJ-MediaTools pozycję: Widok pojedyńczego albumu. W polu Album trzeba kliknąć przycisk Wybierz, a następnie w oknie modalnym kliknąć przycisk Wybierz dla właściwego albumu. Pamiętaj, aby w polu Pozycja macierzysta, wybrać z listy pozycję nadrzędną. 

Teraz mogę przejść do witryny i sprawdzić, jak prezentuje się strona po kliknięciu pozycji wyświetlającej wszystkie albumy.

Co zrobić, aby tytuł albumu widoczny był na miniaturce reprezentującej album?

Otwórz panel kontrolny (pulpit) DJ-MediaTools (menu Komponenty / DJ-MediaTools) i kliknij przycisk Opcje. Na karcie Widok komponentu w sekcji Widok siatki albumów, w polu Pokaż tytuł albumu wybierz z listy pozycję Tak.

Po zapisaniu wprowadzonych zmian siatka albumów na stronie prezentuje także tytuły albumów.

Aby zobaczyć, jak prezentuje się wybrana galeria możesz kliknąć miniaturę wybranego albumu lub kliknąć jedną z pozycji menu znajdujących się po wskazaniu pozycji Galerie. Domyślne ustawienia DJ-MediaTools powodują, że wyświetlany jest slider pokazujący zmieniające się cyklicznie poszczególne obrazy galerii.

Zmienimy teraz ten widok na na typowy dla galerii widok miniatur. Otwórz ponownie panel kontrolny (pulpit) DJ-MediaTools i kliknij przycisk Opcje. Tym razem kliknij kartę Opcje albumu i w polu Układ albumu wybierz z listy pozycję Gallery Grid. Dodatkowo w polu Reakcja po kliknięciu wybierz z listy pozycję Otwórz obraz w oknie lightbox. Na koniec zdefiniuj rozmiary miniatur galerii wpisując odpowiednie wartości w polach Szerokość obrazu i Wysokość obrazu.

Po zapisaniu wprowadzonych zmian galeria powinna wyświetlać miniatury umieszczonych w niej obrazów.

Aby wyświetlić pojedynczy obraz w okienku lightbox, zgodnie z wcześniej zdefiniowanymi ustawieniami wystarczy kliknąć na wybranej miniaturce. Masz do dyspozycji kilka ikon, za pomocą których możesz wyświetlać kolejne lub poprzednie obrazy znajdujące się w galerii lub zamknąć okienko lightbox.

Komponent DJ-MediaTools umożliwia wyświetlanie albumów na wiele sposobów. Odpowiednie ustawienia znajdziesz w po kliknięciu w przycisku Opcje na karcie Opcje albumu.

Jeżeli w Twojej galerii znajdują się obrazy w różnym układzie, zarówno poziomym, jak i pionowym, a także o różnych proporcjach, to zachęcam do przetestowania układu albumu typu masonry. 

Dodawanie do zdjęć znaków wodnych (watermarks) 

Jeżeli chcesz zabezpieczyć swoje obrazy przed wykorzystaniem ich na innych stronach bez podania Twojego autorstwa, możesz umieścić na nich tzw. znak wodny. 

Najpierw musisz utworzyć plik w formacie PNG, który będzie stanowił znak wodny. Może to być Twoje logo, nick, nazwisko lub jakikolwiek inny plik graficzny.  

Otwórz ustawienia globalne komponentu DJ-MediaTools (menu Komponenty / DJ-MediaTools, przycisk Opcje), a następnie kliknij kartę Ustawienia obrazu. Opcje związane z ustawieniami znaku wodnego znajdziesz w sekcji Watemark settings. Aby utworzony przez Ciebie znak wodny widoczny był na obrazach, w polu Use watemarks wybierz z listy pozycję: Tak, następnie w polu Watemark image (PNG) kliknij przycisk Wybierz i wskaż plik, który ma stanowić znak wodny. W polu Watemark size zdecyduj, jaką wielkość ma mieć umieszczony na obrazach znak wodny. W polu Watemark position (horizontal) zdefiniuj rozmieszczenie znaku wodnego w poziomie, natomiast w polu Watemark positioon (vertical) zdefiniuj rozmieszczenie w pionie. 

Jeżeli po zapisaniu ustawień znaki wodne nie są widoczne na obrazach umieszczonych w galeriach na stronie, to należy wyczyścić cache obrazów utworzonych w komponencie. W tym celu kliknij odnośnik Obrazy & CSS cache znajdujący się w pasku bocznym komponentu DJ-MediaTools, a następnie kliknij przycisk Skasuj ... obrazów.

Teraz Twój znak wodny powinien być widoczny na każdym opublikowanym obrazie w galerii.

Czy istnieje możliwość usunięcia znaku wodnego z wybranych albumów? Oczywiście, tak!

Edytuj wybrany album, a następnie kliknij kartę Opcje albumu i w polu Use watemarks wybierz z listy pozycję: Nie.

Czy istnieje możliwość usunięcia znaku wodnego z wybranych obrazów? Najnowsza wersja DJ-MediaTools 2.12.0, z której korzystałem w czasie pisania tego artykułu nie posiada takiej funkcjonalności.

Tworzenie galerii wideo

Jest równie proste, co tworzenie galerii obrazów. Kliknij odnośnik Nowy album znajdujący na pulpicie. W polu Tytuł wpisz tytuł albumu, natomiast w polu Link do video wklej link do Twojego wideo z serwisu YouTube lub Vimeo. Po chwili miniaturka wideo pojawi się w obszarze pod polem Źródło albumu (Album source). Wklej do pola Link do video po kolei kolejne odnośniki do wideo, które mają znaleźć się w albumie. Podobnie, jak w przypadku galerii obrazów, w obszarze z miniaturkami możesz za pomocą mechanizmu przeciągnij i upuść zmieniać kolejność wyświetlania poszczególnych wideo, zmieniać nazwę, dodać opis, a także usuwać je z albumu. 

Jeżeli chcesz, aby wideo odtwarzane były wewnątrz albumu, a nie w okienku pop-up, to kliknij jeszcze kartę Opcje albumu. W polu Video playback wybierz z listy pozycję In the slide.

Teraz wystarczy kliknąć wybraną miniaturę aby odtworzyć wideo :-)

Jestem pewien, że za pomocą rozszerzenia DJ-MediaTools tworzenie galerii obrazów nie będzie dla Ciebie problemem. Wierzę, że proste galerie za pomocą tego narzędzia jest w stanie zrobić każdy! Pamiętaj jednak, że aby tworzyć bardziej zaawansowane galerie, dostosowane do potrzeb konkretnego serwisu, musisz dokładnie poznać wszystkie opcje konfiguracyjne. Dlatego gorąco zachęcam Cię do samodzielnego poznawania dostępnych ustawień tego rozszerzenia. 

Umieszczanie galerii w artykułach

Często otrzymuję pytania dotyczące możliwości umieszczania galerii wewnątrz artykułów. Taka funkcjonalność jest bardzo przydatna, kiedy tworzysz na przykład relacje z różnego typu wydarzeń, czy eventów i chcesz, aby czytelnicy mogli od razu zobaczyć także galerię obrazów lub wideo bez potrzeby otwierania dodatkowej strony.

Za pomocą DJ-MediaTools możesz z poziomu edycji artykułu utworzyć nowy album lub umieścić w artykule już istniejący album. Utwórz nowy artykuł lub edytuj istniejący. Umieść kursor w miejscu, w którym chcesz umieścić galerię, a następnie kliknij przycisk Album DJ-MediaTools. 

Teraz możesz utworzyć nowy album lub wstawić istniejący. Proces tworzenia szablonu jest dokładnie taki sam, jak z poziomu komponentu, więc nie ma sensu opisywać go jeszcze raz. Wybiorę zatem do mojego przykładowego artykułu jeden z wcześniej utworzonych albumów. Zauważ, że możesz wstawić całą galerię (album) lub tylko okładkę. 

Zobacz, jak może wyglądać artykuł z umieszczoną w nim przykładową galerią:

A teraz zobacz, jak wygląda ten artykuł z okładką albumu:

Tworzenie sliderów

Slider lub slideshow to element strony w obszarze, którego wyświetlane są najczęściej obrazy, zmieniające się po upływie określonego czasu. Za pomocą slidera możesz umieścić więcej treści w ograniczonym obszarze witryny.

Tego typu elementy na strnie stosuje się często, aby wyróżnić najnowsze treści lub zaprezentować najważniejsze aspekty proponowanej oferty. Efektowny slider wyświetlający pliki graficzne oraz ich opisy w formie slajdów jest także jednym z elementów zwiększających atrakcyjność witryny.

Rozszerzenie DJ-MediaTools może być użyte zarówno do tworzenia galerii zdjęć, jak i sliderów. Jak tworzyć galerie obrazów już wiesz, teraz pokażę Ci, jak za jego pomocą utworzyć efektowny slider!

Dobrym pomysłem jest przygotowanie wcześniej plików graficznych, które będą prezentowane w sliderze. Warto przygotować je w tych samych rozmiarach. 

Jeżeli masz już odpowiednie grafiki, najpierw utwórz nowy album. W tym celu kliknij w menu Komponenty pozycję DJ-MediaTools, a następnie kliknij na pulpicie odsyłacz Nowy album. W polu Tytuł wpisz tytuł slidera, na przykład: Slider DJ-MediaTools, następnie korzystając z obszaru Przesyłanie wielu obrazów prześlij przygotowane pliki obrazów. Kliknij przycisk Zapisz i zamknij, aby zapisać wprowadzone zmiany. Teraz warto edytować poszczególne ementy slidera i uzupełnić je o tytuł i krótki opis. Kliknij przycisk Elementy własne znajdujący się na pulpicie (panelu) komponentu DJ-MediaTools lub odnośnik znajdujący się w pasku bocznym. Edytuj pozycje przypisane do albumu Slider DJ-MediaTools, a następnie zmień wpisy w polu Tytuł oraz dodaj wpisy w polu Opis elementu. Jeżeli chcesz, aby kliknięcie wybranego obrazu w sliderze powodowało otwarcie konkretnego artykułu, to odpowiednie opcje znajdziesz po prawej stronie w sekcji Linking Options. Najpierw w polu Typ linku wybierz z listy pozycję Artykuł. Następnie w polu Artykuł, kliknij przycisk Wybierz i w oknie modalnym kliknij odnośnik z tytułem wybranego artykułu. 

Teraz można utworzyć moduł, który będzie wyświetlał slider na wybranych pozycjach szablonu.

Kliknij w menu Rozszerzenia pozycję Moduły, a następnie odszukaj moduł o nazwie: DJ-MediaTools Album i edytuj go. W polu Tytuł zmień lub pozostaw nazwę modułu, w polu Pokaż tytuł kliknij przycisk Ukryj. W polu Pozycja wybierz pozycję, w której ma pojawić się slider. W moim przykładzie opartym na instalacji Joomla! wraz z przykładowymi treściami, wybieram pozycję o nazwie: position-3. W polu Stan wybierz z listy pozycję Opublikowano. W polu Album kliknij przycisk Wybierz, a następnie w oknie modalnym kliknij przycisk Wybierz obok tytułu albumu: Slider DJ-MediaTools. W polu Układ albumu wybierz z listy jedną z pozycji. Ciekawym rozwiązaniem jest na przykład Tabber. W polu Reakcja po kliknięciu wybierz z listy pozycję Hiperłącze. Zdefiniuj szerokość i wysokość obrazu (np. 700x300) i kliknij kartę Przypisz do pozycji menu, aby przypisać moduł do wszystkich lub wybranych pozycji menu.

Zapisz wprowadzone zmiany klikając przycisk Zapis i zamknij i sprawdź, jak slider prezentuje się na stronie. W moim przypadku wycofałem z publikacji moduł o nazwie Image Module. ponieważ nie chciałem aby wyświetlał się na tej samej pozycji co slider.

Interesującą opcją jest możliwość dodania wideo odtwarzanego w tle jako elementu slidera. Poruszające się elementy w sliderze bardziej przyciągają uwagę niż statyczne obrazy. Wideo takie jest wyciszone i odtwarza się automatycznie w pętli. Aby dodać wideo do slidera, wystarczy, że edytujesz wybrany element slidera i w polu Background video wkleisz link do wideo z serwisu YouTube lub Vimeo. 

Teraz, zamiast statycznego obrazu w sliderze będzie odtwarzane wideo:

Przeglądanie galerii na urządzaniach mobilnych

Obecnie wiele osób przegląda witryny korzystając z urządzeń mobilnych, takich jak tablety lub smartfony, które są wyposażone w ekrany dotykowe. Wiele badań wskazuje, że obecnie większość witryn przeglądana jest za pomocą tych urządzeń. Warto zatem zadbać o wygodną obsługę galerii i sliderów na ekranach dotykowych. Rozszerzenie DJ-MediaTools od wersji 2.12.0 wyposażone jest w odpowiednie opcje!

Aby włączyć obsługę albumów za pomocą ekranów dotykowych dla wszystkich albumów kliknij przycisk Opcje w komponencie DJ-MediaTools. Kliknij kartę Opcje albumu, a następnie w polu Typ okna lightbox wybierz z listy pozycję Photoswipe. 

Moim zdaniem DJ-MediaTools jest w stanie zaspokoić potrzeby większości webmasterów projektujących witryny zawierające slidery, czy galerie obrazów. 

Bonus od DJ-Extensions

Kilka dni przed publikacją tego artykułu napisałem do Tomasza Kowalskiego, współwłaściciela DJ-Extensions i zapytałem, czy byliby skłonni zaoferować moim czytelnikom specjalny kod rabatowy, który umożliwiałby zakup tego rozszerzenia po atrakcyjnej cenie. Tomasz poprosił o "chwilę czasu" na zastanowienie, a na drugi dzień otrzymałem maila od niego z gotowymi kodami uprawniającymi do uzyskania rabatu!

Jeżeli podejmujesz szybkie decyzje, to skorzystasz najbardziej! Możesz zdobyć DJ-MediaTools o 40% taniej. Wystarczy, że podczas zakupu wkleisz w odpowiednim polu kod: ODEXZD. Kod ten jest ważny tylko do 30.11.2018. 

Jeżeli się spóźnisz lub trafisz na ten artykuł później, to możesz skorzystać z kodu: ZDLMN2, który obniży cenę o 30%!

Pamiętaj, że DJ-MediaTools, to polski produkt! Jeżeli chcesz o coś zapytać zespół DJ-Extensions, to śmiało pisz w Naszym pięknym języku :-) Wystawiają polskie faktury i płacić także można w złotówkach. Pytać możesz bezpośrednio na czacie podpiętym do strony, lub mailem na adres: Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript..

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?

Zapisz się do newslettera!