Thumbnail generation and grid CSS for lightGallery

[btbristow]

Original post edited

This post edited since I refined my questions. There doesn't seem to be much Q&A here, but hopefully my approach will help others if they want to do the same thing. @sachinchoolur in case he is still active!

I'm using Jekyll for a single-page photo gallery with lightGallery. Instead of building that manually, Jekyll iterates over a folder of photos.

A few people have done this (in one case with Isotope for the gallery), but those folks generated separate thumbnail files.

I wasn't sure if I had to do that and had problems with it, so my code looks like this:

<div id="lightgallery">
{% for image in site.static_files %} // Iterate over my photo folder with Liquid
  {% if image.path contains '/photos/' %}
    <a href="{{ image.path | relative_url }}">
      <img src="{{ image.path | relative_url }}" alt="{{ image.basename }}" style="height: 240px;"> // Constrain the thumbnail heights
    </a>
  {% endif %}
{% endfor %}
</div>

<script type="text/javascript"> // Initialize lightGallery
    lightGallery(document.getElementById('lightgallery'), {
        plugins: [lgZoom, lgThumbnail, lgFullscreen],
        speed: 500,
        thumbnail: true,
    });
</script>

My base Jekyll layout loads the CSS and scripts:

<!-- lightGallery JavaScript -->
<script src="{{ '/assets/js/lightgallery.umd.js' | relative_url }}"></script>

<!-- lightgallery plugins -->
<script src="{{ '/assets/js/plugins/lg-thumbnail.umd.js' | relative_url }}"></script>
<script src="{{ '/assets/js/plugins/lg-zoom.umd.js' | relative_url }}"></script>
<script src="{{ '/assets/js/plugins/lg-fullscreen.umd.js' | relative_url }}"></script>

That looks bad and runs slowly, but I haven't worked out the CSS yet. I'm referencing Bootstrap since this official lightGallery example does, though it doesn't mention that in the codepen. Bootstrap itself uses Justified Gallery, so that might be all I need.

Questions:

• With lightGallery, on a thumbnail gallery page (not the lightbox that opens), is it bad practice to generate thumbnails dynamically? The official example just does this:

<img class="img-responsive" src="https://images.unsplash.com/photo-example?auto=format&fit=crop&w=240&q=80" /> 

• For a masonry layout, can I confirm that lightGallery doesn't have anything for that? Any suggestions on Bootstrap vs. Justified Gallery to create one?

Thanks! The official LG 2 docs don't cover much and my project is probably an edge case anyway, so help is appreciated! If I figure this out, I'll post it here.