A Simple or Complex Image Gallery

The First is a Simple Gallery that Loops throught all images in a folder resizing the isotope page gallery display image online, the origional image is opened in LightGallery.

The Second is driven off of a data yml file, a hard way to do it, but it gives you a mobile responsive - data-responsive set of images kind of like a data-srcset but for a Isotope - LightGallery responsive display, using 4 or more image sizes.

Image sizing

Getting the four or more image sizes for the complex gallery is alot of work. If your on Github Pages, Cloudinary will not work. So I use Graphics Magic locally and then add the correct file extenshions for the size as image-th.jpg for the thumnail size, using 320px for the thumbnail size. Including 3 others image-320.jpg, image-800.jpg and image-1200.jpg, the main display image in lightgallery as image-1200.jpg. You can use different sizes to fit the needs for your site but they must have differing file size extenshions as image-1234.jpg or whatever.

Config and folder structure

The config yml should look simular to the below if your gallery.md files are in a folder named, photography no underscore as _photography.

# Defaultsdefaults:-scope:path:"photography"type:"photograpny"values:layout:singlebreadcrumbs:-label:"photography"url:/photography/permalink:/:path/:basename:output_ext// I use:basename:output_ext for redirection, could be /:photography/:name/

Adding Images

I added images in my /assets/images/photography/ folders for each gallery. as listed in my data/overwiew.yml file and configured in each of my /photography/Gallery.md files

Data YML File

Both the simple and Complex Gallerys are driven by the data/gallerys/overview.yml data file as displayed below, this is from my site and gallerys. The fist set is for the complex gallery with 5 images, you only need 4, with different sizes and ending with different size extenshion as -1234. The second is for the simple gallery with just one image listed.

Page Frontmatter

The Included Js And Css

I Included the lightgallery.js minified to my main site main.min.js file as to have it initilized at all times for any page. I included it right after jquery.js and before any other Conjugated scripts.

Adding all other LightGallery css and scripts in a assets/dist folder. In the same folder structure as in the lightgallery repo, adding isotope.js, mousewheel.js and picturefill.js from CloudFlare CDN.

Isotope.js latest at github repo: isotope.js and LightGallery Js and Css are required for this gallery including the below _gallery.sass file.

Gallery Assets

To gather the required scripts and css we need to download and add them to our assets folder. Adding included Isotope and LightGallery files as below seen in my includes/scripts.html file.

Jekyll Complex Gallery

This is a Gallery based on Isotope and LightGallery the same as my Simple Gallery, this Complex one uses a data yml file and 5 pre configured images for a figure srcset display. Alot of coding is require for this and my cat gallerys are the only ones built like this, but for the best mobile speed with responsiveness, this is the way to go.

The include file

This include file at: gallery-layout.htmlbuilds a srcset out of Five preconfigured images. Sizes as example image-320.jpg or 320px wide, image-800.jpg or 800px wide, image-1200px or 1200px wide, and the origional image in your stock size twice once with its origional name and once with the extenshion to the file name as above image-lg.WHATEVER .png .jpg .gif…

The include Code

This code donload at: gallery-layout.html Uses LightGallery Thumbnails for navigation in a LightGallery Display, Isotope for the grid with a caption if any.

The code below

<divid="aniimated-thumbnials"class="gallery"><divid="gallery-sizer"class="gallery-sizer"></div>
// for picture in include.gallery.pictures using liquid which kills this code block.
<divclass="image-wrapper"itemscopeitemtype="http://schema.org/ImageObject"><aitemprop="contentUrl"href="https://donboulton.com/assets/photography//"data-responsive=""class="image"><imgitemprop="thumbnail"alt=""src="https://donboulton.com/assets/photography//"/></a></div>
// endfor using liquid which kills this code block.
</div>

The layout file

The layout file for the Complex Gallery simular to the simple gallery with a added class on the div as class=”gallery”.

If there is any confusion to the contents of this post add a review, tweet or a comment below, and or go to the repo for, Donald Boulton at: Github Repo and view the code. Both my Simple and Complex Gallerys displayed on my Gallery Page.