# Setting properties to use in a loop

**URL:** <https://community.hubspot.com/t/setting-properties-to-use-in-a-loop/37395>\
**Category:** CMS Development\
**Tags:** developer\
**Created:** [May 15, 2021, 5:48am UTC](https://community.hubspot.com/t/setting-properties-to-use-in-a-loop/37395 "2021-05-15T05:48:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anthony\_Noel](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anthony_noel/32/53612_2.png) [@Anthony\_Noel](https://community.hubspot.com/u/Anthony_Noel)\
**Post date:** [May 15, 2021, 5:48am UTC](https://community.hubspot.com/t/setting-properties-to-use-in-a-loop/37395/1 "2021-05-15T05:48:08Z")

</div>

Hello,

I want to define the width of a table that will contain 1-3 columns, defined by a repeater.

I could use loop.length to get the number of items in the loop, but I don’t want to repeat the whole table, just the nested table within it.

Is there a method for finding the number of items in a loop without first creating the loop?

What I’ve tried: creating a loop outside of the containing table and just using it to set the width variables, then closing the loop, with my actual loop for buiding the columns nested inside that table.

I’ve since learned that I can’t call variables created within a loop, outside of that loop.

Here’s my code (some code from the link selector has been removed for simplicity):

```lia-code-sample
<!-- COLUMNS -->
{% for item in module.image_block_repeater %}{% if loop.length == 3 %}{% set layoutWidth = "100%" %}{% set boxWidth = "33%" %}
{% elif loop.length == 2 %}{% set layoutWidth = "66%" %}{% set boxWidth = "48%" %}
{% else %}{% set layoutWidth = "33%" %}{% set boxWidth = "100%" %}
{% endif %}
{% endfor %}
<table class="imgRow" border="0" cellpadding="0" cellspacing="0" width="{{ layoutWidth }}" role="presentation">
<tr> <td class="center">
 <center>
 {% for item in module.image_block_repeater %}
 <!-- COLUMN -->
 <table border="0" cellpadding="0" cellspacing="0" width="{{ boxWidth }}" align="left" role="presentation">
 <tr> <td class="center" style="text-align: center;">
 <img src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="170" height="170" class="portraitThumb">
 <p class="caption">{{ item.caption }}</p>
 <p><a href="{{ href }}">{{ item.link_text }}</a></p>
 </td> </tr>
 </table>
 {% endfor %}
 </center>
</td> </tr>
</table>

```

---

<div class="post-metadata">

**Author:** ![natsumimori](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/natsumimori/32/39807_2.png) [@natsumimori](https://community.hubspot.com/u/natsumimori)\
**Post date:** [May 17, 2021, 7:30am UTC](https://community.hubspot.com/t/setting-properties-to-use-in-a-loop/37395/2 "2021-05-17T07:30:35Z")

</div>

Hi [@Anthony\_Noel](https://community.hubspot.com/t5/user/viewprofilepage/user-id/190454) ,

I will tag in some top contributors in the Developers’ Forum- @Jsum and @tjoyce , would you mind taking a look?

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [May 17, 2021, 8:03am UTC](https://community.hubspot.com/t/setting-properties-to-use-in-a-loop/37395/3 "2021-05-17T08:03:04Z")

</div>

Hi [@Anthony\_Noel](https://community.hubspot.com/t5/user/viewprofilepage/user-id/190454), you could do one of two things.

One: separate the logic of layoutWidth and boxWidth like so:

```lia-code-sample
<table class="imgRow" border="0" cellpadding="0" cellspacing="0" width="{% for item in module.image_block_repeater %}{% if loop.length == 3 %}100%{% elif loop.length == 2 %}66%{% else %}33%{% endif %}{% endfor %}" role="presentation">
<tr> <td class="center">
 <center>
 {% for item in module.image_block_repeater %}
 <!-- COLUMN -->
 <table border="0" cellpadding="0" cellspacing="0" width="{% if loop.length == 3 %}33%{% elif loop.length == 2 %}48%{% else %}100%{% endif %}" align="left" role="presentation">
 <tr> <td class="center" style="text-align: center;">
 <img src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="170" height="170" class="portraitThumb">
 <p class="caption">{{ item.caption }}</p>
 <p><a href="{{ href }}">{{ item.link_text }}</a></p>
 </td> </tr>
 </table>
 {% endfor %}
 </center>
</td> </tr>
</table>

```

Or update an object variable that is outside your for loop with values defined within said loop:

```lia-code-sample
{% set widths = {} %}
{% for item in module.image_block_repeater %}
 {% if loop.length == 3 %}{% do widths.update({'layoutWidth': '100%', 'boxWidth': '33%'}) %}
 {% elif loop.length == 2 %}{% do widths.update({'layoutWidth': '66%', 'boxWidth': '48%'}) %}
 {% else %}{% do widths.update({'layoutWidth': '33%', 'boxWidth': '100%'}) %}
 {% endif %}
{% endfor %}
<table class="imgRow" border="0" cellpadding="0" cellspacing="0" width="{{ widths.layoutWidth }}" role="presentation">
<tr> <td class="center">
 <center>
 {% for item in module.image_block_repeater %}
 <!-- COLUMN -->
 <table border="0" cellpadding="0" cellspacing="0" width="{{ widths.boxWidth }}" align="left" role="presentation">
 <tr> <td class="center" style="text-align: center;">
 <img src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="170" height="170" class="portraitThumb">
 <p class="caption">{{ item.caption }}</p>
 <p><a href="{{ href }}">{{ item.link_text }}</a></p>
 </td> </tr>
 </table>
 {% endfor %}
 </center>
</td> </tr>
</table>

```

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [May 18, 2021, 7:23pm UTC](https://community.hubspot.com/t/setting-properties-to-use-in-a-loop/37395/4 "2021-05-18T19:23:13Z")

</div>

[@Anthony\_Noel](https://community.hubspot.com/t5/user/viewprofilepage/user-id/190454) - I wrote a tutorial on updating variables outside of a for loop here

[https://community.hubspot.com/t5/CMS-Development/How-to-change-a-variable-outside-of-a-for-loop-Scoping-Issues/td-p/211117](https://community.hubspot.com/t5/CMS-Development/How-to-change-a-variable-outside-of-a-for-loop-Scoping-Issues/td-p/211117)

---

<div class="post-metadata">

**Author:** ![natsumimori](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/natsumimori/32/39807_2.png) [@natsumimori](https://community.hubspot.com/u/natsumimori)\
**Post date:** [May 19, 2021, 1:15am UTC](https://community.hubspot.com/t/setting-properties-to-use-in-a-loop/37395/5 "2021-05-19T01:15:33Z")

</div>

Thank you @piersg and @tjoyce !

[@Anthony\_Noel](https://community.hubspot.com/t5/user/viewprofilepage/user-id/190454) please check out their advices!

---

<div class="post-metadata">

**Author:** ![AnthonyNoel](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anthonynoel/32/84335_2.png) [@AnthonyNoel](https://community.hubspot.com/u/AnthonyNoel)\
**Post date:** [May 20, 2021, 1:37pm UTC](https://community.hubspot.com/t/setting-properties-to-use-in-a-loop/37395/6 "2021-05-20T13:37:53Z")

</div>

Thank you all!

Both options look doable, but is the second more useful if I my templates have several of these repeater blocks? ie, I can define the object once and reuse it more easily?

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [May 20, 2021, 3:29pm UTC](https://community.hubspot.com/t/setting-properties-to-use-in-a-loop/37395/7 "2021-05-20T15:29:00Z")

</div>

Yes, you can define once and re-use.