Customize your Gallery with CSS!
You can easily add CSS to your page or layout to affect how your gallery looks. How to do so is really beyond the scope of this manual. Instead we will share some hidden tricks to add style to your gallery.
Trick #1 for Swiper Gallery: style one specific image
November Gallery adds each image's file name as one of the CSS classes of that image when rendered using the Swiper Gallery component. So, if your image filename is "cute-cat-pic-1.jpg", the corresponding image will have the class "cute-cat-pic-1", which you can then style as in the following example (which sets the image to be black-and-white provided that you are using the slider component):
{% put styles %}
<style>
.cute-cat-pic-1 {
background-blend-mode: luminosity;
}
</style>
{% endput %}Trick #2 for Swiper Gallery: Style all horizontal images
November Gallery also adds the class swiper-slide-horizontal to each horizontal image when rendered using the Swiper Gallery component, and swiper-slide-vertical to each vertical image. So it's easy to, for example, to make sure that vertical images "cover" the screen by default, but are "contained" and centered and not repeated on landscape devices:
{% put styles %}
<style>
.swiper-slide {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
@media screen and (min-width: 766px) and (orientation: landscape) {
.swiper-slide-vertical {
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
}
</style>
{% endput %}
No Comments