topic Re: Using theme variables in template hubl code not working for padding in CMS Development

Using theme variables in template hubl code not working for padding

JohnLaprairie — Thu, 08 Feb 2024 18:50:17 GMT

I am creating a theme template which has a drag and drop area. In this section will be placed a module. I also have a Theme Options settings page that allows the client to set a default padding on sections in the DND area (see attached image).

In the hubl code I know I can write:

{% dnd_section 
full_width=true, 
padding={
'top': 60,
'bottom': 60,
'left': '0',
'right': '0'
},
vertical_alignment='MIDDLE' %}
{% dnd_module path='/theme/theme-modules/module' %}
{% end_dnd_module %}
{% end_dnd_section %}

And I will see that the section in the page editor will have these values for padding.

When I attempt to write the content as:

{% dnd_section 
full_width=true, 
padding={
'top': {{ theme.site_layout.section_top_bottom }},
'bottom': {{ theme.site_layout.section_top_bottom }},
'left': {{ theme.site_layout.body_padding }},
'right': {{ theme.site_layout.body_padding }}
},
vertical_alignment='MIDDLE' %}
{% dnd_module path='/template/template-modules/module' %}
{% end_dnd_module %}
{% end_dnd_section %}

I get an error from the CLI on upload


[ERROR] Error validating template.
[ERROR] line 187: Error parsing '{
'top': {{ theme.site_layout.section_top_bottom }},
'bottom': {{ theme.site_layout.section_top_bottom }},
'left': {{ theme.site_layout.body_padding }},
'right': {{ theme.site_layout.body_padding }},
}': {{ theme.site_layout.section_top_bottom }},
'bottom': {{ theme.site_layout.section_top_bottom }},
'left': {{ theme.site_layout.body_padding }},
'right': {{ theme.site_layout.body_padding }},
}}': syntax error at position 75, encountered '}', expected ':'

If I put the variable in quotation marks

'top': '{{ theme.site_layout.section_top_bottom }}',

The templae will upload without an error, however the section will not this padding when I create a new page.

I also tried adding a suffix as well

'top':  '{{ theme.site_layout.section_top_bottom }}px',

This did not work.

If I set to just print the variable to the page, I will get the value '120' and so I know the variable is being passed to the template.

If I send a different variable to another field, it will work

max_width= {{ theme.site_layout.maximum_content_width }},

I am thinking it has something to do with the padding json formatting but I can quite figure it out.

I am currently passing these values through a custom CSS file as

.body-container-wrapper .body-container .dnd-section {

 padding-left: {{ theme.site_layout.body_padding }}px;

 padding-right: {{ theme.site_layout.body_padding }}px; 

}

but this isn't ideal as there are some modules that need to be fullwidth without padding left and right while other modules that require that padding.

Any thoughts on this appreciated.

Re: Using theme variables in template hubl code not working for padding

dsmarion — Thu, 08 Feb 2024 21:25:27 GMT

Try adding a default value if the value given is null:

'top': {{ theme.site_layout.section_top_bottom or "60px" }},
'bottom': {{ theme.site_layout.section_top_bottom or "60px" }},
...

Re: Using theme variables in template hubl code not working for padding

JohnLaprairie — Thu, 08 Feb 2024 22:41:08 GMT

Thank you for this suggestion.

t did not upload as written with the same syntax error but with single quotes around the statement it uploaded but didn't work.

From this I thought about an 'if' statement and tried

 padding={
'top': '{% if theme.site_layout.section_top_bottom >= 0 %}{{ theme.site_layout.section_top_bottom }}{% else %}60{% endif %}'
},

This did not work either.

I also tried setting an intermediate variable first early in the template

{% set padding = theme.site_layout.section_top_bottom %}

and in the section

...

padding={
'top': {{ padding }}
},...

This did not work either. It did not upload without quotes around the variable.

I am starting to think it's the quotes that are the issue. Double and single quotes have been tried.

I am currently going to set the full width sections with modules that can't have padding, set the padding to 0, and leave the CSS to give the rest of the sections padding.

Re: Using theme variables in template hubl code not working for padding

dsmarion — Fri, 09 Feb 2024 12:00:09 GMT

Ok, I guess I'll ask some stupid questions - I am much more familiar with the CRM than the CMS in HS:

- Are you sure there is any value in theme.site_layout.section_top_bottom or other theme fields?

- Are your theme fields defined in your theme's fields.json file (theme.site_layout.section_top_bottom and the others)?

- I ask this because I don't see where those are defined in the cms_boilerplate theme (of course, different themes can define custom fields)

- or maybe they are defined somewhere else?

- can you verify any value is stored in those fields?

Re: Using theme variables in template hubl code not working for padding

alyssamwilie — Fri, 09 Feb 2024 16:33:57 GMT

When adding HubL values to an object you should not use the brackets at all.

padding={ 'top': theme.site_layout.section_top_bottom, 'bottom': theme.site_layout.section_top_bottom, 'left': theme.site_layout.body_padding, 'right': theme.site_layout.body_padding }

Re: Using theme variables in template hubl code not working for padding

JohnLaprairie — Fri, 09 Feb 2024 16:44:27 GMT

Thank you very much. This works like I would expect it to, easy and simple.