<p>One way to make it a bit more DRY and flexible is to use the <code>split</code> filter to create an array of column widths.</p>

<p>Also, you can save a bit of markup by calculating the total number of columns, and using a <code>for</code> loop to output the actual column DOM nodes:</p>

<pre><code>{% set columns = content.columnWidth|default('1-2')|split('-') %}
{% set totalColumns = columns[0] + columns[1] %}

&lt;div class="wrapper"&gt;
    {% for column in columns %}
        &lt;div class="column-{{ column }}-of-{{ totalColumns }}"&gt;
           [...]
        &lt;/div&gt;
    {% endfor %}
&lt;/div&gt;
</code></pre>

CC BY-SA 3.0
2016-06-20T20:26:12.513Z
Thanks @MatsMikelRummelhoff - this is precisely the classy solution I was hoping for. Cheers!
Josh Kennedy
CC BY-SA 3.0
2016-06-20T13:48:29.760Z
2016-06-20T13:48:29.760Z
Mats Mikkel Rummelhoff
<p>Craft <code>n00b</code> here. Really loving it so far, but am wondering if how I'm implementing this is the best option, or if maybe there's a more sophisticated solution. </p>

<p>Inside our content builder switch statement, I'd like to provide my client with the ability to build an image-and-text block wherein they can change the widths of the columns via a dropdown (<code>columnWidth</code>), which will then set the widths of the children. Here's what I have so far, but it seems a little inelegant, especially if I were to do more options or columns. Any pointers or is this the best way to handle this?</p>

<pre><code>{% if content.columnWidth == "1-2" %}
  {% set columnOneWidth = "1-of-3" %}
  {% set columnTwoWidth = "2-of-3" %}
{% elseif content.columnWidth == "1-1" %}
  {% set columnOneWidth = "1-of-2" %}
  {% set columnTwoWidth = "1-of-2" %}
{% elseif content.columnWidth == "2-1" %}
  {% set columnOneWidth = "2-of-3" %}
  {% set columnTwoWidth = "1-of-3" %}
{% endif %}

&lt;div class="wrapper"&gt;
  &lt;div class="column-{{ content.columnOneWidth }}"&gt;
    [...]
  &lt;/div&gt;
  &lt;div class="column-{{ content.columnTwoWidth }}"&gt;
    [...]
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Thanks!</p>

<templating><conditional>
DRYer way to set column widths than with if statement?
# DRYer way to set column widths than with if statement?

(Asked by: username_0 on 2016-06-20)

Craft n00b here. Really loving it so far, but am wondering if how I'm implementing this is the best option, or if maybe there's a more sophisticated solution. 
Inside our content builder switch statement, I'd like to provide my client with the ability to build an image-and-text block wherein they can change the widths of the columns via a dropdown (columnWidth), which will then set the widths of the children. Here's what I have so far, but it seems a little inelegant, especially if I were to do more options or columns. Any pointers or is this the best way to handle this?
{% if content.columnWidth == "1-2" %}
  {% set columnOneWidth = "1-of-3" %}
  {% set columnTwoWidth = "2-of-3" %}
{% elseif content.columnWidth == "1-1" %}
  {% set columnOneWidth = "1-of-2" %}
  {% set columnTwoWidth = "1-of-2" %}
{% elseif content.columnWidth == "2-1" %}
  {% set columnOneWidth = "2-of-3" %}
  {% set columnTwoWidth = "1-of-3" %}
{% endif %}


  
    [...]
  
  
    [...]
  


Thanks!

**Tags:** templating, conditional

---

## 1 answers

### Answer by username_1 on 2016-06-20. Score: 4 | Accepted answer

One way to make it a bit more DRY and flexible is to use the split filter to create an array of column widths.
Also, you can save a bit of markup by calculating the total number of columns, and using a for loop to output the actual column DOM nodes:
{% set columns = content.columnWidth|default('1-2')|split('-') %}
{% set totalColumns = columns[0] + columns[1] %}


    {% for column in columns %}
        
           [...]
        
    {% endfor %}

> **Comments:**
> **username_0**: Thanks @MatsMikelRummelhoff - this is precisely the classy solution I was hoping for. Cheers!  

---

