3.5.5.1. Uključivanje jQuery OwlCarousel u Drupal Views
U poslednjem članku smo napravili slideshow koristeći Views Slideshow. Ali još uvek imamo nestilizovani paginator sa malim slikama.
U ovom članku ćemo pogledati kako da dodamo OwlCarousel i dodamo CSS koristeći dodatnu biblioteku.
Ovde koristimo prilagođeni modul za povezivanje OwlCarousel, ali sledeći put ćemo stilizovati slideshow u fajlovima teme.
https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip
Možete pročitati kako se pravi slideshow u prethodnom članku:
3.5.5. Views slideshow - Izlaz jQuery slideshow i karusela preko Views.
Kao rezultat dodavanja prilagođenog modula dobijamo sledeći slideshow:
Prvo treba napraviti fasciklu modula u fascikli svih modula:
/modules/custom
Zatim napraviti fajl sa informacijama o modulu:
/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.info.yml
Za Drupal 8.8 i niže:
name: Drupalbook OwlCarousel
description: Dodaje stilove Views paginaciji
type: module
core: 8.x
package: Drupalbook
Za Drupal 8.8 i više:
name: Drupalbook OwlCarousel
description: Dodaje stilove Views paginaciji
type: module
core_version_requirement: ^8 || ^9
package: Drupalbook
Više o razvoju modula ćemo kasnije, sada ćemo samo analizirati kako se dodaje biblioteka u prilagođeni modul.
name - proizvoljno ime modula
description - opis modula
type - tip projekta (modul ili tema)
core ili core_version_requirement - verzija Drupala
package - grupa modula
Sada možemo uključiti modul. Ali prvo, dodajmo OwlCarousel biblioteku, zvanični jQuery OwlCarousel plugin:
https://owlcarousel2.github.io/OwlCarousel2/
OwlCarousel biblioteku stavio sam u:
\modules\custom\drupalbook_owlcarousel\js\owlcarousel
Takođe sam dodao prilagođeni JavaScript fajl za inicijalizaciju OwlCarousel:
\modules\custom\drupalbook_owlcarousel\js\drupalbook_owlcarousel.js
(function ($) {
Drupal.behaviors.drupalBookOwlCarousel = {
attach: function (context, settings) {
$('.view-slideshow #widget_pager_bottom_slideshow-block_1').owlCarousel({
items: 5,
margin: 5,
nav: true,
responsiveClass: true,
responsive: {
0: {
items: 3
},
600: {
items: 4
},
1000: {
items: 5
}
}
});
$('.view-slideshow #widget_pager_bottom_slideshow-block_1').addClass('owl-carousel');
}
};
})(jQuery);
OwlCarousel se povezuje na zajednički tag koji obuhvata pojedinačne slike. Dodajem klasu owl-carousel na taj div da bi se primenili standardni OwlCarousel stilovi. U nizu responsive podešavamo broj elemenata na slideru za različite širine ekrana. Veličine slika se automatski prilagođavaju.
Takođe sam dodao dodatni CSS fajl sa stilovima za slideshow:
\modules\custom\drupalbook_owlcarousel\css\drupalbook_owlcarousel.css
.view-slideshow #widget_pager_bottom_slideshow-block_1 {
max-width: 480px;
position: relative;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1.owl-prev {
position: absolute;
left: 5px;
top: 30px;
opacity: 0.7;
background: url(../images/little-left.png) center center no-repeat;
width: 32px;
padding-top: 32px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1.owl-prev:hover {
opacity: 1;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1.owl-next {
position: absolute;
right: 5px;
top: 30px;
opacity: 0.7;
background: url(../images/little-right.png) center center no-repeat;
width: 32px;
padding-top: 32px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1.owl-next:hover {
opacity: 1;
}
.view-slideshow .views-slideshow-controls-bottom {
max-width: 480px;
}
.views_slideshow_pager_field_item.active img {
border: 1px solid #0000ff;
}
.views_slideshow_controls_text_pause {
display: none;
}
.view-slideshow .view-content {
position: relative;
max-width: 480px;
}
#views_slideshow_controls_text_previous_slideshow-block_1 {
position: absolute;
top: 155px;
left: 10px;
z-index: 99;
}
#views_slideshow_controls_text_previous_slideshow-block_1 a {
background: url(../images/left.png) center center no-repeat;
width: 42px;
padding-top: 42px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
#views_slideshow_controls_text_next_slideshow-block_1 {
position: absolute;
top: 155px;
right: 10px;
z-index: 99;
}
#views_slideshow_controls_text_next_slideshow-block_1 a {
background: url(../images/right.png) center center no-repeat;
width: 42px;
padding-top: 42px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
Sada treba da povežemo sve to kao Drupal biblioteku:
Kreiranje biblioteka u Drupalu:
Za to sam napravio fajl modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.libraries.yml
drupalbook_owlcarousel:
css:
theme:
js/owlcarousel/assets/owl.carousel.css: {}
js/owlcarousel/assets/owl.theme.default.min.css: {}
css/drupalbook_owlcarousel.css: {}
js:
js/owlcarousel/owl.carousel.min.js: {}
js/drupalbook_owlcarousel.js: {}
dependencies:
- core/jquery
U dependencies je potrebno navesti jQuery jer je jedina biblioteka koja zahteva jQuery. Povezujemo OwlCarousel CSS/JS fajlove i naše prilagođene CSS/JS fajlove.
Sada da bismo povezali biblioteku, uključimo modul drupalbook_owlcarousel. Takođe dodajemo fajl sa povezivanjem biblioteke:
modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.module
/**
* hook_preprocess_views_view().
*/
function drupalbook_owlcarousel_preprocess_views_view(&$variables) {
if ($variables['view']->storage->id() == 'slideshow') {
$variables['#attached']['library'][] = 'drupalbook_owlcarousel/drupalbook_owlcarousel';
}
}
U if uslovu navodimo ime View-a, a u nazivu biblioteke prvo ime modula, pa ime biblioteke iz libraries.yml. Za lakše praćenje, nazvao sam biblioteku istim imenom kao i modul, ali jedan modul može imati više biblioteka sa različitim imenima.
Sada očistite keš, i stilovi i JavaScript bi trebalo da budu primenjeni. Možda ćete imati drugačije selektore, pa ćete morati prilagoditi CSS i JS fajlove. Ako nešto ne funkcioniše, pišite u komentarima, pomoći ćemo.