1

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!

1 Answer 1

4

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>
1
  • Thanks @MatsMikelRummelhoff - this is precisely the classy solution I was hoping for. Cheers! Jun 20, 2016 at 20:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.