Image Gallery for Bear Blog
This gallery add-on for the Bearming theme is the first where I felt a separate page was needed. It's also been the hardest to make – a good example of the joy of limitations.
Actually, the gallery add-on itself isn't very complicated. The challenge has been to make it fairly simple for anyone to use, and making it compatible with Markdown. Here's the result (instructions below):
Instructions
The gallery uses an unordered list, and the list is wrapped around a div (a "section") with the class gallery. Example:
<div class="gallery">
* 
* 
* 
</div>
Since the page becomes quite heavy if you have many images in the gallery, I recommend using smaller versions and linking them to the original image. Example:
<div class="gallery">
* [](https:/link-to-photo-1.jpg)
* [](https:/link-to-photo-2.jpg)
* [](https:/link-to-photo-3.jpg)
</div>
Finally, add the following styles to your theme:
/* Gallery */
.gallery ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
grid-gap: 12px;
padding: 20px 0;
list-style: none;
}
.gallery li {
position: relative;
flex-basis: calc(50% - 20px);
}
.gallery img {
width: 100%;
height: 100%;
object-fit: cover;
}
There have been some improvements to the Bear media center in recent days. Hopefully Herman has more in the works. I would love to see thumbnails created automatically and the ability to copy the Markdown code for embedding images, not just the URL.
I hope you find the gallery useful!