SimpleGallery.mjs

I looked at a number of different photo gallery options when figuring out how I would display photo collections on this website:

• I was transitioning from a default WordPress photo gallery, whose simplicity suited my use cases
• I also kept a few galleries in Google Photos, which has some benefits
• lightGallery.js looks quite nice - but requires a license to use
  • It is free for non-commercial uses so I could have just used it! But I didn't want to deal with the hassle of maintaining a license file outside of git but inside of my hosted frontend
• nanogallery2 I just didn't like the aesthetics all that much
  • I wouldn't be surprised if it was still possible to get something that looks good, but the home page did not appeal to me
• PhotoSwipe
  • I'm not actually sure why I didn't go with this, it looks about right
  • Might have been because I wanted a carousel of images shown while a main photo was highlighted

On landing on the decision that I could just do it myself, I did a bit of research trying to understand how to layout images, which was a bit of a fun rabbit hole. I found these articles:

• Visually Appealing Image Layout Algorithm , which went into a good amount of detail, linked to a few other interesting articles, and was heavily inspired by:
• Google Plus's Image Layout Algorithm, which is basically exactly what I wanted, and part of a series of write-ups that also covered a few other layout algorithms

So I built a single file ES6 module simpleGallery.mjs that

• is a quick solution based on the above blog posts that lays out images roughly like Google Photos
• has the options in the future of a different layout algorithms
• has the options in the future of putting things other than images into the layout - I really like Google Photos's map tiles for illustrating where photos were taken