Custom Module Hubl Code If Elif - Going in Circles

jflow · ‎Jul 16, 2018

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.

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

If set to Dark Background

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 %}

tjoyce · ‎Jul 16, 2018

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

tjoyce · ‎Jul 16, 2018

@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.

jflow · ‎Jul 16, 2018

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.

tjoyce · ‎Jul 16, 2018

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

jflow · ‎Jul 16, 2018

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 · ‎Jul 16, 2018

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?

jflow · ‎Jul 16, 2018

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 · ‎Jul 16, 2018

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.

jflow · ‎Jul 16, 2018

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.

tjoyce · ‎Jul 16, 2018

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>

jflow · ‎Jul 16, 2018

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 · ‎Jul 16, 2018

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>

CMS Development