Will Grav work for a gallery with hundreds of images?

Support Plugins
11

In case someone is looking for a similar solution.

I went with Media Boxes (not free, not expensive either) and Fancybox instead of Desandro’s Masonry and featherlight and used @mikegcox twig as an example. So I ended up with this:

</header>
    <div class="page-content">
        {{ page.content }}
		<div id="grid">
			{% for image in page.media.images|sort|reverse %}
            {% set imgtitle = image.filename|replace({'.JPG':'','.jpg':'','_':' ','-':' '}) %}
			<div class="media-box category1">
			<div class="media-box-image">
				<div data-thumbnail="{{ image.resize(600,400).quality(100).url }}"></div>
				<div class="thumbnail-overlay">
				<i class="fa fa-plus mb-open-popup" data-src="{{ image.resize(1920,1280).url }}" data-title="{{ imgtitle }}"></i>
			</div>
				</div>
			</div>
			{% endfor %}
		</div>
	</div>

Apart from that it’s basically just loading all the js and css files in the template you need them and initialize with as many options you need.

    <script>
    
    $('#grid').mediaBoxes(); 
    
</script>

Very happy with the result! very happy with Grav!

1 Like