We are currently in the process of setting up a Blog/RSS email template using the drag-and-drop editor. The featured images are not all guaranteed to be the same size, is it possible to set a maximum width/height on the featured image so that the user is given a consistent experience?
Hi @RAnderson91, I hope that you are well!
Great question, thanks for asking the HubSpot Community!
I can see on this article “Use images in HubSpot content” that to set the a limit on the image’s size, you can click the Maximum size dropdown menu and select an option:. The image will never appear larger than its original size.
That said, I have never tested it for featured images on blog posts.
I’d love to put you in touch with our Top Experts: Hi @jonchim, @Stephanie-OG and @Anton do you have other tips to share with @RAnderson91, please?
Have a wonderful day and thanks so much in advance for your help!
Bérangère, HubSpot Community Manager
Hey @RAnderson91,
it’s gonna be a bit difficult, as your only option is to do something like this
(wrapping the image in a div with inline-styling)
But this might lead to undesired display behaviour on mobile because you can’t add media queries as they’ll be striped by most email clients outside of the <head>-tag…
For height - I’d test it with
height:auto;
Reason for this:
As your images might not have the same size (and therefore not the same aspect-ratio), it would might lead to streched images if you set the width&height to a certain size.
If you change the layout to a vertical one, the responsiveness topic would be much easier to handle.
best,
Anton
hey @RAnderson91,
I would try what Anton suggested, but also if you know there’s an average height for all the images i would set the height close to that and use object-fit and position. You can set a media query to adjust height on different devices if needed as well.
<img src="{{ post.featured_image }}" style="width: 100%; height: 550px; object-fit: cover; object-position: center;">