HubL in Head (og:image tag)

[gtwright]

I'd like to specify an image in an og:meta tag, by using a HubL variable to reference an image in a custom module already on the page. Has anyone done that successfully?

[relabidin · Accepted solution]

Hi @gtwright,

Please check out our documentation on HubL Variables: http://designers.hubspot.com/docs/hubl/hubl-variables-and-macros-syntax

You should be able to create a HubL variable that stores the URL of the image in your custom module as a string, that will get printed into the og:meta tag. I also encourage you to check out the list of HubL supported default variables: http://designers.hubspot.com/docs/hubl/hubl-supported-variables 

If the image you want to use is the featured image for a blog post, for example, there already exists a variable for that.

Rami

HubSpot Support

[ndwilliams3 · Accepted solution]

Yes, I have used HUBL in the head section  to create a toggle for hiding pages from search.

You have to use export_to_template_context=True on modules in the header. Also, you can't call variables defined in the page template in the header. Everything has to go in the header.

{% boolean "robots_toggle" label='Hide from Search', value=False, no_wrapper=True, export_to_template_context=True %}

{% if widget_data.robots_toggle.value == true %}
<!-- hide from search toggle -->
<meta name="robots" content="noindex, nofollow"/>
{% else %}
<!-- show in search toggle -->
{% endif %}

[ndwilliams3 · Accepted solution]

Yes, I have used HUBL in the head section  to create a toggle for hiding pages from search.

You have to use export_to_template_context=True on modules in the header. Also, you can't call variables defined in the page template in the header. Everything has to go in the header.

{% boolean "robots_toggle" label='Hide from Search', value=False, no_wrapper=True, export_to_template_context=True %}

{% if widget_data.robots_toggle.value == true %}
<!-- hide from search toggle -->
<meta name="robots" content="noindex, nofollow"/>
{% else %}
<!-- show in search toggle -->
{% endif %}

[ndwilliams3 · Accepted solution]

Here's an example markup for your purpose.

{% image_src "og_image" src='', no_wrapper=True, export_to_template_context=True %}

{% if widget_data.og_image.src %}
<!-- og:image -->
<meta property="og:image" content="{{ widget_data.og_image.src }}" />
{% else %}
<!-- no og:image -->
{% endif %}  

[relabidin · Accepted solution]

Hi @gtwright,

Please check out our documentation on HubL Variables: http://designers.hubspot.com/docs/hubl/hubl-variables-and-macros-syntax

You should be able to create a HubL variable that stores the URL of the image in your custom module as a string, that will get printed into the og:meta tag. I also encourage you to check out the list of HubL supported default variables: http://designers.hubspot.com/docs/hubl/hubl-supported-variables 

If the image you want to use is the featured image for a blog post, for example, there already exists a variable for that.

Rami

HubSpot Support