Blog template: Having a different h1 and page title

SOLVE
Highlighted
New Contributor | Diamond Partner
New Contributor | Diamond Partner

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

Accepted Solutions
Highlighted
HubSpot Employee

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

3 Replies 3
Highlighted
HubSpot Employee

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

Highlighted
New Contributor | Diamond Partner
New Contributor | Diamond Partner

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

Reply
0 Upvotes
Highlighted
HubSpot Product Team

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!

Reply
0 Upvotes