Listing sub-categories within a category

A category may have any number of children, but for the sake of usability, we assume the number of categories is small compared to the number of product.

You gain access to a Category's children by accessing the category.children() method.

<ul>
<?ev for (var subcategory of category.children()) { ?>
    <li>
        <a href="{{ subcategory.url }}">
            <!-- Title and Description -->
            <div class="subcategory-blurb">
                <strong>{{ subcategory.title }}</strong><br>
                {{ subcategory.description.nl2br() }}
            </div>
        </a>
    </li>
<?ev } ?>
</ul>

Showing sub-category thumbnails

A Category may have one thumbnail image (Category.thumbnail). This is the image you should display for each respective sub-category. The <ev:img> tag dramatically simplifies a variety of operations:

  • Image resizing within a bounding area
  • Image cropping
  • Automatic utilisation of a CDN

Whilst your theme design may have an aspect ratio preference, many merchants obtain photos from a number of sources with varying image dimensions. Consequently, image cropping is generally undesirable and we recommend resizing images sympathetically within a bounding area. Fortunately <ev:img> makes this ridiculously easy.

<ul>
<?ev for (var subcategory of category.children()) { ?>
    <li>
        <a href="{{ subcategory.url }}">
        
            <!-- Thumbnail Image -->
            <div class="subcategory-image">
                <ev:img src="{{ subcategory.thumbnail }}" width="400" maxheight="300" />
            </div>
            
            <!-- Title and Description -->
            <div class="subcategory-blurb">
                <strong>{{ subcategory.title }}</strong><br>
                {{ subcategory.description.nl2br() }}
            </div>
        </a>
    </li>
<?ev } ?>
</ul>

In the example above we're stipulating our image must fit within a maximum bounding area of 400×300 pixels (a standard aspect ratio of 4:3). If the image is larger than this it will be resized accordingly without being cropped. Neither the width nor height attribute will be rendered within your html, allowing you to gracefully handle images responsively within your CSS.

How do I get a CDN URI?

This is automated by Evance. For more information on how this is rendered take a look at the <ev:img> documentation.

Learn more about <ev:img>