Картинки подкатегорий в теме Гипермаркет

category.html

    {if $category.subcategories}
        <div class="subcategories">
        {foreach $category.subcategories as $sc}
            <div class="subcategory">
                
                {if !empty($sc.image)}
                <div class="image">
                    <a href="{$sc.url}"><img src="{$wa_url}wa-data/public/shop/categories/{$sc.id}/{$sc.id}.200x200{$sc.image}" alt="{$sc.name|escape}"></a>
                </div>
                {/if}
                
                <a class="name" href="{$sc.url}">{$sc.name}</a>
            </div>
        {/foreach}
        </div>
    {/if}

И добавить в стили CSS

.subcategories .subcategory {
    display: inline-block;
    text-align: center;
    min-width: 33%;
    margin-bottom: 5px;
    padding: 5px 0;
    border: 1px solid transparent;
}
.subcategories .subcategory:hover {
    border: 1px solid #ccc;
}
.subcategories .subcategory .image {
    max-width: 300px;
    height: 200px;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: hidden;
}
.subcategories .subcategory .image a {
    line-height: 200px;
}
.subcategories .subcategory img {
    max-width: none;
    max-height: 100%;
    vertical-align: middle;
}
.subcategories .subcategory .name {
    font-weight: bold;
}