"POLAROID"-STYLE IMAGE CAPTIONS
Hopping on the image caption train. 🚂
Last night, I read a few posts from my favorite Bear Bloggers about image captions and want to join the convo! However, I've made a strict rule to not blog around bedtime. So, good afternoon! I'll try to make this post as clear as possible.
This is in reply to Vince's original image caption post. I had done a quick google search and came across Avaruuso's post on creating a simple image gallery for Bear Blog. I used his CSS code as the base for mine.
The key takeaways were:
- Creating a div class called
gallery-postand adding it to theclass_nameof each post. - Triggering the photo caption by inserting media within a list by using a hyphen.
CSS styling
I love playing around with CSS. Initially, I wanted to create a caption banner below the image, kind of like those embossed Dymo labels.
This image is from the Wikipedia page on embossing tapes.
However, I couldn't figure it out! After some time, I ended up with a happy accident:
The "Polaroid" frame! ʕ◕ᴥ◕ʔ
I liked this better than the original idea.
The code:
/* Polaroid-style gallery */
.gallery-post li:has(img) {
list-style-type: none;
text-align: center;
font-family: var(--font-main);
color: #ffffff;
display: inline-block;
background-color: #000000;
font-size: 12pt;
font-weight: 400;
padding: 10px;
width:85%;
margin-bottom:1em;
}
.gallery-post li img {
max-width: 100%;
}
What still needs work
✘ Links
I could make the background color white, but I like the contrast of the black background and it fits the look of my site. I tried overriding the link color using html, but that didn't work.
✘ Centering the image
Since the image is nested within a list, I can't get the image to be centered within the page. I settled on the max width being 85% because it looks more or less centered across web, tablet, and mobile. Setting it at 100% somehow made the image not sit right within the frame.
Special mentions
- I love the elegant design of Becky's image captions.
- Vince linked departure.blog and that was the second Bear blog I had ever viewed where it made my eyes pop out awooga style and inspired me to go all-in with my blog.
I feel like I can finally update my CV from "Familiar with CSS/HTML" to "Good-working knowledge" and use this site as proof! But I still have a long way to go to finally grasp what I am doing. It's all trial and error for me, which is also half of the fun!
Anyway, in writing this post, I also ended up updating the CSS style for my code block because I didn't like how it looked.