CMS Development

Mia
Participant | Diamond Partner
Participant | Diamond Partner

Blog template: Having a different h1 and page title

SOLVE

By default, the title shown on a blog detail template between h1 tags, would be coming from the content.name variable and thus be the same as the name of the blog (and page title). We wanted our h1 title to be different than the page title, so to solve this, we added a custom HubL text field in our template and rendered this between the h1 tags.

 

The only problem we are facing now, is achieving the same effect in the blog listing template since we can't render the same HuBL text field we used in the blog detail template for each blog (you can't access it by using content.custom_title_hubl_field for example).

 

Is there any solution for this? Thanks in advance!

1 Accepted solution
JasonRosa
Solution
HubSpot Employee
HubSpot Employee

Blog template: Having a different h1 and page title

SOLVE

@Mia you should be able to render your text module's value on your listing page by exporting the header value to the template (more information on this here: http://designers.hubspot.com/docs/hubl/export-to-template-context). So in your post HTML it would look like this: 

 

{% text "blogheader" label="Blog Post Header", no_wrapper=True, export_to_template_context=True %}

 

<h1>{{ widget_data.blogheader.value }}</h1>

 

And then in your listing template it would look like this: 

 

<h2><a href="{{content.absolute_url}}">{{ content.widgets.blogheader.body.value }}</a></h2>

 

You can obviously switch out the modules name if you'd like to as well. Let me know if you have any questions about doing this on your own! 

View solution in original post

3 Replies 3
tilly
HubSpot Product Team
HubSpot Product Team

Blog template: Having a different h1 and page title

SOLVE

See this ideaThe ability to set a different H1 from <title> tag in blog posts is now in beta. 

 

If you are interested in joining this beta and have not already reached out to me, please send me a message with your Hub ID and I will add you to the beta. Feedback is welcome!

JasonRosa
Solution
HubSpot Employee
HubSpot Employee

Blog template: Having a different h1 and page title

SOLVE

@Mia you should be able to render your text module's value on your listing page by exporting the header value to the template (more information on this here: http://designers.hubspot.com/docs/hubl/export-to-template-context). So in your post HTML it would look like this: 

 

{% text "blogheader" label="Blog Post Header", no_wrapper=True, export_to_template_context=True %}

 

<h1>{{ widget_data.blogheader.value }}</h1>

 

And then in your listing template it would look like this: 

 

<h2><a href="{{content.absolute_url}}">{{ content.widgets.blogheader.body.value }}</a></h2>

 

You can obviously switch out the modules name if you'd like to as well. Let me know if you have any questions about doing this on your own! 

Mia
Participant | Diamond Partner
Participant | Diamond Partner

Blog template: Having a different h1 and page title

SOLVE

That was indeed the solution, you're a hero. Thanks!

0 Upvotes