entry for image one. yap about something here.
i made this page while test driving adding a filter system to my crafts page, which i thought with a little tweaking could be shared as a media log template. so each image could be a image-gallery, game, movie, etc. and the popup could have a review. then the tags could be the genre and/or the year you finished it.
or you could have the gallery be thumbnails of your art and the popup could have a bigger version with a description, tagged with the character, medium, or theme.
or a gallery of your photography, with your memories of the time you took it in the popup, tagged by location.
etc, etc, etc.

entry for image two goes here.

the gallery is designed to display images in a grid, where the width and height of each image is the same and set by the css variables --image-width and --image-height.

you don’t need to use images of the same size or aspect ratio, object-fit: cover will take care of that.

even though i didn’t design for it, you can set --image-height to auto if you don’t want each image to have the same dimensions. weird things may happen though and manually tweaking the rest of the code may be necessary.

Photo by Golden Antelope on Unsplash

entry for image three goes here.

the buttons to filter the gallery are inside <form>. if you don’t want the tagging system, simply

• delete the <form> element
• delete the css styling for form
  • this includes the area with form:has([name=...
  • remember to delete the bit inside of @media (prefers-color-scheme: dark) {} too
• remove the category attributes from the <section> elements

to remove the popups

• delete the line that starts with <input class="modal-toggle"
• delete the line that starts with <label class="modal-open", then delete its closing tag (before <dialog>)
• delete the entire <dialog> element inside of <section>
• delete css that starts with .modal
• delete the javascript

Photo by Hanna Lazar on Unsplash

entry for image four goes here.

each image and its popup are inside of a <section> in the <div id="image-grid-container"> element. each <section> must have a unique modal-entry-{entry}. this is how the page knows which popup to open when you click on a given image.

this modal-entry-{entry} is used in three places for every <section>:

• the id of the <input>
• the for attribute of the <label> that wraps the image
• the for attribute of the <label> that wraps the page behind the popup when it is open

Photo by Theo Topolevsky on Unsplash

entry for image five goes here.

furthermore, each <section> should have a category attribute. this is the tagging system. the gallery will still work even if a <section> is missing it, that photo just won’t be selected by any tag.

the category attribute can take as many values as you want it to, just put a space between each tag. obviously this means your tags can’t have a space in them, but you can always put a space in the <label> element that shows your tag name.

every time you use a new tag in your gallery, you must do the following:

• in the html, search for <form> and add a new <label><input type="checkbox" name="tag">#tag</label> inside of it, replacing tag with your new tag. this adds a new button at the top of your page.
• in the css, search for form:has([name. add a new form:has([name="tag"]:checked)~#image-grid-container section:not([category~="tag"]) but replace tag with your new tag. this is how clicking a button closes <section>s that don’t have the corresponding tag. if you forget this, the button you added in the last step won’t do anything.

Photo by billow926 on Unsplash

entry for image six goes here.
if you’re a lazy person like me and don’t want to copy and paste new <section> elements for each image then manually update every modal-entry-{entry} and on top of that try to remember to update form every time you add a new category, you can use a static site generator like 11ty to automatically generate the page from a json file or folder of markdown files. i have a tutorial explaining how to do so from a json file here, it should be easy enough to follow even if you have no idea what json is.
this page was generated from markdown files, where the content of each popup is the body of the file, and its associated data (category values, caption, image, and image alt text) are stored in the yaml front matter. i don’t currently have a tutorial on that, but you can take a look at this page’s source code to see how it works (or just straight up use it as a template). i also have a note explaining how one can work with external markdown files in 11ty here. the “collections” header has the relevant information. the filter i use to get all values of categories used in a collection, sorting them and returning the number of occurences can be seen here. this is used to automatically build the tagging system.
Photo by Fabian Bächli on Unsplash

entry for image seven goes here.
if you change the width of the images, the page padding, the gap, or the max number of images per row, search for @media screen and adjust the max-widths. this section controls break points to make your gallery center on the screen. i have notes explaining what this section does in the code comments in more detail and how to calculate breakpoints precisely.
or just set --image-justify to center. then images will be centered on the page no matter what. or if you don’t care about the getting the images to center, you can delete these media queries (although i recommend keeping the last one for the case of a single column).
even if you leave it how it is however it should still be responsive and mobile friendly.
Photo by Duc Van on Unsplash

entry for image eight goes here.
even though i said that this gallery is javascript free, it’s more like it doesn’t rely on javascript to work. a small bit of javascript is used to allow one to select an image and open its modal with the enter key, and to close the modals by hitting the escape key.
the page is still useable even if javascript is disabled however. you can try this by opening up dev tools and disabling javascript.
eventually i plan to see if i can implement command and commandfor with the <dialog> element to simplify the html/css and remove the javascript entirely while increasing keyboard accessibility once firefox supports it.
Photo by K.T. Francis on Unsplash

entry for image nine goes here.
i’ve left comments in the code to explain what’s going on, what needs to be changed and what you’d be most likely to want to tweak, so you can edit the code more easily. i also use css variables to make it easier to adjust things out of the box.
i have only added styling related specifically to the gallery and modals to make it easier to copy and paste the code onto an existing page of yours, or to import your own site’s styling.
if you want to copy this into an existing page of yours, i highly recommend copying the <main> element in its entirety, renaming it to <div id="gallery"> or something if you already have a <main> element. this is because the code that filters the images relies on the sibling selector; <form> and <div id="image-grid-container"> must be siblings with <form> coming first. if you don’t know what that means keeping them in the same container then not adding new elements to it would be the simplest way of keeping everything working.
Photo by Markus Winkler on Unsplash

this theme is shared under the unlicense.
i love to share what resources i’ve found helpful here on my site. if you feel the same way, if you use this theme consider crediting me or linking back to my site so it might help someone else too.
Photo by Hưng Phạm on Unsplash