How to set up a Banner image and thumbnail for a category page and display it as a carousel or list on the frontend?

In website operation, adding attractive visual elements to category pages, such as banner images and thumbnails, is an important step to improve user experience and website professionalism.AnQiCMS (AnQiCMS) is an efficient and flexible content management system that fully considers these needs, allowing you to easily set and display these images for category pages.

This article will guide you on how to configure Banner images and thumbnails for category pages in Anqi CMS backend, and share practical methods for displaying them as a carousel or list in the website frontend template.

The first step: Set the Banner image and thumbnail for the category page in the background

The strength of AnQi CMS lies in its flexible content model and category management functions. To set a Banner image and thumbnail for the category page, you just need to enter the "Content Management" module of the backend:

1. Enter Category Management:Log in to the AnQi CMS backend, navigate to the "Content Management" menu, and click on "Document Category."

2. Select or create a category:In the category list, you can select an existing category to edit or click the 'Add Category' button to create a new category.

3. Edit category information:On the category editing page, in addition to filling in the basic information such as category name, category introduction, etc., you will see a 'Other Parameters' collapse area.Expand this area, and you will find the settings options for 'Banner Image' and 'Thumbnail'.

   • Banner image:This is a particularly useful feature, you can upload multiple images as the Banner of the category page.This means you can set a Banner carousel for the same category page, adding a sense of dynamics and visual impact to the page.When uploading images, it is recommended to upload images of the same size to ensure the coordination and uniformity of the front-end carousel effect.
   • Thumbnail:Thumbnail is usually used in category lists, navigation menus, or other locations requiring small-sized images, as the representative icon or preview image of the category.You can upload an image as a thumbnail for the category. Unlike the Banner image, a thumbnail usually only needs one image.

4. Save settings:After completing the image upload and selection, don't forget to click the 'OK' button at the bottom of the page to save your category settings.

By following these simple steps, you have already configured the required visual elements on the category page in the AnQi CMS backend.Let's see how we can display these images on the website front-end.

Step two: Display the Banner image and thumbnail in the front-end template.

The AnQi CMS adopts a template engine syntax similar to Django, allowing you to easily call the category information set in the background, including Banner images and thumbnails.

1. Display Banner image and thumbnail on the category detail page

When a user visits a specific category page, you may want to display a large Banner image at the top of the page or show a category thumbnail on the side. At this time, we can usecategoryDetailLabel to get the details of the current category.

Assuming you are editing the list template of categories (for example){分类模型}/list.html):

{# 首先，我们获取当前分类的详情信息 #}
{% categoryDetail currentCategory %}

{# 展示分类Banner图 (支持多张图片轮播) #}
{% if currentCategory.Images %}
<div class="category-banner-area">
    {# 这里是一个简单的图片列表，实际轮播效果通常需要前端JS库辅助实现 #}
    {% for image in currentCategory.Images %}
        <img src="{{ image }}" alt="{{ currentCategory.Title }} 分类Banner" />
    {% endfor %}
</div>
{% endif %}

{# 展示分类缩略图 (通常用于单个展示) #}
{% if currentCategory.Thumb %}
<div class="category-thumbnail">
    <img src="{{ currentCategory.Thumb }}" alt="{{ currentCategory.Title }} 分类缩略图" />
</div>
{% endif %}

{# 您也可以获取分类大图，通常与缩略图是同一张但可能尺寸更大 #}
{% if currentCategory.Logo %}
<div class="category-logo">
    <img src="{{ currentCategory.Logo }}" alt="{{ currentCategory.Title }} 分类Logo" />
</div>
{% endif %}

{# 继续展示分类名称、描述等其他信息 #}
<h1>{{ currentCategory.Title }}</h1>
<div>{{ currentCategory.Description }}</div>

{# 假设这里是该分类下的文档列表 #}
<div class="archive-list">
    {% archiveList archives with type="page" categoryId=currentCategory.Id limit="10" %}
        {% for item in archives %}
            <div>
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
                {% endif %}
                <p>{{ item.Description }}</p>
            </div>
        {% endfor %}
    {% endarchiveList %}
    {% pagination pages with show="5" %}
        {# 分页代码略 #}
    {% endpagination %}
</div>

2. Display thumbnails in the category list

If you want to display a category list on the homepage, navigation menu, or other aggregate pages of your website, and have each category with its thumbnail, we can usecategoryListInformation about looping to get multiple categories.

{# 获取所有顶级分类，或指定父分类下的子分类 #}
{% categoryList categories with moduleId="1" parentId="0" %}
<div class="category-list-section">
    {% for category in categories %}
    <div class="category-item">
        <a href="{{ category.Link }}">
            {% if category.Thumb %}
                {# 使用缩略图作为分类的代表图片 #}
                <img src="{{ category.Thumb }}" alt="{{ category.Title }}" class="category-list-thumb" />
            {% endif %}
            <h3>{{ category.Title }}</h3>
            <p>{{ category.Description }}</p>
        </a>
    </div>
    {% endfor %}
</div>
{% endcategoryList %}

Description of Banner carousel effect.

The AnQi CMS provides you with the function to upload multiple banner images in the background, and uses them in the template.currentCategory.ImagesThe array is provided to you. To achieve a real Banner carousel effect, it usually requires the use of front-end JavaScript libraries (such as Swiper.js, Owl Carousel, etc.) and the corresponding CSS styles.The Anqi CMS is responsible for providing data, while the front-end code