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.