title: How to assign values to an array using HubSpot's HubL
body: <p>I'm currently trying to figure out how to allow a content manager to change the order in which elements appear within recent post link lists. Essentially, the concept involves them picking the index in a sorting array that will hold that element's type as a string, which will later be iterated over with output logic determining where each piece gets placed. Unfortunately, one of the drawbacks of using HubL is the lack of debugging or error reporting so I can't see where my syntax is failing. I was wondering if anyone in InternetLand has had any similar experience with this.</p>
  
  <p>Here's the HubL:</p>
  
  <pre><code>&lt;div class="theme-recent-posts"&gt;
    {% if widget.title_name %}
      &lt;div class="theme-recent-posts-title"&gt;
        &lt;{{ widget.title_tag }}&gt;&lt;span&gt;{{ widget.title_name }}&lt;/span&gt;&lt;/{{ widget.title_tag }}&gt;
      &lt;/div&gt;
    {% endif %}
    {% set posts = blog_recent_posts(widget.select_blog, widget.max_links) %}
    {% for post in posts %}
      {% set item_objects = [] %}
      {% if widget.show_images == "true" %}
        {% set item_objects[widget.sort_images] = "image" %}
      {% endif %}
      {% if widget.show_titles == "true" %}
        {% set item_objects[widget.sort_titles] = "title" %}
      {% endif %}
      {% if widget.show_dates == "true" %}
        {% set item_objects[widget.sort_dates] = "date" %}
      {% endif %}
      {% if widget.show_authors == "true" %}
        {% set item_objects[widget.sort_authors] = "author" %}
      {% endif %}
      &lt;div class="theme-recent-posts-item"&gt;
        &lt;a href="{{ post.absolute_url }}"&gt;
          {% for object in item_objects %}
            {% if object == "image" %}
              &lt;span class="theme-recent-posts-item-image"&gt;&lt;img src="{{ post.featured_image }}" alt="{{ post.name }}" /&gt;&lt;/span&gt;
            {% endif %}
            {% if object == "title" %}
              &lt;span class="theme-recent-posts-item-title"&gt;{{ post.name }}&lt;/span&gt;
            {% endif %}
            {% if object == "date" %}
              &lt;span class="theme-recent-posts-item-date"&gt;{{ post.created }}&lt;/span&gt;
            {% endif %}
            {% if object == "author" %}
              &lt;span class="theme-recent-posts-item-author"&gt;{{ post.author_name }}&lt;/span&gt;
            {% endif %}
          {% endfor %}
        &lt;/a&gt;
      &lt;/div&gt;
    {% endfor %}
  &lt;/div&gt;
  </code></pre>
  
  <p>Output currently results in:</p>
  
  <pre><code>&lt;div class="theme-recent-posts"&gt;
    &lt;div class="theme-recent-posts-title"&gt;
      &lt;h2&gt;&lt;span&gt;Recent Posts&lt;/span&gt;&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="theme-recent-posts-item"&gt;
      &lt;a href="//website/path/post-name-3"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="theme-recent-posts-item"&gt;
      &lt;a href="//website/path/post-name-2"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="theme-recent-posts-item"&gt;
      &lt;a href="//website/path/post-name-1"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Assume the default values wired up in the widget panel:</p>
  
  <pre><code>widget.show_images = true
  widget.show_images = true
  widget.show_images = true
  widget.show_images = true
  widget.sort_images = 0
  widget.sort_titles = 1
  widget.sort_dates = 2
  widget.sort_authors = 3
  </code></pre>
  
  <p>The output should essentially be this:</p>
  
  <pre><code>&lt;div class="theme-recent-posts"&gt;
    &lt;div class="theme-recent-posts-title"&gt;
      &lt;h2&gt;&lt;span&gt;Recent Posts&lt;/span&gt;&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="theme-recent-posts-item"&gt;
      &lt;a href="//website/path/post-name-3"&gt;
        &lt;span class="theme-recent-posts-item-image"&gt;&lt;img src="path/to/image-3.ext" alt="Post Name 3" /&gt;&lt;/span&gt;
        &lt;span class="theme-recent-posts-item-title"&gt;Post Name 3&lt;/span&gt;
        &lt;span class="theme-recent-posts-item-date"&gt;1234567890&lt;/span&gt;
        &lt;span class="theme-recent-posts-item-author"&gt;FirstName LastName&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="theme-recent-posts-item"&gt;
      &lt;a href="//website/path/post-name-2"&gt;
        &lt;span class="theme-recent-posts-item-image"&gt;&lt;img src="path/to/image-2.ext" alt="Post Name 2" /&gt;&lt;/span&gt;
        &lt;span class="theme-recent-posts-item-title"&gt;Post Name 2&lt;/span&gt;
        &lt;span class="theme-recent-posts-item-date"&gt;1234567890&lt;/span&gt;
        &lt;span class="theme-recent-posts-item-author"&gt;FirstName LastName&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="theme-recent-posts-item"&gt;
      &lt;a href="//website/path/post-name-1"&gt;
        &lt;span class="theme-recent-posts-item-image"&gt;&lt;img src="path/to/image-1.ext" alt="Post Name 1" /&gt;&lt;/span&gt;
        &lt;span class="theme-recent-posts-item-title"&gt;Post Name 1&lt;/span&gt;
        &lt;span class="theme-recent-posts-item-date"&gt;1234567890&lt;/span&gt;
        &lt;span class="theme-recent-posts-item-author"&gt;FirstName LastName&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm going to tag Jinja in this post, because HubL is based on Jinja, though it's not a direct translation.</p>
  
  <p>If someone with enough reputation is reading this, I would greatly appreciate the addition of the HubL language tag, as it currently does not exist to select (even though HubSpot was).</p>
  
  <p><strong>Update</strong></p>
  
  <p>Twig is also a close cousin to HubL, and so I looked up how to update elements in an array there, and came up with this answer:</p>
  
  <p><a href="https://stackoverflow.com/questions/9432534/setting-element-of-array-from-twig">Setting element of array from Twig</a></p>
  
  <pre><code>{% set item_objects = item_objects|merge({widget.sort_images:"image"}) %}
  </code></pre>
  
  <p>Implementation did not work as expected. Output remains unchanged.</p>