To celebrate our 20th wedding anniversary the wife and I spent two weeks in Canada during late September 2023. We flew into Vancouver and then drove to Whistler, Clearwater, Jasper, Banff, and finished in Calgary. The scenery was breathtaking, and the weather was perfect. The following image gallery is a selection of my favourite photographs from the trip.
Click/tap on an image to enlarge and see a description. Use the filter buttons to limit images to a specific location.
Building the gallery
I needed some help with this post. I'd already built filters for the Homepage and Changelog page, so I had that ready to go, but, I wasn't sure I had the CSS skills to get the gallery working the way I wanted. I managed to get close, but not close enough, so I followed an online tutorial.
I wanted the image popups to be a Web Component, so I could easily reuse them in future by simply using a custom HTML tag e.g.
<dialog-image>. I also wanted to use the
<dialog> element (now that it's supported across the main browsers), which I'd never used before, to serve up the full-sized images. Luckily, a tutorial appeared recently which describes how to do exactly that.
Links to all the resources I used are listed below:
Here's a definition of Web Components I just pulled off the web:
The image popup Web Component I created for this post was my first Web Component. I then went off on a bit of a "Web Component All The Things" binge, and created 4 more. I targeted article page elements that are common across all articles, and then created a Web Component for each. So far, I've converted the following page elements into reusable Web Components:
- Global navigation
- Table of contents
- Feedback footer
- Share buttons
I suspect I'll create a few more, and that the amount of copying & pasting I'll be doing in future will be greatly decreased!
I am aware that this article is the modern-day equivalent of a slideshow of holiday snaps, but I don't care. I'm pleased with how the gallery and popups look and am glad I went off on a Web Component creation tangent, as it's going to make my website much easy to maintain in the future.
The page requires just 1.1MB of resources to load, although each thumbnail image selected will trigger the load of the full-sized image (≈150KB each). Even so, I'm pleased with the overall page performance.