Trouble with HubL If statement not working

SOLVE
Occasional Contributor

Hi!

 

I am trying to offer 4 colors of background for the text in columns in this email template: https://app.hubspot.com/design-previewer/246039/templates/7874717337

 

The columns are a HubL, and I am using a widget to create different color choices. My problem is, only the 2 first colors actually work (my if and first "else if" will work as expected. The rest won't...). I am not sure what I am doing wrong...

 

Here is my code for the widget: 

{% set primary_accent_color = "#1B6EE3" %}
{% set secondary_accent_color = "#34C37D" %}
{% set tertiary_accent_color = "#FFC53D" %}
{% set fourth_accent_color = "#F46C4C" %}

{% for contents in module.content %}
<table class="two-col-centered" style="line-height: 1.5em; color: #fff; ">
    <tr>
        {% if contents.text_image_orientation == 'image_right' %}
      
              {% if contents.text_background_color == 'yellow' %}
                <td style="width: 50%; padding-right: 30px; text-align: right; font-size: 12px; padding-left: 50px; background-color: {{ tertiary_accent_color }}; " valign=middle class="content img-right k-700-text-align k-700-col k-700-padding">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
   
              
              {% else if contents.text_background_color == 'orange' %}
                <td style="width: 50%; padding-right: 30px; text-align: right; font-size: 12px; padding-left: 50px; background-color: {{ fourth_accent_color }}; " valign=middle class="content img-right k-700-text-align k-700-col k-700-padding">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
              
      
            {% else if contents.text_background_color == 'blue' %}
                <td style="width: 50%; padding-right: 30px; text-align: right; font-size: 12px; padding-left: 50px; background-color: {{ primary_accent_color }}; " valign=middle class="content img-right k-700-text-align k-700-col k-700-padding">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
      
       {% else if contents.text_background_color == 'green' %}
                <td style="width: 50%; padding-right: 30px; text-align: right; font-size: 12px; padding-left: 50px; background-color: {{ secondary_accent_color }};" valign=middle class="content img-right k-700-text-align k-700-col k-700-padding">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
                {% endif %}
      
        {% endif %}
        <td style="width: 50%; text-align: left; font-size: 12px; padding: 0;" valign=top class="k-700-col mk-padding">
            {% if contents.image.src %}
                <img src="{{ contents.image.src }}" style="width: 350px;" width="{{ contents.image.width }}" alt="{{ contents.image.alt }}">
            {% endif %}
        </td>
      
        {% if contents.text_image_orientation == 'image_left' %}
        
              {% if contents.text_background_color == 'yellow' %}
                    <td style="width: 50%; padding-left: 30px; text-align: left; font-size: 12px; padding-right: 50px; background-color: {{ tertiary_accent_color }};" valign=middle class="content k-700-col k-700-padding">
                          <div class="small-screen-padding">
                          <h2 style="font-size: 16px; color: #fff; margin: 0;">{{ contents.heading }}</h2> 
                          <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 0; border: none;"></span></div>
                          {{ contents.content }}
                          </div>
                    </td>
      
               {% else if contents.text_background_color == 'orange' %}
                    <td style="width: 50%; padding-left: 30px; text-align: left; font-size: 12px; padding-right: 50px; background-color: {{ fourth_accent_color }};" valign=middle class="content k-700-col k-700-padding">
                          <div class="small-screen-padding">
                          <h2 style="font-size: 16px; color: #fff; margin: 0;">{{ contents.heading }}</h2> 
                          <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 0; border: none;"></span></div>
                          {{ contents.content }}
                          </div>
                    </td>
      
             {% else if contents.text_background_color == 'blue' %}
                    <td style="width: 50%; padding-left: 30px; text-align: left; font-size: 12px; padding-right: 50px; background-color: {{ primary_accent_color }};" valign=middle class="content k-700-col k-700-padding">
                          <div class="small-screen-padding">
                          <h2 style="font-size: 16px; color: #fff; margin: 0;">{{ contents.heading }}</h2> 
                          <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 0; border: none;"></span></div>
                          {{ contents.content }}
                          </div>
                     </td>
      
              {% else if contents.text_background_color == 'green' %}
                    <td style="width: 50%; padding-left: 30px; text-align: left; font-size: 12px; padding-right: 50px; background-color: {{ secondary_accent_color }};" valign=middle class="content k-700-col k-700-padding">
                          <div class="small-screen-padding">
                          <h2 style="font-size: 16px; color: #fff; margin: 0;">{{ contents.heading }}</h2> 
                          <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 0; border: none;"></span></div>
                          {{ contents.content }}
                          </div>
                      </td>
     
              {% endif %}
        {% endif %}
    </tr>
</table>
{% endfor %}
Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Esteemed Advisor

Hi @CarolineLane ,

 

It looks like you are using a choice field to give your users some color options: Yellow, Orange, Blue, and Green.

 

Each option you set in the module choice field has two attributes, label and value. The value is what you check against, the label is the text that is show in the drop down. You should check the values in your choice field to ensure that they are lowercase and otherwise formatted correctly. 

 

anotherthing you can do, to remove the if statements, is use the hexidecimal color codes as the values for the choice field options:

Design Manager   HubSpot (1).pnga Hubspot custom module choice field with color options

Then you can output the color code directly into the html:

{% for contents in module.content %}
<table class="two-col-centered" style="line-height: 1.5em; color: #fff; ">
    <tr>
        {% if contents.text_image_orientation == 'image_right' %}

                <td style="background-color: {{ contents.text_background_color }};">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
{% endif %} </tr> </table> {% endfor %}
- Jonathan Sumner
Reply
0 Upvotes
1 Reply 1
Esteemed Advisor

Hi @CarolineLane ,

 

It looks like you are using a choice field to give your users some color options: Yellow, Orange, Blue, and Green.

 

Each option you set in the module choice field has two attributes, label and value. The value is what you check against, the label is the text that is show in the drop down. You should check the values in your choice field to ensure that they are lowercase and otherwise formatted correctly. 

 

anotherthing you can do, to remove the if statements, is use the hexidecimal color codes as the values for the choice field options:

Design Manager   HubSpot (1).pnga Hubspot custom module choice field with color options

Then you can output the color code directly into the html:

{% for contents in module.content %}
<table class="two-col-centered" style="line-height: 1.5em; color: #fff; ">
    <tr>
        {% if contents.text_image_orientation == 'image_right' %}

                <td style="background-color: {{ contents.text_background_color }};">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
{% endif %} </tr> </table> {% endfor %}
- Jonathan Sumner
Reply
0 Upvotes