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

Category Images

Top level category images, for those who like to browse in a more visual way.

Industries

  • Bicycles
  • Auto Parts
  • Computers & Electronics
  • Fitness & Supplements
  • Furniture & Homewares
  • Health & Beauty
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Gifts
  • Toys & Games
  • Jewellery & Accessories
  • Animal & Pet Care
  • Arts & Crafts
  • Events & Party Supplies
  • Books & Stationery
  • Food & Beverages

Wireframe

Category Images

Coding Instructions

Step 1. Add the category thumb_list code into the home page template

Open the home page template:

/assets/themes/THEME-NAME/cms/home.template.html

Paste the following code into the template:

[%thumb_list type:'content' content_type:'category' template:'category' limit:'24' sortby:'name, sortorder'%]
    [%param *header%]
        <hr/>
        <h2 class="text-center">Our Categories</h2>
        <div class="row category-images">
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
[%/thumb_list%]

Step 2. Create a new category thumb template

Create a new template under /assets/themes/THEME-NAME/thumbs/content called "category.template.html", and paste the following code into it:

<div class="col-xs-6 col-sm-3 col-md-2">
    <a href="[@URL@]"><img src="[%ASSET_URL type:'content' id:'[@content_id@]' default:'[@config:imageurl@]/pixel.gif'%][%/ASSET_URL%]" alt="[@content_name@]"/></a>
</div>

Additional Useful Steps

To add CSS that re-sizes and vertically-aligns each category image within its container, paste the following code into /httpdocs/assets/themes/theme_name/css/style.css

.category-images img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    object-position: center;
}

Final Result

Category Images Final Result