Blog Tag Case

One our client’s blogs has several tags that start with “AI” (all caps). For example.. “AI Technology” with a capital letter A, I and T.

When filtering the blog by tag, the tag is displayed at the top of the page (template) with only the first letter of the first word capitalized. For example, “AI Technology” is displayed as “Ai technology”. This is less than desirable, especially when an acronym such as AI is used as part of a tag. You’ll see from the screenshot below that the tag filter lists the tag correctly (as it was created) while the page title displays incorrectly (only first letter in caps).

Does anyone know how to solve this and have the tag displayed in the same case it was created?

BTW, setting {text-transform: capitalize} on the title solves the issue with the t in Technology, but not the i in “Ai”.

Hi @BradOliver ,
Checking the screenshot, it does look like the tag has been inputted with the correct capitalisation. I want you to double check how the tag is being inputted in HubSpot by following the steps in this article: https://knowledge.hubspot.com/blog/create-and-manage-blog-tags

If the blog tag itself is using the correct capitalisation, then I suspect it may be an issue with the template you are using as the change seems to occur in the header portion. Check with your developer who designed the blog to see if there is anything that could affecting the capitalisation of the headers in their blog template

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

Thanks @webdew

They are definitely input correctly… I’ve tested this myself by creating new tags with CAPS and they displayed without caps.

Ironically, in this case, the developer is HubSpot. This particular client had HubSpot perform the design services at their initial onboarding process (before our involvement).

I’ve verified the template is using the correct HUBL per the docs, so I’ll reach out to support.

Hi @BradOliver ,
Right on the outset I’m currently thinking it’s probably due to a CSS styling issue that’s overwriting your intended “AI Technology” formatting.
From your earlier message I noticed that previously you have tried something like {text-transform: capitalize}. What this does is to capitalize the first letter of each word in the selected text
Hence, this led you to only seeing Ai Technology.
We can suggest you more by looking at the link.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

That was my first thought as well (that it is CSS related), however, I’ve inspected and the CSS but nothing out of the norm seems to be targeting that element and I am easily able to modify any CSS that does.

Yes, I am familiar with what text-transform: capitalize does, I was only bringing it up to head off anyone else’s suggestion that I try it as it is not a fix for this issue. :slightly_smiling_face:

I filed a support ticket and HS said they acknowledged seeing the issue (on the front-end) and are looking into it. They built it, so I’ll let them try to figure it out.

Just following up so I can close this out. HubSpot support directed me to change the Hubl inside the H1s that inserts the page title.

Old Hubl:

{{ topic|split("-")|join(" ")|capitalize }}

New Hubl:

{{ page_meta.html_title|split(' | ')|last }}

It worked perfectly! What was “Ai technology” is now being displayed correctly as “AI Technology”.