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

{% put styles %}
<style>
	.cute-cat-pic-1 {
		background-blend-mode: luminosity;
	}
</style>
{% endput %}

Trick #2 for Swiper Gallery: Style all horizontal images

{% 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 %}

Revision #1
Created Sat, Nov 2, 2019 6:21 PM by Lieszkovszky László
Updated Sat, Nov 2, 2019 6:35 PM by Lieszkovszky László