Tweak Library

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 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:

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

Step 2. Create a new category thumb template

Create a new template under /assets/themes/THEME-NAME/list/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@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/param%][%/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