CMS Development

andre9000
Contributor

Display template content conditionally

SOLVE

This is probably an easy one, but I can not figure it out how to hide an element if it has no value:

 

<h1>{% text "h1" label='Enter H1', value='This is the H1' %}</h1>  

<style>
{% if "h1" is none or "h1" == "" %}
  h1 {
    display: none;
  }  
{% endif %}
</style>

This doesn't work, H1 never gets "display: none;". 

 

If I try 

{% if h1 is none or h1 == "" %}

instead (no "" around the name), it will hide H1 even if it has a value.

1 Accepted solution
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Display template content conditionally

SOLVE

@Hello @andre9000 - Your HUBL tags are going to be in a dictionary, so you would inspect the data cominng from your tag by accessing "widget_data". You should combine this with the "export_to_template_context" tag attribute as well.

Shorthand:

{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{{'<h1>'+widget_data.h1.value+'</h1>' if widget_data.h1.value != ""}}

Or, longhand:

{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{% if widget_data.h1.value != '' %}
  <h1>{{widget_data.h1.value}}</h1>
{% endif %}

If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

View solution in original post

3 Replies 3
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Display template content conditionally

SOLVE

@Hello @andre9000 - Your HUBL tags are going to be in a dictionary, so you would inspect the data cominng from your tag by accessing "widget_data". You should combine this with the "export_to_template_context" tag attribute as well.

Shorthand:

{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{{'<h1>'+widget_data.h1.value+'</h1>' if widget_data.h1.value != ""}}

Or, longhand:

{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{% if widget_data.h1.value != '' %}
  <h1>{{widget_data.h1.value}}</h1>
{% endif %}

If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

andre9000
Contributor

Display template content conditionally

SOLVE

Awesome, works perfectly. Thank you, good to know!

andre9000
Contributor

Display template content conditionally

SOLVE

a nicer approach of course would be no wrap the element itself in a condition, so it doesn't get into the markup if it's empty. However, this doesn't seem to work, because then it is not possible to set a value for h1 anymore.

0 Upvotes