How to configure and display custom Banner images and thumbnails for the AnQiCMS category page?

AnQiCMS (AnQiCMS) provides us with very flexible content management capabilities, one very practical feature of which is the ability to configure and display custom banners 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 had a generic banner image or no visual elements to differentiate between different categories, users might find the browsing experience dull and even difficult to quickly understand the theme of each category. Customizing a dedicated banner image and thumbnail for each category can bring many benefits:

first, Enhance visual appeal and brand consistency. A beautifully designed banner can quickly catch the visitor's attention, convey the core information of the category page, and maintain consistency with the overall brand image of your website. Secondly,Improve user navigation experienceWhen users see representative thumbnails, they can more quickly identify and understand the content of different categories, thereby more easily finding the information they are interested in.This is like putting illustrations on each bookshelf, making it easy to see at a glance. Moreover,Enrich content display, enhance professionalism. Custom images can make your category page content more full, avoid the dullness of a single text list, and convey the professionalism and care of the website's operation.

A security CMS has considered these needs and provided the function of directly configuring these images in the category management.

Configure category Banner image and thumbnail in AnQiCMS backend

To configure the Banner image and thumbnail for categories is a straightforward and simple process.We just need to enter the AnQiCMS backend management interface, and then find the corresponding category to edit.

1. Log in to the backend and go to category management:Successfully logged into your AnQiCMS backend, find the "Content Management" menu in the left navigation bar, click to expand, and then select "Document Category."}Here will be listed all the content categories of your website.
2. 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.No matter what operation is performed, it will enter the category editing page.
3. Configure Banner image and thumbnail:In the category editing page, scrolling down will reveal a collapsed area for 'Other parameters'.Expand this area, and you will find the 'Banner Image' and 'Thumbnail' options.
   • Banner image:Here you are allowed to upload multiple images. Usually, we would use multiple Banner images for carousel display, adding dynamic effects to the category page.Please note that in order to maintain the beauty and loading speed of the page, the dimensions of the uploaded Banner image should be consistent and properly compressed.
   • Thumbnail:This is an optional configuration item. If you want 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 here.This image is usually smaller in size and more abstract.
4. 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 AnQi CMS also provides some global thumbnail processing options under "Content Settings" in the "Backend Settings", 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 website's frontend template files to display these images to visitors.The AnQi CMS adopts a syntax similar to the Django template engine, making template creation very easy.

Generally, the template files for category pages are stored in/templatea specific location in the directory, for example{分类模型}/list.html. If you have specified a custom template for a category, then 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 usecategoryDetailtag to get the details of the current category, including the banner image and thumbnail we just uploaded.

Assuming 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" %}Used to get the list of all Banner images uploaded in categories.categoryImagesIt is an array, we can access it through.categoryImages[0]to obtain the first image.
• {% categoryDetail categoryThumb with name="Thumb" %}Then we can directly get the thumbnail address we uploaded.
• alt="{% categoryDetail with name="Title" %}"It is a good SEO practice, it uses the category name as the alternative text for the image, 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 directlyLogoThe field usually points to the first image or main representative image of the category settings:

{# 直接获取分类主要图片（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 may also display the names of subcategories and their corresponding thumbnails on the homepage, sidebar, or parent category page. At this time,categoryListthe tag comes into play.

For example, display all top-level categories and their thumbnails on the homepage:

`twig

{% categoryList categories with moduleId="1"