AutoCMS (AutoCMS) provides us with very flexible content management capabilities, one very practical feature of which is the ability to configure and display custom banner images and thumbnails for category pages.This not only makes our website look more professional and beautiful, but also effectively improves the user experience and the efficiency of content organization.
Why does the category page need a custom Banner image and thumbnail?
Imagine if your website only has a generic banner image or no visual elements to distinguish different categories, users might find browsing dull and boring, and even hard to quickly understand the theme of each category. Customizing exclusive Banner images and thumbnails for each category can bring many benefits:
Firstly,Enhance visual appeal and brand consistency. An exquisite Banner design can quickly capture the attention of visitors, convey the core information of the category page, and maintain consistency with the overall brand image of your website. Secondly,Optimize the user navigation experience.When users see representative thumbnails, they can identify and understand different categories of content more quickly, thus making it easier for them to find the information they are interested in.This is like putting illustrative labels on each bookshelf, making it clear at a glance.Rich content display, enhance professionalism. Custom images can make your category page content more abundant, avoid the boredom of a single text list, and convey the professionalism and dedication of your website's operation to users.
The Anqi CMS takes these needs into account and provides the function to directly configure these images in category management.
Configure category banner and thumbnail in AnQiCMS backend
Configuring the Banner image and thumbnail for category is a straightforward and simple process.We just need to enter the AnQiCMS backend management interface, then find the corresponding category for editing.
- Log in to the backend and go to category management:Successfully logged in to your AnQiCMS backend, find the "Content ManagementHere will be listed all the content categories of your website.
- Edit or create a new category:You can choose to edit an existing category, or click 'Add Top Level Category' or 'Add Subcategory' to create a new category.Whether it is any operation, it will enter the editing page of classification.
- Configure banner and thumbnail:In the category editing page, scrolling down will reveal a collapsible area for 'Other Parameters'.Expand this area, and you will find the options of “Banner image” and “Thumbnail”.
- Banner image:Here you are allowed to upload multiple images.Generally, we use multiple banner images for carousel display, adding dynamic effects to category pages.Please make sure to pay attention, in order to maintain the beauty and loading speed of the page, the uploaded Banner image should be the same size and properly compressed.
- Thumbnail:This is an optional configuration option.If you wish to display a representative image of this category in other places on the website (such as the category list on the homepage, sidebar navigation, etc.), you can upload a thumbnail image here.This image is usually smaller in size and more abstract.
- Save settings:After completing the image upload and any other category information modifications, remember to click the "OK" button at the bottom of the page to save your changes.
It is worth mentioning that the "Content Settings" under the "Background Settings" of AnQi CMS also provides some global thumbnail processing options, such as automatic compression of large images, thumbnail size, and processing methods.These global settings will affect the behavior of all images when generating thumbnails, and you can adjust them according to the overall needs of the website.
Display category banner image and thumbnail in the template
It is not enough to upload images on the backend, we also need to introduce the corresponding tags in the frontend template files of the website to display these images to visitors.The AnQi CMS adopts syntax similar to Django template engine, making template creation very easy.
Generally, the template files for category pages are stored in/templatea specific location under the directory, for example{分类模型}/list.html。If you specify a custom template for a category, modify the corresponding custom template file.
1. Display the current category's banner image and thumbnail:
On the category page (for examplearticle/list.htmlorproduct/list.html), we can usecategoryDetailtags to get detailed information about the current category, including the Banner image and thumbnail we just uploaded.
If you want to display a Banner image at the top of the category page and a thumbnail at some location on the page, you can write the template code like this:
{# 获取当前分类的Banner组图，并取出第一张作为主Banner #}
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
{# 假设只需要显示第一张Banner图 #}
{% set mainBanner = categoryImages[0] %}
<div class="category-banner" style="background-image: url({{mainBanner}});">
{# 这里可以放置分类标题等信息 #}
<h1>{% categoryDetail with name="Title" %}</h1>
</div>
{% endif %}
{# 获取当前分类的缩略图，并显示在页面的其他位置 #}
{% categoryDetail categoryThumb with name="Thumb" %}
{% if categoryThumb %}
<div class="category-thumbnail">
<img src="{{categoryThumb}}" alt="{% categoryDetail with name="Title" %}" />
</div>
{% endif %}
In this code block:
{% categoryDetail categoryImages with name="Images" %}用来获取分类上传的所有Banner图片列表。categoryImages是一个数组，我们可以通过categoryImages[0].{% categoryDetail categoryThumb with name="Thumb" %}则直接获取我们上传的缩略图地址。alt="{% categoryDetail with name="Title" %}"It is a good SEO practice, it uses the category name as the image alt text, improving the accessibility and search engine friendliness of the image.
If you only upload one Banner image in the "Other Parameters" and want to use it as the main visual element, you can also use it directlyLogoField, it usually points to the first image in category settings or the main representative image:
{# 直接获取分类主要图片（Logo）作为Banner #}
{% categoryDetail categoryLogo with name="Logo" %}
{% if categoryLogo %}
<div class="category-main-banner">
<img src="{{categoryLogo}}" alt="{% categoryDetail with name="Title" %}" />
</div>
{% endif %}
2. Display category thumbnails on other pages:
Sometimes, we not only need to display images on the category page, but we may also display the names of subcategories and corresponding thumbnails on the homepage, sidebar, or parent category page.categoryListTags come into play.
For example, display all top-level categories and their thumbnails on the homepage:
`twig
{% categoryList categories with moduleId="1"