Using Figure and Figcaption to Format Image Cards


#1

Ghost version 2+ has a new user interface for inserting images into your blog. However, in the theme, I was using I found that the formatting of the images and more importantly the formating of the image caption was not what I expected. When viewing a caption in the Ghost Koenig Editor, my captions were centered and in a smaller font. When I viewed the same post in the live site, the captions were left justified and into the standard blog font. Additionally, a lack of spacing after the image created a difficult to read a blog post.

I used the Chrome inspector to determine that the figure and figcaption classes wrap the elements from the image card. I was able to quickly update the formatting of my image cards by adding the following CSS to the SASS file used in the theme I purchased.

/* IMS formating figures */
figure {
	display: inline-block;
	border: 1px  solid gray;
	margin: 20px; 
}
figure img {
	vertical-align: top;
}
figure figcaption {
	border: 1px solid blue;
	text-align: center;
	font-size: 9px;
	font-weight: bold;
}

I hope this post helps others easily format there Ghost 2.X images.

Irv