CMS Development

igcorreia
Contributor

Loop through all Theme Settings

SOLVE

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?

1 Accepted solution
ndwilliams3
Solution
Key Advisor

Loop through all Theme Settings

SOLVE
0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Loop through all Theme Settings

SOLVE

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.

0 Upvotes
igcorreia
Contributor

Loop through all Theme Settings

SOLVE

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. 

0 Upvotes
ndwilliams3
Key Advisor

Loop through all Theme Settings

SOLVE

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

 

 

 

0 Upvotes
igcorreia
Contributor

Loop through all Theme Settings

SOLVE

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

 

0 Upvotes
ndwilliams3
Key Advisor

Loop through all Theme Settings

SOLVE

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>
0 Upvotes
igcorreia
Contributor

Loop through all Theme Settings

SOLVE

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 %}
0 Upvotes
ndwilliams3
Solution
Key Advisor

Loop through all Theme Settings

SOLVE
0 Upvotes
ndwilliams3
Key Advisor

Loop through all Theme Settings

SOLVE

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

0 Upvotes
ndwilliams3
Key Advisor

Loop through all Theme Settings

SOLVE

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

0 Upvotes