Resized Featured Images to match blog post listing size
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.
Resized Featured Images to match blog post listing size
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 instructionshere.
In your HubSpotMarketingaccount, navigate toContent >Design Manager.
Locate and click on thenameof the stylesheet used in your blog. You can see where stylesheets can be applied at the template and domain levels inthis article. Blog-specific stylesheets may also be applied, as shownhere.
Add the following code to the stylesheet attached to your blog, replacingWIDTHPERCENTAGEwith 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-imagewith .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 HubSpotMarketingBasic, Professional, or Enterprise account, navigate toContent>Content Settings.
In the left sidebar menu, navigate toMarketing > Blog.
Click the Templatestab, then checkUse 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 clickEdit.
Click theSettingstab at the top of the editor.
Ensure that theEnabled featured imagetoggle in the Featured imagesection is turned ON(this will be turned on by default).
ClickBrowse imagesto open a sidebar menu where you can select a previously uploaded image as your featured image. Alternatively, clickUploadto 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:
If an image appears in your blog postbeforetheRead moretag and theFeatured imagesetting is enabled, HubSpot will automatically assign that image as the post's featured image.
If an image appears in your blog post aftertheRead moretagand theFeatured 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.