CMS Development

jestlinbaum
Participant

Change background image based on a contact's industry?

SOLVE

 

I have the following bit of code for a hero image in my template:

 

 

{% image "background_image" label='Select a background image', export_to_template_context=True %}
<style>
.hero { background-image:url("{{widget_data.background_image.src }}"); 
background-repeat: no-repeat; 
background-position: center center; 
background-size: cover; 
} 
</style>

 

I'm wondering if there is a way to make the background image different based on a contact's (company's) Industry.


Is there a way to us HubL if statements for a company's industry?

Basically something like:

 

 

If a company's industry is LOGISTICS,
<style>
.hero {
background: a custom image for logistics companies;
}
</style>
else
<style> 
.hero { 
background-image:url("{{widget_data.background_image.src }}"); 
</style>

 

Any help is greatly appreciated.

 

Thank you very much!

0 Upvotes
1 Accepted solution
DaniellePeters
Solution
Top Contributor

Change background image based on a contact's industry?

SOLVE

You have the right idea! You can pretty much do exactly that if statement. Formatted with HubL, It would look something like this:

{% if company.industry == "Logistics" %}
<style>
.hero {
background: a custom image for logistics companies;
}
</style>
{% else %}
<style> 
.hero { 
background-image:url("{{widget_data.background_image.src }}"); 
</style>
{% endif %}

 

I'd recommend checking out this doc on HubL if statements.

http://designers.hubspot.com/docs/hubl/if-statements

 

View solution in original post

2 Replies 2
DaniellePeters
Solution
Top Contributor

Change background image based on a contact's industry?

SOLVE

You have the right idea! You can pretty much do exactly that if statement. Formatted with HubL, It would look something like this:

{% if company.industry == "Logistics" %}
<style>
.hero {
background: a custom image for logistics companies;
}
</style>
{% else %}
<style> 
.hero { 
background-image:url("{{widget_data.background_image.src }}"); 
</style>
{% endif %}

 

I'd recommend checking out this doc on HubL if statements.

http://designers.hubspot.com/docs/hubl/if-statements

 

jestlinbaum
Participant

Change background image based on a contact's industry?

SOLVE

@DaniellePeters

Thank you for the reply! I was very close. I'm familiar with the if/else markup but did not see "company.bla" listed as an option under General Supported Variables. I was trying "account.industry"

 

Thank you so much for clarifying that for me! Seems to be working.

 

Greatly appreciated!

 

0 Upvotes