• Tweet

There is no easy way of adding captions to images in Hubspot. The blogging platform that Hubspot offers is very, very basic targeting novices as well as those folks who don’t need all the bells and  whistles.

But, for those who do want to add a caption to their images in Hubspot here’s a way you can do it. It’s a manual styling that you have to add every time you add an image, if it has a caption.

We’ll setup “caption” CSS class to handle the styling, then I’ll show you how do add it in the blog editor.

CSS Class

STEP 1: Log in to your Hubspot dashboard. The top navigation bar has a link “Settings”, it’s located underneath “Community”.

STEP 2: Once on the “Settings” page, scroll down about half way and find “File Manager”, click on it.

STEP 3: On the left side under “Browsing”, locate file called “custom.css” and double click on it. This will open the file editing window right next to it.

CAUTION: Changing anything already in there will affect your website. So DO NOT change anything, unless you know what you’re doing.

STEP 4: Scroll all the way down, so we can add a new CSS class.

STEP 5: Copy and paste the following snippet at the bottom.

.caption-right{
margin-left: 15px;
font-style: italic;
font-size: 11px;
border-bottom: 1px solid #ccc;
display: block;
width: auto;
}
.caption-left{
margin-right: 15px;
font-style: italic;
font-size: 11px;
border-bottom: 1px solid #ccc;
display: block;
width: auto;
}

NOTE: The margin-left depends on your image padding, to make sure caption is aligned properly with the image and border.

You can style your caption any way you like it. I’ve made it smaller, italicized, and add a grey bottom border. Display and width is necessary ONLY if you have a border. No border, you won’t need it.

There are two similar snippets for two different uses.

If you want to place your image on the right (text on the left), then use “caption-right”.
If you want to place your image on the left (text on the right), then use “caption-left”.

STEP 6: Hit “Save & Close” located at the top of the editing window.

STEP 7: Go back to your blog post.

Adding image caption

The next set of steps are necessary every time you want to add a caption to the image. I tried to make it as easy as possible.

To edit HTML of your blog post, click on HTML button next to the ABC spell check button.

This is what the complete code snippet with caption looks like:

Image on the right

<div style="float: right;"><img id="img-111111" class="alignRight" style="float: right;" src="/Portals/111111/images/partner_with_uh.jpg" alt="describe the image" border="0" />
<span class="caption-right">Caption goes here</span></div>

Image on the left

<div style="float: left;"><img id="img-111111" class="alignLeft" style="float: left;" src="/Portals/111111/images/partner_with_uh.jpg" alt="describe the image" border="0" />
<span class="caption-left">Caption goes here</span></div>

Follow these steps to get it done.

STEP 1: Insert an image into your blog post and align it left or right inside Hubspot’s image manager.

STEP 2: Click HTML button to view code, here’s what it will look like:

<img id="img-1111111" class="alignLeft" style="float: left;" src="/Portals/111111/images/image.jpg" alt="describe the image" border="0" />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in ante. Sed posuere ligula rhoncus erat. Fusce urna dui, sollicitudin ac, pulvinar quis, tincidunt et, risus. Quisque a nunc eget nibh interdum fringilla. Fusce dapibus odio in est. Nunc egestas mauris ac leo. Nullam orci.

STEP 3: Add the following code, which adds a caption, after the image code. This is the time when you can add your caption too.

<span class="caption-left">Caption goes here</span>

STEP 4: Make sure your class is the same as your image alignment, either “caption-right” or “caption-left”.

STEP 5: Add a DIV around the image and caption. First part goes before the image code:

<div style="float: left;">

The second part goes right after caption code:

</div>

STEP 6: Click “Update”, then “Save Draft”, then “Preview”.

If everything worked out the way it should, your image will have a good, styled caption below it. If something is not working out, make sure you followed the steps and the code is correct.

I tried to make it as easy as possible to implement, that even newbies can do it. I’m not a coder, there might be a better way of doing it. But it’s a way, an easy way to do it. I hope it helps you out!

Can’t figure it out OR it doesn’t work? Leave a comment, I will be more than happy to help!