Custom Module Hubl Code If Elif - Going in Circles

SOLVE
jflow
Participant

Hi there-

Have a working custom module I created that is currently used on our site that allows folks to create a block that includes an Image, Heading Text and Rich Text Area with the class image-and-text

 

Currently there's an IF statement for the whole thing - shows Version 1 if there's a URL in the URL field and Version 2 with no <a wrapper if there is NO URL in the URL field.

 

NEW OPTION NEEDED  We'd like to be able to add a class so we can specify a background color used for that block when in mobile view. 

 

I've created a new field called Mobile BG Color - if it's set to None, I'd like the regular code to load.

<div class="image-and-text">

 

If it's set to Light Background, I'd like the code to load with the additional class of mobilelightbg

<div class="image-and-text mobilelightbg">

 

If set to Dark Background

<div class="image-and-text mobiledarkbg">

 

I am getting lost in code and not sure I'm even stacking the if in an if correctly.  

 

Not hopeful since this attempt is a bit of a cluster now but if anyone chimes in, absolutely grateful! 

 

 

ORIGINAL CODE

{% if widget.optional_url %}

<div class="image-and-text">
	<a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
    <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}"  
                     width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
 	</a>
<div>&nbsp;</div>
<a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
  <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>
</a>
{% if widget.text %}
     {% inline_rich_text field="text" value="{{ module.text }}" %}
{% endif %}    
</div> 
{% else %} 
<div class="image-and-text">
    <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}" 
                     width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
<div>&nbsp;</div>
  <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>  
{% if widget.text %}
     {% inline_rich_text field="text" value="{{ module.text }}" %}
{% endif %}    
</div>    
{% endif %}

 

NEW CODE ATTEMPT

{% if widget.optional_url %}

	{% if module.mobilebgcolor.value == 'mobilelightbg' %}

    <div class="image-and-text mobilelightbg">
      <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
        <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}"  
                         width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
      </a>
    <div>&nbsp;</div>
    <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
      <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>
    </a>
    {% if widget.text %}
         {% inline_rich_text field="text" value="{{ module.text }}" %}
    
	{% elif module.mobilebgcolor.value == 'mobiledarkbg' %}   

      {% else %}
            <div class="image-and-text mobiledarkbg">
      <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
        <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}"  
                         width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
      </a>
    <div>&nbsp;</div>
    <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
      <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>
    </a>
    {% if widget.text %}
         {% inline_rich_text field="text" value="{{ module.text }}" %}

        {% endif %}       
            
	{% endif %}      
    
{% endif %}    
</div> 
{% else %} 
<div class="image-and-text">
    <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}" 
                     width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
<div>&nbsp;</div>
  <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>  
{% if widget.text %}
     {% inline_rich_text field="text" value="{{ module.text }}" %}
{% endif %}    
</div>    
{% endif %}

 

1 Accepted solution

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

Glad it's working.

one more thing you should do to clean up the code is remove the wrapping if statement. There is too much duplicate code; condense it like this:

	{% set bgColorClass = 'mobiledarkbg' %}
	{% if module.mobilebgcolor.value == 'mobilelightbg' %}
		{% set bgColorClass = 'mobilelightbg' %}
	{% endif %}

      <div class="image-and-text  {{bgColorClass}}">
        <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
          <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}"  
                           width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
        </a>
      <div>&nbsp;</div>
      {% if widget.optional_url %}
        <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
          <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>
        </a>
      {% else %}
            <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}" 
                         width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
        {% endif %}          
      {% if widget.text %}
           {% inline_rich_text field="text" value="{{ module.text }}" %}
      {% endif %}    
      </div> 

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

0 Upvotes
11 Replies 11
tjoyce
Recognized Expert | Platinum Partner

@jflow - I think a structure like this might work for you

{% if widget.optional_url %}

	{% set bgColorClass = 'mobiledarkbg' %}
	{% if module.mobilebgcolor.value == 'mobilelightbg' %}
		{% set bgColorClass = 'mobilelightbg' %}
	{% endif %}

	<div class="image-and-text {{bgColorClass}}">

		{% if widget.text %}

		{% endif %}
		
	</div>
{% endif %}

OR:

{% if widget.optional_url %}

	<div class="image-and-text {{module.mobilebgcolor.value}}">

		{% if widget.text %}

		{% endif %}
		
	</div>
{% 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.

0 Upvotes
jflow
Participant

Hey thanks so much, AM closer. Tried the 2nd version first, didn't insert extra class.

 

Then tried the first option but the inserted CSS class stays at mobiledarkbg, it's not switching to mobilelightbg when you choose the Light BG option. Tried to tweak this code as is, couldn't get to switch, I know I'd need to edit the code to have it add no additional class if they pick None but figured just try to get this part working.

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

Do you want to paste what you have so far, so we can take a look?

0 Upvotes
jflow
Participant

Thanks, here's where we are now:

 

{% if widget.optional_url %}

	{% set bgColorClass = 'mobiledarkbg' %}
	{% if module.mobilebgcolor.value == 'mobilelightbg' %}
		{% set bgColorClass = 'mobilelightbg' %}
	{% endif %}

      <div class="image-and-text  {{bgColorClass}}">
        <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
          <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}"  
                           width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
        </a>
      <div>&nbsp;</div>
      <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
        <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>
      </a>
      {% if widget.text %}
           {% inline_rich_text field="text" value="{{ module.text }}" %}
      {% endif %}    
      </div> 
{% else %} 
          
	{% set bgColorClass = 'mobiledarkbg' %}
	{% if module.mobilebgcolor.value == 'mobilelightbg' %}
		{% set bgColorClass = 'mobilelightbg' %}
	{% endif %}          
          
    <div class="image-and-text  {{bgColorClass}}">
        <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}" 
                         width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
    <div>&nbsp;</div>
      <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>  
    {% if widget.text %}
         {% inline_rich_text field="text" value="{{ module.text }}" %}
    {% endif %}    
    </div>    
{% endif %}
tjoyce
Recognized Expert | Platinum Partner

Can you just print 

{{module.mobilebgcolor.value}}

to the screen and change the dropdown, just to be sure the value is changing and we know the exact classes to check against the if statement? 

0 Upvotes
jflow
Participant

 

Hey almost there, thanks! In this section: the {{ module.mobilebgcolor }} does display on the Preview screen but the {{module-mobilebgcolor.value}} did not. 

 

      <div>MOBILE COLOR &nbsp;  {{ module.mobilebgcolor }}</div>
        {{module.mobilebgcolor.value}}

 

So tweaked to remove .value and now the class IS showing and it's switching between dark and light

 

FULL CODE

 

{% if widget.optional_url %}

	{% set bgColorClass = 'mobiledarkbg' %}
	{% if module.mobilebgcolor == 'mobilelightbg' %}
		{% set bgColorClass = 'mobilelightbg' %}
	{% endif %}

      <div class="image-and-text  {{bgColorClass}}">
        <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
          <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}"  
                           width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
        </a>
      <div>MOBILE COLOR &nbsp;  {{ module.mobilebgcolor }}</div>
        {{module.mobilebgcolor.value}}
      <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
        <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>
      </a>
      {% if widget.text %}
           {% inline_rich_text field="text" value="{{ module.text }}" %}
      {% endif %}    
      </div> 
{% else %} 
          
	{% set bgColorClass = 'mobiledarkbg' %}
	{% if module.mobilebgcolor == 'mobilelightbg' %}
		{% set bgColorClass = 'mobilelightbg' %}
	{% endif %}          
          
    <div class="image-and-text  {{bgColorClass}}">
        <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}" 
                         width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
      <div>MOBILE COLOR &nbsp;  {{ module.mobilebgcolor }}</div>
          {{module.mobilebgcolor.value}}
      <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>  
    {% if widget.text %}
         {% inline_rich_text field="text" value="{{ module.text }}" %}
    {% endif %}    
    </div>    
{% endif %}

Going to play and see if I can figure out the "None" option now.

 

Thanks so much!

 

tjoyce
Solution
Recognized Expert | Platinum Partner

Glad it's working.

one more thing you should do to clean up the code is remove the wrapping if statement. There is too much duplicate code; condense it like this:

	{% set bgColorClass = 'mobiledarkbg' %}
	{% if module.mobilebgcolor.value == 'mobilelightbg' %}
		{% set bgColorClass = 'mobilelightbg' %}
	{% endif %}

      <div class="image-and-text  {{bgColorClass}}">
        <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
          <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}"  
                           width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
        </a>
      <div>&nbsp;</div>
      {% if widget.optional_url %}
        <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
          <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>
        </a>
      {% else %}
            <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}" 
                         width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
        {% endif %}          
      {% if widget.text %}
           {% inline_rich_text field="text" value="{{ module.text }}" %}
      {% endif %}    
      </div> 

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

0 Upvotes
jflow
Participant

Thanks so much - that was the last part of my 'overthinking' to clean up. Dropped in with the "none" option and working like a champ. Thanks!

 

ONE LAST QUESTIONS IF YOU'RE STILL AVAILABLE:  I created a color picker for my Heading Text field, works just fine.  Do you know if it's possible to do the same on the rich text field? Had no luck there. 

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

Awesome!

Yea, you can wrap the richtext in a div and as long as there aren't any overrides from the user, in the wysiwyg on text color, it should inherit the parent div color.

Something like: 

<div style="color: {{widget_data.somecolorpicker.color}}">
  //insert your richetext module here
</div>
0 Upvotes
jflow
Participant

Yeah not sure what I was doing wrong there, looks similar but I was off somehow.

All settled, color pickers galore - woo. 🙂

 

Thanks so much!

jflow
Participant

FINAL CODE: (previous code was causing duplicate image at top)

Thanks again!

	{% set bgColorClass = '' %}
	{% if module.mobilebgcolor == 'mobilelightbg' %}
		{% set bgColorClass = 'mobilelightbg' %}
	{% elif module.mobilebgcolor == 'mobiledarkbg' %}
		{% set bgColorClass = 'mobiledarkbg' %}
	{% elif module.mobilebgcolor == 'none' %}
		{% set bgColorClass = '' %}
	{% endif %}

      <div class="image-and-text {{bgColorClass}}">
      <div>&nbsp;</div>
      {% if widget.optional_url %}
        <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
          <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}"  
                           width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
        </a>        
        <a href="{% inline_text field="optional_url" value="{{ module.optional_url }}", no_wrapper=True %}">
          <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>
        </a>
      {% else %}
            <img alt="{% inline_text field="image_alt_text" value="{{ module.image_alt_text }}", no_wrapper=True %}" src="{{ module.image_src_url }}" 
                         width="{{ module.width }}" height="auto" style="display: block; margin: 0px auto;"/>
          <{{ module.heading_type }} style="color: {{ module.header_text_color }}; text-align: center; font-weight: {{ module.header_font_weight }};">{% inline_text field="heading_text_under_image" value="{{ module.heading_text_under_image }}" %}</{{ module.heading_type }}>           
        {% endif %}          
      {% if widget.text %}
				<div style="color: {{ module.rich_text_color }}">
					{% inline_rich_text field="text" value="{{ module.text }}" %}
        </div>
      {% endif %}    
      </div>