Resized Featured Images to match blog post listing size

[MiaPV]

Hello! I'm having an issue figuring out how to get our featured images on the blog author listing pages to automatically resize to 350x350 like they do when we add the first (hero-ish) image to our blog post. I'm sure this is a CSS thing??

As a side note, I'm confused about featured images, because I would assume when you set a featured image, that would be the one that shows up with the link on a search result on our site, or post to social, but that isn't what's happening at all. If you look at the second result here for our pilling article, the image that shows up is not the one we have selected as the featured photo, which should be the first image in this article.

Thanks in advance!

[roisinkirby]

How can I change the size of the featured image in my HubSpot blog?

The size of your blog's featured images is set universally and cannot be changed by default. However, if you are comfortable working with CSS, you can set the size of your featured images within the stylesheet for your blog. Please note: if you are not familiar with CSS, please work with a website designer to make this change. You can find design partners here. 

• First, ensure that the featured image setting is enabled by following the instructions here.
• In your HubSpot Marketing account, navigate to Content > Design Manager.
• Locate and click on the name of the stylesheet used in your blog. You can see where stylesheets can be applied at the template and domain levels in this article. Blog-specific stylesheets may also be applied, as shown here. 
• Add the following code to the stylesheet attached to your blog, replacing WIDTHPERCENTAGE with the desired width percentage. It's recommended, for organizational purposes, that you add this to the section of your stylesheet where other blog-specific styles appear. The image width is a percentage of the post's width and the height is set to be auto to the width.

.hs-featured-image {
width: WIDTHPERCENTAGE%;
}

• If the above code does not have the desired result, please try replacing .hs-featured-image with .hs-featured-image-wrapper.

How to specify a featured image in a blog:

You can specify a featured image from your blog post (anywhere in the post's content) to be used as a thumbnail when sharing your post on social media. The featured image can also be used on your blog listing page.

To enable the featured image option for your blog listing page:

• In your HubSpot Marketing Basic, Professional, or Enterprise account, navigate to Content > Content Settings.
• In the left sidebar menu, navigate to Marketing > Blog.
• Click the Templates tab, then check Use featured image in listing summaries.

• Click Save at the bottom left.

To select a featured image for your blog post to appear in your listing page and on social media:

• Navigate to Content > Blog. 
• Hover over a blog post and click Edit.
• Click the Settings tab at the top of the editor.
• Ensure that the Enabled featured image toggle in the Featured image section is turned ON (this will be turned on by default).
• Click Browse images to open a sidebar menu where you can select a previously uploaded image as your featured image. Alternatively, click Upload to upload an image from your computer to HubSpot to use as the featured image. 

Please note: there are two scenarios to be aware of when using featured images:

1. If an image appears in your blog post before the Read more tag and the Featured image setting is enabled, HubSpot will automatically assign that image as the post's featured image.
2. If an image appears in your blog post after the Read more tag and the Featured image setting is enabled, it will be moved to the upper right of the blog listing summary text that appears on your blog listing page as the post's featured image.

If the image you are setting is not rendering correctly on your live website, after publishing changes, then I would reccommend contacting HubSpot support to troubleshoot further.