topic Re: Add Image Title Tag to Blog Post Images in CMS Development

Add Image Title Tag to Blog Post Images

iusmanabbasi — Thu, 12 Jan 2023 07:26:52 GMT

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!

Re: Add Image Title Tag to Blog Post Images

Jaycee_Lewis — Thu, 12 Jan 2023 22:21:58 GMT

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

Re: Add Image Title Tag to Blog Post Images

Syeda_Fatima — Fri, 13 Jan 2023 10:13:21 GMT

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! 🙂

Re: Add Image Title Tag to Blog Post Images

iusmanabbasi — Fri, 13 Jan 2023 11:50:07 GMT

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.

Re: Add Image Title Tag to Blog Post Images

Syeda_Fatima — Fri, 13 Jan 2023 12:47:02 GMT

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!

Re: Add Image Title Tag to Blog Post Images

alyssamwilie — Sun, 15 Jan 2023 05:54:27 GMT

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.