Custom Module Hubl Code If Elif - Going in Circles

jflow · July 16, 2018, 5:13pm

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> </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> </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> </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> </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> </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 · July 16, 2018, 5:49pm

@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 · July 16, 2018, 6:26pm

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 · July 16, 2018, 6:32pm

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

jflow · July 16, 2018, 6:39pm

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> </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> </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 · July 16, 2018, 6:44pm

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 · July 16, 2018, 7:05pm

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   {{ 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   {{ 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   {{ 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 · July 16, 2018, 7:09pm

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> </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 · July 16, 2018, 7:20pm

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 · July 16, 2018, 7:23pm

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 · July 16, 2018, 7:39pm

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 · July 16, 2018, 8:19pm

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> </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>

Topic		Replies	Views
Trouble with HubL If statement not working CMS Development	2	4459	March 20, 2024
If rich text field has value then APIs & Integrations	5	4333	October 12, 2018
Problems with HubL if/else statement CMS Development	2	5958	June 13, 2018
How to use themes to conditionally style text CMS Development enterprise	2	3164	December 3, 2023
Add class to body using Choice CMS Development hubdb , css	1	2104	November 9, 2022

Custom Module Hubl Code If Elif - Going in Circles

Related topics