Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Subcategories on category page with image & link

A list of subcategories of the current category

Wireframe

Sub categories

Code implementation

Add the following styles to your stylesheet so they clear correctly:

<style>

/*Viewport xs*/
@media (max-width: 768px) {
    .subcategories.row > div:nth-child(3n + 1) {
        clear:both;
    }
}

/*viewport sm*/
@media (min-width: 768px) and (max-width: 992px) {
    .subcategories.row > div:nth-child(4n + 1) {
        clear:both;
    }
}

/*viewport md and lg*/
@media (min-width: 993px) {
    .subcategories.row > div:nth-child(6n + 1) {
        clear:both;
    }
}
</style>

Then add the following code to the top of your category page:

[%content_menu content_type:'category' start_category:'[@content_id@]' sortby:'sortorder' show_empty:'1'%]
    [%param header%]
        <div class="row subcategories">
    [%/param%]
    [%param *level_1%]
        <div class="col-xs-4 col-sm-3 col-md-2 text-center">
            <p><img src="[%ASSET_URL type:'content' id:'[@content_id@]' default:'[@config:imageurl@]/na.gif'/%]" class="img-responsive"></p>
            <p><a href="[@url@]">[@name@]</a></p>
        </div>
    [%/param%]
    [%param footer%]
        </div>
    [%/param%]
[%/content_menu%]

1 related articles found: