Loop through all Theme Settings

[igcorreia]

I am trying to build a loop of all theme settings. Something like:

{% set opts = theme.items() %}
{% for opt in opts %}
    {% for prop in opt %}
       {{prop}}
    {% endfor %}
{% endfor %}

But I can't get nothing to work. Any help?

[WendyGoh]

Hey @igcorreia,

Apologise for the delayed in response.

Just to clarify, what's the theme settings that you'd like to loop through here? Based on our documentation, it doesn't appear that theme.items() is a supported hubl. 

Are you looking to loop through items in module HTML+HubL? If so, you can check out this documentation: Module and Theme Fields Overview.

[igcorreia]

Hey @WendyGoh I think you are right. But for us, theme developers would be a nice feature to have a way to list in HUBL all theme settings. I still haven't give up on this. The is a dict so, reading the hubl docs, there is a way to do a for loop to list every sing setting.

Also, your team has an error in the docs that affected the loop. The error was already correct and since then I haven't tried. 

[ndwilliams3]

@igcorreia,

We seem to keep running across the same challenges!

I'm trying to to exactly the same thing. Trying to output all the theme variables to modify CSS without going through each one in the JSON file. 

I thought this would work, but it only includes the key for the first array.

{{ theme|tojson }}

Can't seem to find a way to loop through all the nested arrays easily. This is where I'm at and it works. However, it requires manual stepping through each level and there's alot of nesting in globals.  I'm not expert  with Python syntax or Jinja. However, I feel like there's got to be an easier way to grab all the theme variables.

Theme
{%for item in theme.items() %}
{{item.key|e}} : {{item.value|e}}
{% endfor %}

Spacing
{%for item in theme.spacing.items() %}
{{item.key|e}} : {{item.value|e}}
{% endfor %}

Fonts
{%for item in theme.fonts.items() %}
{{item.key|e}} : {{item.value|e}}
{% endfor %}

Global
{%for item in theme.global.items() %}
{{item.key|e}} : {{item.value|e}}
{% endfor %}

[igcorreia]

@ndwilliams3 I think we are both building the same thing hahahaha 🙂

I know that we need to build a recursive loop with maximum length validation per level and detect the type of variable to detect long/list/dict to keep going on a deeper level and than test the variable again to detect number/font/text/rich text in order to print the values.

I have done this for different platforms, I just don't have the availability. If we could get the THEME in a JSON format would be amazing, like your proposal:

{{ theme|tojson }}

[ndwilliams3]

Made some progress. 

<ul>
{% for key, val in theme.items() %}
<li>1. theme.{{ key }} 
{% if val is mapping %}
  = dict
<ul>
  {% for key2, val2 in val.items() %}
    <li>2. theme.{{key}}.{{ key2 }} 
      {% if val2 is mapping %}
      = dict
       <ul>
        {% for key3, val3 in val2.items() %}
          <li>3. theme.{{key}}.{{ key2 }}.{{ key3 }}
            {% if val3 is mapping %}
            = dict
            <ul>
              {% for key4, val4 in val3.items() %}
              <li>4. theme.{{key}}.{{ key2 }}.{{ key3 }}.{{ key4 }}
                {% if val4 is mapping %}
                = dict
                <ul>
                  {% for key5, val5 in val4.items() %}
                  <li>5. theme.{{key}}.{{ key2 }}.{{ key3 }}.{{ key5 }} = {{val5}} </li><!-- 5 -->
                  {% endfor %}</ul>{% else %} = {{val4}} <!-- 4 -->
                {% endif %}</li>
              {% endfor %}</ul>{% else %} = {{val3}} <!-- 3 -->
            {% endif %}</li>
          {% endfor %}</ul>{% else %} = {{val2}} <!-- 2 -->
        {% endif %}</li>
      {% endfor %} </ul>{% else %} = {{val}} <!-- 1 -->
    {% endif %}</li>
{% endfor %}</ul>

[igcorreia]

Same idea 🙂

{% if type(theme) == 'dict' %}
    {% for k,v in theme.items() %}
        {% if type(v) == 'dict' %}
            {% for k2,v2 in v.items() %} 
                {% if type(v2) == 'dict' %}
                    {% for k3,v3 in v2.items() %}
                        {% if type(v3) == 'dict' %}
                            {% for k4,v4 in v3.items() %}          
                                loader:{{k}}{{k2}}{{k3}}{{k4}}{{v4}}
                            {% endfor %}        
                        {% else %}
                            loader:{{k}}{{k2}}{{k3}}{{v3}}
                        {% endif%}
                    {% endfor %}        
                {% else %}
                    loader:{{k}}{{k2}}{{v2}}
                {% endif%}
            {% endfor %}        
        {% else %}
            loader:{{k}}{{v}}
        {% endif%}
    {% endfor %}
{% endif %}

[ndwilliams3 · Accepted solution]

@igcorreia,

I added a couple of ideas related to challenges i've come across.

https://community.hubspot.com/t5/HubSpot-Ideas/Theme-colors-as-swatches-in-color-picker-field-UI/idi...

https://community.hubspot.com/t5/HubSpot-Ideas/CMS-Theme-settings-at-the-domain-level/idi-p/350010

[ndwilliams3]

I found some jinja documentation on building a recursive loop. Had no luck. Guessing the HUBL flavor may not support all extensions.  

[ndwilliams3]

@igcorreia ,

looking at the repo issue queue for HUBL https://github.com/HubSpot/jinjava

https://github.com/HubSpot/jinjava/issues/77

"Jinjava do not yet support the recursive option on for loops, but it may not be something we want to do for the reasons mentioned above."