Gallery 2020 - MK I

Note: This work has been a journey. I went from this model, to a model less reliant on magic numbers, to a change using srcset then back to two images, but lazy loading for bandwidth preservation. Phew.

I've removed comments from my blog as they weren't getting used and it was one more external JS I could remove. There are other ways for people to interact with my posts now, and slowly I'll get better at it. The reduce-JS bug bit me in an awkward place as I thought my JS-powered gallery is a bit naff, so why not CSS it?

I was inspired by a post I have unfortunely lost where someone used :focus to link thumbnails to following images and show/ hide the following image based on that. I toyed with that and rememberd some other work using radio inputs, settled on using radios. The following is the CSS, with an HTML snippet. Gimme all the pointers.

 1/** 2020-05-04: New gallery */
 2:root {
 3    --gallery-height: 700px;
 4    --gallery-thumbnail-height: 100px;
 5}
 6.gallery-2020 {
 7    position: relative;
 8    width: 100%;
 9    text-align: center;
10}
11.gallery-2020 label {
12    margin-right: -2ex;
13}
14.gallery-2020 input {
15    visibility: hidden;
16    transform: scaleX(0.00001);
17    font-size: 0.1px;
18    margin: 0;
19}
20.gallery-2020 input:checked {
21    margin-bottom: calc(var(--gallery-height) - var(--gallery-thumbnail-height));
22}
23.gallery-2020 img.thumbnail {
24    max-width: var(--gallery-thumbnail-height);
25    max-height: var(--gallery-thumbnail-height);
26}
27.gallery-2020 a.gallery-image {
28    display: none;
29    padding: 0 auto;
30}
31.gallery-2020 .thumbnail-radio:checked + a.gallery-image {
32    display: flex;
33    position: absolute;
34    top: var(--gallery-thumbnail-height);
35    left: 0;
36    clear:both;
37    align-items: center;
38    flex-direction: column;
39    height: calc(var(--gallery-height) - var(--gallery-thumbnail-height) - 1.5em);
40}
41.gallery-2020 a {
42    text-align:center;
43    width: 100%;
44}
45.gallery-2020 a em {
46    display: block;
47    text-align: center;
48}
49.gallery-2020 * a img {
50    object-fit: contain;
51    width: 100%;
52    height: calc(100% - 2em);
53    margin-top: 1px;
54    display: block;
55}
56.gallery-2020 * a img + em {
57    position: absolute;
58    bottom: 0;
59    width: 100%;
60    text-align: center;
61}

 1<div class="gallery-2020">
 2    <label>
 3        <img class="thumbnail" src="[thumbnail]"
 4            alt="[caption]" />
 5        <input
 6            type="radio"
 7            name="gallery-2020-[gallery#]"
 8            value="Y"
 9            class="thumbnail-radio"/>
10        <a class="gallery-image" href="[full image]">
11            <img src="[big image]"
12                alt="[caption]" /> <em>[caption]</em>
13        </a>
14    </label>
15    <label>
16        <img class="thumbnail" src="[thumbnail]"
17            alt="[caption]" />
18        <input
19            type="radio"
20            name="gallery-2020-[gallery#]"
21            value="Y"
22            class="thumbnail-radio" />
23        <a class="gallery-image" href="[full image]">
24            <img src="[big image]"
25                alt="[caption]" /> <em>[caption]</em>
26        </a>
27    </label>
28    ...
29</div>

Example: