CMS Development

jestlinbaum
Participant

HubL array of values?

SOLVE

I have the following HubL in my template:

{% if (company.industry == 'Marketing and Advertising') %}

<style>
.hero {
    background-image:url("https://cdn2.hubspot.net/hubfs/245191/images/change-agents-role-in-digital-transformation-711802-edited.jpeg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
</style>

{% else %}

<style>
.hero {
    background-image:url("{{widget_data.background_image.src }}");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
</style>

{% endif %}

It works great, changes the hero image if the visitors industry is Marketing and Advertising.

 

I'm wondering the best/cleanest way to code this if I wanted to have the hero image change based on a number of industries.

 

ie: "if any of these industries(maybe 10-15 different industries) , then change the hero image"

 

Thanks in advance! 

 

0 Upvotes
1 Accepted solution
Jsum
Solution
Key Advisor

HubL array of values?

SOLVE

Hey @jestlinbaum,

 

Nice work on this. Just so you know, HubL is processed on the server before the browser gets it's paws on the css, and the HubL is gone by then, so simply wrapping the background attribute of your css in your if statement would clean up your code considerably. Right now you are repeating redundant css.

 

I wouldn't consider myself to be the most design savvy programmer (by far) but I think I can offer a pretty decent suggestion for your situation. 

 

I would create a series of if statments to change the urls in a variable's value:

{% if (company.industry == 'industry 1') %}
    {% banner_bg = "www.mydomain.com/images/img_url_1.jpg" %}
{% elif  (company.industry == 'Industry 2') %}
    {% banner_bg = "www.mydomain.com/images/img_url_2.jpg" %}
{% elif  (company.industry == 'Industry 3') %}
    {% banner_bg = "www.mydomain.com/images/img_url_3.jpg" %}
{% elif  (company.industry == 'Industry 4') %}
    {% banner_bg = "www.mydomain.com/images/img_url_4.jpg" %}
{% elif  (company.industry == 'Industry 5') %}
    {% banner_bg = "www.mydomain.com/images/img_url_5.jpg" %}
{% endif %}

and then your css can be:

<style>
.hero {
    background-image:url({{ banner_bg }});
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
</style>

If you want to make this more dynamic, like having the ability to change the images, per industy, per page you can use Image fields, export their data to the template's context, and set their src values to the banner_bg variable in the appropriate condition:

{% image "Ind_1_bg" label='BG for Industry 1', src='www.mydomain.com/images/img_url_1.jpg', export_to_template_context=True %}
{% image "Ind_2_bg" label='BG for Industry 2', src='www.mydomain.com/images/img_url_2.jpg', export_to_template_context=True %}
{% image "Ind_3_bg" label='BG for Industry 3', src='www.mydomain.com/images/img_url_3.jpg', export_to_template_context=True %}
{% image "Ind_4_bg" label='BG for Industry 4', src='www.mydomain.com/images/img_url_4.jpg', export_to_template_context=True %}
{% image "Ind_5_bg" label='BG for Industry 5', src='www.mydomain.com/images/img_url_5.jpg', export_to_template_context=True %}

{% if (company.industry == 'industry 1') %}
    {% banner_bg = widget_data.Ind_1_bg.src %}
{% elif  (company.industry == 'Industry 2') %}
    {% banner_bg = widget_data.Ind_2_bg.src %}
{% elif  (company.industry == 'Industry 3') %}
    {% banner_bg = widget_data.Ind_3_bg.src %}
{% elif  (company.industry == 'Industry 4') %}
    {% banner_bg = widget_data.Ind_4_bg.src %}
{% elif  (company.industry == 'Industry 5') %}
    {% banner_bg = widget_data.Ind_5_bg.src %}
{% endif %}

<style>
.hero {
    background-image:url({{ banner_bg }});
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
</style>

Set a default value to the image modules in your template, and on the page you have the option to change the images. The src values will assign to the banner_bg variable based on your conditions.

View solution in original post

0 Upvotes
2 Replies 2
Jsum
Solution
Key Advisor

HubL array of values?

SOLVE

Hey @jestlinbaum,

 

Nice work on this. Just so you know, HubL is processed on the server before the browser gets it's paws on the css, and the HubL is gone by then, so simply wrapping the background attribute of your css in your if statement would clean up your code considerably. Right now you are repeating redundant css.

 

I wouldn't consider myself to be the most design savvy programmer (by far) but I think I can offer a pretty decent suggestion for your situation. 

 

I would create a series of if statments to change the urls in a variable's value:

{% if (company.industry == 'industry 1') %}
    {% banner_bg = "www.mydomain.com/images/img_url_1.jpg" %}
{% elif  (company.industry == 'Industry 2') %}
    {% banner_bg = "www.mydomain.com/images/img_url_2.jpg" %}
{% elif  (company.industry == 'Industry 3') %}
    {% banner_bg = "www.mydomain.com/images/img_url_3.jpg" %}
{% elif  (company.industry == 'Industry 4') %}
    {% banner_bg = "www.mydomain.com/images/img_url_4.jpg" %}
{% elif  (company.industry == 'Industry 5') %}
    {% banner_bg = "www.mydomain.com/images/img_url_5.jpg" %}
{% endif %}

and then your css can be:

<style>
.hero {
    background-image:url({{ banner_bg }});
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
</style>

If you want to make this more dynamic, like having the ability to change the images, per industy, per page you can use Image fields, export their data to the template's context, and set their src values to the banner_bg variable in the appropriate condition:

{% image "Ind_1_bg" label='BG for Industry 1', src='www.mydomain.com/images/img_url_1.jpg', export_to_template_context=True %}
{% image "Ind_2_bg" label='BG for Industry 2', src='www.mydomain.com/images/img_url_2.jpg', export_to_template_context=True %}
{% image "Ind_3_bg" label='BG for Industry 3', src='www.mydomain.com/images/img_url_3.jpg', export_to_template_context=True %}
{% image "Ind_4_bg" label='BG for Industry 4', src='www.mydomain.com/images/img_url_4.jpg', export_to_template_context=True %}
{% image "Ind_5_bg" label='BG for Industry 5', src='www.mydomain.com/images/img_url_5.jpg', export_to_template_context=True %}

{% if (company.industry == 'industry 1') %}
    {% banner_bg = widget_data.Ind_1_bg.src %}
{% elif  (company.industry == 'Industry 2') %}
    {% banner_bg = widget_data.Ind_2_bg.src %}
{% elif  (company.industry == 'Industry 3') %}
    {% banner_bg = widget_data.Ind_3_bg.src %}
{% elif  (company.industry == 'Industry 4') %}
    {% banner_bg = widget_data.Ind_4_bg.src %}
{% elif  (company.industry == 'Industry 5') %}
    {% banner_bg = widget_data.Ind_5_bg.src %}
{% endif %}

<style>
.hero {
    background-image:url({{ banner_bg }});
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
</style>

Set a default value to the image modules in your template, and on the page you have the option to change the images. The src values will assign to the banner_bg variable based on your conditions.

0 Upvotes
jestlinbaum
Participant

HubL array of values?

SOLVE

Hey @Jsum,

 

Thank you so much for getting back to me on this! Sorry for the late response, I was out of town for a bit.

 

Your solution is great and I understand about cleaning up the code.

 

Thanks Again! Greatly appreciated!

0 Upvotes