Answers.Body: <p>It's hard to figure out exactly what your trying to do, but I can see a few potential problems.</p>
  
  <ul>
  <li>No need for the 'num' variable, instead use <a href="https://craftcms.stackexchange.com/questions/7168/displaying-sub-categories-on-category-page">loop.index</a> (or <a href="https://craftcms.stackexchange.com/questions/7168/displaying-sub-categories-on-category-page">loop.index0</a> for a zero indexed array); although I don't think you need it at all in this case.</li>
  <li><code>nth()</code> is currently returning the 'nth' offset of all assets that are related to all children collectively (thus the strange results). I would guess that you want the asset(s) related to the child category in the current loop. I would also guess that the asset(s) are defined in an assets field in the categories field layout, in which case you can get the asset(s) from the field directly, rather than using <code>.relatedto(child)</code>.</li>
  </ul>
  
  <p>Try the following — without understanding your structure entirely, it might at least be a bit closer to what you're looking for.</p>
  
  <pre><code>{% if category.hasDescendants() %}
  
      {% for childCategory in category.getDescendants() %}
  
          &lt;div id="teaser" class="row"&gt;
  
              &lt;div id="teaser_image" class="columns left small-12 medium-6"&gt;
  
                  {% set asset = childCategory.myAssetsFieldHandle.first %}
                  {% if asset %}
                      &lt;img src="{{ asset.url }}" alt="{{ asset.title }}"&gt;
                  {% endif %}
  
              &lt;/div&gt;     
  
              &lt;div id="teaser_text" class="columns right small-12 medium-6"&gt;
                  &lt;h2&gt;{{ childCategory.title }}&lt;/h2&gt;
                  &lt;p&gt;{{ childCategory.description }}&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      {% endfor %}
  
  {% endif %}
  
  &lt;div id="teaser" class="row"&gt;
  
      &lt;div id="teaser_image" class="columns left small-12 medium-6"&gt;
          &lt;img src="/images/moses-har-sinai.jpg" alt=""&gt;
      &lt;/div&gt;
  
      &lt;div id="teaser_text" class="columns right small-12 medium-6"&gt;
  
          {% set entries = craft.entries.relatedTo(category) %}
          {% for entry in entries %}
              &lt;h2&gt;{{ entry.title }}&lt;/h2&gt;
              &lt;p&gt;{{ entry.description }}&lt;/p&gt;
              &lt;a class="button small" href="{{ entry.url }}"&gt;Learn more&lt;/a&gt;
          {% endfor %}
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Note: this is assuming that you want to show the subcategories and then the entries related to the main category. If not, then I misinterpreted your question and you will want to reconfigure this a bit, but the principles should be the same.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-16T09:24:23.777Z
Answers.Text: That did it - thanks.  Now, just to make sure I understand why it worked, what exactly is the 'first' command that you chained to the assets field handle getting the first off?  If I understand correctly, it is getting the first image of the particular category that we are looping through right now -- is that right?
Answers.UserDisplayName: Moshe
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-16T15:43:13.127Z
Answers.Text: Asset fields always return an array of assets, even if only one is defined. Using 'first' will grab the first image in the array; otherwise you would need to loop through the returned assets.
Answers.UserDisplayName: Douglas McDonald
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-16T16:00:16.493Z
Answers.Text: By the way, It's also probably better to use '[hasDescendants()](https://buildwithcraft.com/classreference/models/BaseElementModel#hasDescendants-detail)' and '[getDescendants()](https://buildwithcraft.com/classreference/models/BaseElementModel#getDescendants-detail)' (or just '[descendants](https://buildwithcraft.com/classreference/models/BaseElementModel#descendants-detail)') as some uses of `getChildren` are being deprecated.
Answers.UserDisplayName: Douglas McDonald
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-18T21:46:06.313Z
Answers.Text: Thanks.  I'll look into those options and update the code.
Answers.UserDisplayName: Moshe
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-16T08:25:52.753Z
Answers.LastActivityDate: 2015-02-16T15:56:38.070Z
Answers.LastEditDate: 2017-04-13T12:50:59.930Z
Answers.UserDisplayName: Douglas McDonald
Body: <p>First, a disclamer -- I am new to Craft CMS.  </p>
  
  <p>With that said, I am trying to create a category page whereby the page will show the title, description and image of the sub-categories of the current category.  It will do this so long as there are still sub-categories.  When there are no longer sub-categories it will then show the entries for that category.  </p>
  
  <p>I think I have figured out the code (see below), but I'm having a problem showing the images.  On one level the images show fine, but on a lower level the images are being shown in reverse order.  I can't figure out why.  </p>
  
  <p>Here is the code:</p>
  
  <pre><code>{% set num = 0 %}            
  {% set children = category.getChildren() %}
          {% if children|length %}
           {% for child in children %}
  
          &lt;div id="teaser" class="row"&gt;
              &lt;div id="teaser_image" class="columns left small-12 medium-6"&gt;
  
  
          {% set assets = craft.assets.relatedTo(children).nth(num) %}           
              {% if assets %}
                  &lt;img src="{{ assets.url }}" alt="{{ assets.title }}"&gt;
              {% endif %}
  
              &lt;/div&gt;     
  
              &lt;div id="teaser_text" class="columns right small-12 medium-6"&gt;
                  &lt;h2&gt;{{ child.title }}&lt;/h2&gt;
                  &lt;p&gt;{{ child.description }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          {% set num = num + 1 %}
          {% endfor %}
  
  
              {% else %}    
              &lt;div id="teaser" class="row"&gt;
                  &lt;div id="teaser_image" class="columns left small-12 medium-6"&gt;
                          &lt;img src="/images/moses-har-sinai.jpg" alt=""&gt;
                  &lt;/div&gt;
  
                  &lt;div id="teaser_text" class="columns right small-12 medium-6"&gt;
                  {% set entries = craft.entries.relatedTo(category).level(1) %}
                  {% for entry in entries %}
                      &lt;h2&gt;{{ entry.title }}&lt;/h2&gt;
                      &lt;p&gt;{{ entry.description }}&lt;/p&gt;
                  &lt;a class="button small" href="{{ entry.url }}"&gt;Learn more&lt;/a&gt;
                  {% endfor %}
  
                  &lt;/div&gt;
              &lt;/div&gt;
          {% endif %} 
  </code></pre>
  
  <p>Now, on the category page:  /topics/life/ the images are associated with the proper category.</p>
  
  <p>But on the category page:  topics/life/cells, the order is reversed.  The first category displays the image for the last category and the last category dispalys the image for the first category.  Why is that and what can I do to fix it?</p>
  
  <p>Thanks in advance for any help you can offer.</p>
  
  <p>P.S.  Please feel free to let me know if there is a better way to code what I'm trying to do.</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-08-18T16:11:18.870Z
Comments.Text: Maybe show a wireframe of what you expect the output to be?
Comments.UserDisplayName: PKHunter
Tags: <assets><categories><image>
Title: Displaying Sub Categories on Category Page
ThreadText: # Displaying Sub Categories on Category Page
  
  (Asked by: username_0 on 2015-02-16)
  
  First, a disclamer -- I am new to Craft CMS.
  
  With that said, I am trying to create a category page whereby the page will show the title, description and image of the sub-categories of the current category. It will do this so long as there are still sub-categories. When there are no longer sub-categories it will then show the entries for that category.
  
  I think I have figured out the code (see below), but I'm having a problem showing the images. On one level the images show fine, but on a lower level the images are being shown in reverse order. I can't figure out why.
  
  Here is the code:
  
  ```
  {% set num = 0 %}            
  {% set children = category.getChildren() %}
          {% if children|length %}
           {% for child in children %}
  
          <div id="teaser" class="row">
              <div id="teaser_image" class="columns left small-12 medium-6">
  
          {% set assets = craft.assets.relatedTo(children).nth(num) %}           
              {% if assets %}
                  <img src="{{ assets.url }}" alt="{{ assets.title }}">
              {% endif %}
  
              </div>     
  
              <div id="teaser_text" class="columns right small-12 medium-6">
                  <h2>{{ child.title }}</h2>
                  <p>{{ child.description }}</p>
              </div>
          </div>
          {% set num = num + 1 %}
          {% endfor %}
  
              {% else %}    
              <div id="teaser" class="row">
                  <div id="teaser_image" class="columns left small-12 medium-6">
                          <img src="/images/moses-har-sinai.jpg" alt="">
                  </div>
  
                  <div id="teaser_text" class="columns right small-12 medium-6">
                  {% set entries = craft.entries.relatedTo(category).level(1) %}
                  {% for entry in entries %}
                      <h2>{{ entry.title }}</h2>
                      <p>{{ entry.description }}</p>
                  <a class="button small" href="{{ entry.url }}">Learn more</a>
                  {% endfor %}
  
                  </div>
              </div>
          {% endif %} 
  
  ```
  
  Now, on the category page: /topics/life/ the images are associated with the proper category.
  
  But on the category page: topics/life/cells, the order is reversed. The first category displays the image for the last category and the last category dispalys the image for the first category. Why is that and what can I do to fix it?
  
  Thanks in advance for any help you can offer.
  
  P.S. Please feel free to let me know if there is a better way to code what I'm trying to do.
  
  **Tags:** assets, categories, image
  
  > **Comments:**
  > **username_1**: Maybe show a wireframe of what you expect the output to be?  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2015-02-16. Score: 3 | Accepted answer
  
  It's hard to figure out exactly what your trying to do, but I can see a few potential problems.
  
  * No need for the 'num' variable, instead use [loop.index](https://craftcms.stackexchange.com/questions/7168/displaying-sub-categories-on-category-page) (or [loop.index0](https://craftcms.stackexchange.com/questions/7168/displaying-sub-categories-on-category-page) for a zero indexed array); although I don't think you need it at all in this case.
  * `nth()` is currently returning the 'nth' offset of all assets that are related to all children collectively (thus the strange results). I would guess that you want the asset(s) related to the child category in the current loop. I would also guess that the asset(s) are defined in an assets field in the categories field layout, in which case you can get the asset(s) from the field directly, rather than using `.relatedto(child)`.
  
  Try the following — without understanding your structure entirely, it might at least be a bit closer to what you're looking for.
  
  ```
  {% if category.hasDescendants() %}
  
      {% for childCategory in category.getDescendants() %}
  
          <div id="teaser" class="row">
  
              <div id="teaser_image" class="columns left small-12 medium-6">
  
                  {% set asset = childCategory.myAssetsFieldHandle.first %}
                  {% if asset %}
                      <img src="{{ asset.url }}" alt="{{ asset.title }}">
                  {% endif %}
  
              </div>     
  
              <div id="teaser_text" class="columns right small-12 medium-6">
                  <h2>{{ childCategory.title }}</h2>
                  <p>{{ childCategory.description }}</p>
              </div>
  
          </div>
  
      {% endfor %}
  
  {% endif %}
  
  <div id="teaser" class="row">
  
      <div id="teaser_image" class="columns left small-12 medium-6">
          <img src="/images/moses-har-sinai.jpg" alt="">
      </div>
  
      <div id="teaser_text" class="columns right small-12 medium-6">
  
          {% set entries = craft.entries.relatedTo(category) %}
          {% for entry in entries %}
              <h2>{{ entry.title }}</h2>
              <p>{{ entry.description }}</p>
              <a class="button small" href="{{ entry.url }}">Learn more</a>
          {% endfor %}
  
      </div>
  
  </div>
  
  ```
  
  Note: this is assuming that you want to show the subcategories and then the entries related to the main category. If not, then I misinterpreted your question and you will want to reconfigure this a bit, but the principles should be the same.
  
  > **Comments:**
  > **username_0**: That did it - thanks.  Now, just to make sure I understand why it worked, what exactly is the 'first' command that you chained to the assets field handle getting the first off?  If I understand correctly, it is getting the first image of the particular category that we are looping through right now -- is that right?  
  > **username_2**: Asset fields always return an array of assets, even if only one is defined. Using 'first' will grab the first image in the array; otherwise you would need to loop through the returned assets.  
  > **username_2**: By the way, It's also probably better to use '[hasDescendants()](https://buildwithcraft.com/classreference/models/BaseElementModel#hasDescendants-detail)' and '[getDescendants()](https://buildwithcraft.com/classreference/models/BaseElementModel#getDescendants-detail)' (or just '[descendants](https://buildwithcraft.com/classreference/models/BaseElementModel#descendants-detail)') as some uses of `getChildren` are being deprecated.  
  > **username_0**: Thanks.  I'll look into those options and update the code.  
  
  ---
  
  