Add a full-width category banner, providing a way to visually identify the category.
Before you start this tweak, it's a good idea to run through our preparation checklist below:
- Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
- Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
- Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
Step 1: Upload a category banner
The first step is to upload a test category banner. The best practice is to use "alt image 1", as the main image is often used for links to category pages and generally used in a square ratio (not so much a banner). You can find instructions on how to add a banner in this article.
Step 2: Add the code to the template
Paste the following code into the category template where you would like this element to appear:
[%set [@has_categorybanner@]%][%asset_url type:'content' thumb:'alt_1' id:'[@content_id@]' /%][%/set%] [%if [@has_categorybanner@]%] <p><img src="[%asset_url type:'content' thumb:'alt_1' id:'[@content_id@]'/%]" class="img-fluid img-responsive"/></p> [%/if%]
[@has_categorybanner@] ensures that if the image asset doesn't exist, it displays nothing. Alternatively, this variable can be dropped and the default image can be used to show a default "empty image" such as:
<p><img src="[%asset_url type:'content' thumb:'alt_1' id:'[@content_id@]' default:'/assets/themes/skeletal/no-category.jpg'/%]" class="img-fluid img-responsive"/></p>