Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-04T17:48:54.703Z
Answers.LastActivityDate: 2018-02-04T17:48:54.703Z
Answers.UserDisplayName: lucaslink
Body: <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>
  
Tags: <loop><children><blocks><plugin-neo>
Title: Counting included child blocks in the Neo plugin
ThreadText: # Counting included child blocks in the Neo plugin
  
  (Asked by: username_0 on 2017-10-10)
  
  In the [Neo](https://github.com/benjamminf/craft-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.
  
  **Tags:** loop, children, blocks, plugin-neo
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2018-02-04. Score: 1
  
  The answer by [Tom Bauer](https://craftcms.stackexchange.com/users/3535/tom-bauer) given to my question [here](https://craftcms.stackexchange.com/a/16999/5307) 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 %}
  
  ```
  
  
  ---
  
  