1

In the Neo plugin, I've made a block that has the option to add 3 child blocks underneath it.

This is the code from the parent block:

{% extends 'neo/default' %}
{% block blockContent %}

<section id="services" class="white-bg">
 <div class="container">
   <div class="row margin-60">
     <div class="col-sm-12 text-center">
       <h2>{{ block.mainTitle }}</h2>
     </div>
   </div>

   <div class="row margin-60">

    {% if block.children %}
     {% for item in block.children %}
     {% if loop.first %}
     {% include "neo/children/" ~ item.type %}
     {% endif %}
    {% endfor %}
    {% endif %}

   </div>

 </div>
</section>
{% endblock %}

So the parent block can have up to 3 child blocks. You'll get 3 blocks on one row, each block has a 'col-sm-4' (Up to 12 fit on one row if aren't familiar with Bootstrap) class so it fits on one row.

But if a user only chooses to have 2 child blocks the classes 'col-sm-4' will remain the same. I'd like to change this class to 'col-sm-6' and when only one child block is selected, 'col-sm-12'.

Okay so this is the code for the child block:

{% block blockContent %}    
{% for block in entry.body %}
{% switch block.type.handle %}
{% case 'serviceItem' %}

<div class="col-sm-4 margin-20 wow fadeInUp" data-wow-delay="0.4s">
  <div class="text-center margin-20"><i class="fa {{ block.mainTitle }} fa-4x black"></i></div>
  {{ block.text }}
  <a class="more" href="#">LEARN MORE</a>
</div>

{% endswitch %}
{% endfor %}
{% endblock %}

What I tried first is set the length of the child block. And with that number defined, with the help of if statements, change the layout like this:

{% set numberOfItems = block.serviceItem|length %}
 {% if numberOfItems == 1 %}
  <div class="col-sm-12 margin-20 wow fadeInUp" data-wow-delay="0.4s">
   <div class="text-center margin-20"><i class="fa {{ block.mainTitle }} fa-4x black"></i></div>
   {{ block.text }}
   <a class="more" href="#">LEARN MORE</a>
  </div>

 {% elseif numberOfItems == 2 %}

  <div class="col-sm-6 margin-20 wow fadeInUp" data-wow-delay="0.4s">
   <div class="text-center margin-20"><i class="fa {{ block.mainTitle }} fa-4x black"></i></div>
   {{ block.text }}
   <a class="more" href="#">LEARN MORE</a>
  </div>

Etc...

Unfortunately that method doesn't work since it won't count itself more than once since it is being looped outside of the code file.

I hope my explanation was sufficient of what I hope to achieve. Does anyone perhaps know the solution?

Thank you for your time.

1

The answer by Tom Bauer given to my question here should be of help.

You're not far off. You need to set a variable and count the blocks in your neo loop. Then use if statements in the loop depending on the counter variable.

The other option is you add a columnWidth dropdown field, and give them the option to choose between 2 or 3, the values are the css (2=col-sm-6, 3=col-sm-4.)

Then your code code look like:

{% block blockContent %}    
{% for block in entry.body %}
{% switch block.type.handle %}
{% case 'serviceItem' %}

<div class="{{ block.columnWidth }} margin-20 wow fadeInUp" data-wow-delay="0.4s">
  <div class="text-center margin-20"><i class="fa {{ block.mainTitle }} fa-4x black"></i></div>
  {{ block.text }}
  <a class="more" href="#">LEARN MORE</a>
</div>

{% endswitch %}
{% endfor %}
{% endblock %}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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