6.9. Theming Views u Drupalu. Napravite Owl Carousel slideshow sa sličicama (thumbnails).

27/05/2025, by Ivan

Vrlo često nam Views šablon ne odgovara, pa možemo prebrisati (override) šablone za Views. Nažalost, ne postoji UI za pretragu željenog šablona u Views, ali možemo koristiti obrasce (patterns) za redefinisanje šablona.

Više o obrascima možete pročitati u ovom članku:

6.6. Rad sa šablonima u Drupalu. Šta su šabloni u Drupal jezgru.

Posebno nas zanima sledeće:

Ispod su moguća imena šablona za prebrisavanje.

Ime View-a - foobar (mašinsko ime)
Prikaz formata - unformatted (neformatirana lista, dodajte moguće opcije)
Stil prikaza - fields (polja)
Ime prikaza — page (stranica)

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

Owl Carousel 1.x dodatak nema mogućnost prikaza sličica (thumbnails) u galeriji. Zato ćemo koristiti Owl Carousel verziju 2.x, koja podržava sličice. Ako ne želite da se bavite redefinisanjem šablona, pisanjem CSS i JavaScript koda, možete jednostavno instalirati Views Slideshow modul:

https://www.drupal.org/project/views_slideshow

Ili Flex Slider modul:

https://www.drupal.org/project/flexslider

Na njima možete brzo konfigurisati slideshow bez poznavanja CSS-a i jQuery-a.

Mi ćemo praktikovati redefinisanje Views šablona i povezivanje jQuery biblioteka.

Za početak preuzmite i uključite Owl Carousel 2.x biblioteku:

https://github.com/OwlCarousel2/OwlCarousel2

Moguće je da ste pronašli Owl Carousel 1.x verziju:

https://github.com/OwlFonk/OwlCarousel

Ona nam ne odgovara jer ne podržava sličice, za nju treba dodatno pisati kod.

Kopirajte folder owl-carousel (gde se nalazi owl.carousel.min.js fajl) u folder vaše teme, i sada uključimo css i js fajlove karusela. Dodajte sledeće linije u libraries.yml fajl teme:

global-styling:
  version: 1.x
  css:
    theme:
      owl-carousel/owl.carousel.css: {}
      owl-carousel/owl.theme.css: {}    
      owl-carousel/owl.transitions.css: {}
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
    owl-carousel/owl.carousel.min.js: {}
  dependencies:
    - core/jquery

Nisam pomerao js fajlove iz /js i css foldera u /css folder, ali možete to uraditi, samo nemojte zaboraviti da ispravite putanje u css fajlovima do slika koje verovatno držite u folderu images.

Da bi se promene primenile, potrebno je očistiti keš.

Sada napravite novi tip sadržaja gallery i dodajte mu polje za slike.

Kreirajte novi View, gde ćete prikazati jedno polje slike iz novog tipa sadržaja.

Dodatni tipovi blokova (EBT) - Novo iskustvo rada sa Layout Builder-om❗

❗Dodatni tipovi pasusa (EPT) – Novo iskustvo rada sa pasusima

6.9. Theming Views u Drupalu. Napravite Owl Carousel slideshow sa sličicama (thumbnails).

Menu