Super Simple Bear Blog Image Gallery
Bear Blog has minimal media library functionality, but lacks native support for image galleries. My WordPress.com blog has many galleries which I need to import. While should be possible to embed a third party gallery JavaScript or embed, I want to keep things simple and try a Markdown based solutions first.
Initially, I considered adapting Robert Birming’s gallery. It requires adding extra div tags to the post, and I wanted a solution with less overhead when creating posts. With the class_name post property and :has() pseudo class I could achieve desired behaviour with no HTML tags.
The following CSS implements styles for a stacked gallery with centred images and captions. This is a minimal example and further styling can be added if desired. For my blog, I also changed the font and decreased the text size.
.gallery-post li:has(img) {
list-style-type: none;
text-align: center;
margin-bottom: 1em;
}
.gallery-post li img {
max-width: 80%;
}
The gallery style applies when the post has gallery-post class and a list containing images.
class_name: gallery-post
___
-  \
First image caption
-  \
Second image caption
To avoid a making the page too heavy, use thumbnails for large images.
[](https://example.com/image3.jpg)
To see the gallery in action, check out the post Journey Through Middle Earth I.