Add Image Title Tag to Blog Post Images

[iusmanabbasi]

Hi there,

I am working on a website that has over 400 blog posts. Is there a way to add a Title field to the post's hero/main image via code or something similar in HubSpot? The images are placed inside the "Blog Post" module.

Any help would be appreciated!

[alyssamwilie · Accepted solution]

You don't really need to go through the complexity of using the API to do this. You can just go into the Blog Post module's code in the design manager and add title="{{ content.name }}" to the image tag.

<img src="{{ content.featured_image }}" alt="{{ content.featured_image_alt_text }}" title="(( content.name ))">

[Syeda_Fatima]

Hey @Jaycee_Lewis, Thanks for tagging me here.

And yes, i have a suggestion on this concern and would love to share it with @iusmanabbasi 

Hey @iusmanabbasi, Yes, you can add a title field to the post's hero/main image via code. You can use the HubSpot CMS Hub API to add a custom field to the blog post module.

The custom field should be of type "title" and should have an associated value.

Once you have added the custom field, you can use the HubSpot CMS Hub API to fetch the post's hero/main image, along with its title, from the blog post module.

Hope this helps! 🙂

[iusmanabbasi]

Thanks, @Syeda_Fatima!

So, by using HubSpot CMS Hub API, I can access the blog posts image and title, and then use this information to add the missing "title" attribute to the "img" tag in HTML of "Blog Content" module? E.g:
Before:
<img src="https://f.hubspotusercontent20.net/......." alt="ABC">

After:
<img src="https://f.hubspotusercontent20.net/......." alt="ABC" title="((Title of the Blog))">

Apologies if I wasn't this clear before.

[Syeda_Fatima]

Hey @iusmanabbasi, Yes, this can be done by using the HubSpot CMS Hub API.

You can use the API to access the blog posts image and title, and then use this information to add the missing "title" attribute to the "img" tag in the HTML of the "Blog Content" module.

In order to do this, you will need to make a GET request to the HubSpot CMS Hub API, passing in the blog post’s ID as a parameter. This will return the metadata of the blog post, including the title and the image URL. You can then use this data to add the title attribute and populate it with the blog post title.

Here is an example of a request to the HubSpot CMS Hub API that you can use to retrieve the blog post data (replace YOUR_BLOG_POST_ID with the ID of the blog post):

GET https://api.hubapi.com/content/api/v2/blog-posts/YOUR_BLOG_POST_ID

You can find more information about the HubSpot CMS Hub API from this suggested doc: https://developers.hubspot.com/docs/cms/features/cms-apis

I hope this helps!

[Jaycee_Lewis]

Hi, @iusmanabbasi 👋 Thanks for reaching out! Are you wanting to batch this? Or are you needing another approach? 

Hey, @Anton @Syeda_Fatima do you have any thoughts here? 

Best,

Jaycee