<p>The answer by <a href="https://craftcms.stackexchange.com/users/3535/tom-bauer">Tom Bauer </a>given to my question <a href="https://craftcms.stackexchange.com/a/16999/5307">here</a> should be of help.</p>

<p>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. </p>

<p>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.)</p>

<p>Then your code code look like:</p>

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

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

{% endswitch %}
{% endfor %}
{% endblock %}
</code></pre>

CC BY-SA 3.0
2018-02-04T17:48:54.703Z
2018-02-04T17:48:54.703Z
lucaslink
<p>In the <a href="https://github.com/benjamminf/craft-neo" rel="nofollow noreferrer">Neo</a> plugin, I've made a block that has the option to add 3 child blocks underneath it.</p>

<p>This is the code from the parent block:</p>

<pre><code>{% extends 'neo/default' %}
{% block blockContent %}

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

   &lt;div class="row margin-60"&gt;

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

   &lt;/div&gt;

 &lt;/div&gt;
&lt;/section&gt;
{% endblock %}
</code></pre>

<p>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.</p>

<p>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'.</p>

<p>Okay so this is the code for the child block:</p>

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

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

{% endswitch %}
{% endfor %}
{% endblock %}
</code></pre>

<p>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:</p>

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

 {% elseif numberOfItems == 2 %}

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

<p>Etc...</p>

<p>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. </p>

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

<p>Thank you for your time.</p>

<loop><children><blocks><plugin-neo>
Counting included child blocks in the Neo plugin
# Counting included child blocks in the Neo plugin

(Asked by: username_0 on 2017-10-10)

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 %}


 
   
     
       {{ block.mainTitle }}
     
   

   

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

   

 

{% 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' %}


  
  {{ block.text }}
  LEARN MORE


{% 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 %}
  
   
   {{ block.text }}
   LEARN MORE
  

 {% elseif numberOfItems == 2 %}

  
   
   {{ block.text }}
   LEARN MORE
  

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.

**Tags:** loop, children, blocks, plugin-neo


---

## 1 answers

### Answer by username_1 on 2018-02-04. Score: 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' %}


  
  {{ block.text }}
  LEARN MORE


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


---

