I need to build a rather large image-gallery with masonry layout and filtering, so Isotope for that. Because of the number of images, I need some lazy-loading. And I need this responsive from watch to mobile to tablet to desktop. Lazysize does this. I am not sure I actually need ImagesLoaded, it's there because I keep searching what might help.
I plan to later on add the srcset and sizes as they come from Grav for speed, but that's not my main issue for the moment. I also need a lightbox, but again, this has no priority.
Following whatever I can find on the net, I came up with the following page template, but things won't cooperate. Individually yes, but not together. I am at wits end, and I post this in the hope someone sees where I deviate.
Thanks for reading !
{% extends 'partials/base.html.twig' %}
{% do assets.addJs('theme://js/lazysizes.min.js') %}
{% do assets.addJs('https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js') %}
{% do assets.addJs('https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js') %}
{% do assets.addJs('theme://js/home-grid.js') %}
{% do assets.addCss('theme://css/home-grid.css') %}
{# Links + Docs
https://isotope.metafizzy.co/
https://imagesloaded.desandro.com/
https://github.com/aFarkas/lazysizes
https://github.com/aFarkas/lazysizes#user-content-specify-dimensions
Learn
https://ericportis.com/posts/2014/srcset-sizes/
Code
https://codepen.io/anon/pen/vOeyQL
#}
{% block content %}
<div class="main-content">
<div class="container">
{{ page.content|raw }}
<div class="grid">
<div class="grid-sizer"></div>
{% for img in page.media.images %}
<div class="grid-item" style="padding-bottom: {{ (img.height / img.width * 100)|round(2, 'floor') }}%;">
<img data-src="{{ img.url }}"
alt=""
class="lazyload" />
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
jQuery(document).ready(function ($) {
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
// use element for option
columnWidth: '.grid-sizer'
}
})
// // layout Isotope after each image loads
// $grid.imagesLoaded().progress( function() {
// $grid.isotope('layout');
// });
});
/* fluid 5 columns */
.grid-sizer,
.grid-item {
width: 20%;
}
.grid-item {
float: left;
padding: 0;
border: 2px solid #ffffff;
height: 0;
/* padding-bottom is calculated and rendered in to HTML OR inserted on css class*/
}
.grid-item img {
display: block;
width: 100%;
}
/* clear fix
.grid:after {
content: '';
display: block;
clear: both;
} */
/* fade image in after load */
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}