Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-20T20:26:12.513Z
Answers.Text: Thanks @MatsMikelRummelhoff - this is precisely the classy solution I was hoping for. Cheers!
Answers.UserDisplayName: Josh Kennedy
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-20T13:48:29.760Z
Answers.LastActivityDate: 2016-06-20T13:48:29.760Z
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Body: <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>
  
Tags: <templating><conditional>
Title: DRYer way to set column widths than with if statement?
ThreadText: # 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 %}
  
  <div class="wrapper">
    <div class="column-{{ content.columnOneWidth }}">
      [...]
    </div>
    <div class="column-{{ content.columnTwoWidth }}">
      [...]
    </div>
  </div>
  
  ```
  
  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] %}
  
  <div class="wrapper">
      {% for column in columns %}
          <div class="column-{{ column }}-of-{{ totalColumns }}">
             [...]
          </div>
      {% endfor %}
  </div>
  
  ```
  
  > **Comments:**
  > **username_0**: Thanks @MatsMikelRummelhoff - this is precisely the classy solution I was hoping for. Cheers!  
  
  ---
  
  