topic Re: Blog Post Templates - Featured Image tags and configuración in CMS Development

Blog Post Templates - Featured Image tags and configuración

DEsteva — Thu, 18 Jan 2024 19:23:05 GMT

Hello guys! 👋.

I created a Blog Post template for my website and i'm getting as the principal image of the article with this HubL value "{{ content.featured_image }}" over the next <div>

<div class="blog-post__meta"> <a href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}" rel="author"> {{ content.blog_post_author.display_name }} </a> <time datetime="{{ content.publish_date }}" class="blog-post__timestamp"> {{ content.publish_date_localized }} </time> </div>

You can see it like this on the blog post:

The url is the next one: https://driv.in/en/blog/fleet-management-uses-advantages/

Anyway, i'm getting the next observation on the hubspot from the Featured Image signation over the blog post. "Your image may not work..."

I tryed to optimized on multiple ways, but anyone has solved this issue or knows if there's any values to assign the title image of a blog post, i've looking on the documentation but i couldnt find anything.

Cheers!

Re: Blog Post Templates - Featured Image tags and configuración

Anton — Thu, 18 Jan 2024 21:53:16 GMT

Hi @DEsteva,

looking at the image it's 1366 x 515 pixels big.

The reason you get this info is that most social networks have a ratio of 1,91:1(some got 1,7:1) for shared images and yours is bigger. Therefore HubSpot informs you that some areas of the featured image will be cut of if somebody shares the post on social networks.

Here's a visualization of the cutted areas:
red: side ratio 2:1
blue: side ratio 1,91:1
green: side ratio: 1,7:1

My recommendation: Try to resize the image to 1366 x 683 pixels. This will display the image without resizing in your blog and will work for social media since it will have a side ratio of 2:1.

best,

Anton

Re: Blog Post Templates - Featured Image tags and configuración

DEsteva — Fri, 19 Jan 2024 19:27:31 GMT

Hello Anton! Thanks for your response!

That's perfect. I'm going to try that and i'll let you know.