I am trying to figure out how to create custom css for our images in the blog. This is tricky because this style will not apply in all uses of the img tag. So for images that run within text, we’d want even margins around, but for images the precede an h2, we’d like the bottom margin to be slightly heavier. I would like to make this easy on the person who manages the blog, and would not want them have to manually apply a style to certain images. Is there any way I can accomplish this–without too much of a hassle? Thank you, Keri
sounds a little tricky, send us a link to your blog so we can try and shoot back some code.
http://blog.lowellschool.org/blog
I am trying to improve an existing workflow and don’t want to make it too difficult for future editors who may not have a lot of coding experience.
Consider using rich text modules to wrap the image in whatever tag you have the text in?
Then you can do something like:
p > img, h2 >img {
margin: 10px;
float: left;
}
h2 > img {
margin-bottom: 20px
}
Your adding these images into the blog content so you can’t use a special module and you want to avoid inline styling your images?
Honestly the image controls in the rich text editor are really useful. You can choose image alignment and margins using a GUI when you click on the image in the rich text editor.
if, for instance, you only need the image above or below to be one way, and the rest of the image to be another, you can add an image module below the blog title which would allow you to add a special wrapper or otherwise treat it separately from the images in the blog content.
Other than those options you will most likely have to use jquery logic to set rules based on where the images appear.
Need help? Hire Us Here
@Jsum That is where I was headed with the solution to this. I am trying to work within an established workflow for a user and don’t want to make things to tricky. Also, I am new to the hubspot framework which seems a bit daunting with the modules, but I like that I have full access to the code.
If I go this route, does this mean I have to develop a new template? How does your suggestion work?
Thank you for your time and advice.
@krasmussen You could add this javascript to your template
$(function(){
$('.post-body').find('h2').each(function(){
if($(this).prev().prop("tagName").toLowerCase() == 'p'){
if($(this).prev().find('img').length){
$(this).prev().find('img').addClass('more-padding-for-image');
}
}
});
});
and then add this CSS to your stylesheet:
.more-padding-for-image{
margin-bottom: 100px;
}
Here’s a screenshot of the result:
If this answer helped, please, mark as solved 
tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.
Drop by and say Hi to me on slack.
Thank you @tjoyce it worked!