How to set up category Banner image and thumbnail in AnQi CMS and apply it to the front-end display?

As an experienced website operations expert, I am happy to give you a detailed explanation of the settings and front-end display application of the category banner image and thumbnail in Anqi CMS.In today's increasingly focus on visual experience, equipping the website's category page with eye-catching banners and concise thumbnails is undoubtedly a key step to improve user experience and optimize page layout.AnQi CMS is well-versed in this, providing intuitive and powerful features to easily achieve this goal.

AnQi CMS: Easily master the category Banner image and thumbnail, creating a visual feast

In AnQi CMS, whether it is article classification, product classification, or classification under other custom content models, we can set unique visual elements for them individually - category banner image and thumbnail.This not only makes your website more visually rich and professional, but also helps users quickly identify the content theme, greatly improving browsing efficiency and user experience.

1. Backend operation: Setting the category Banner image and thumbnail

First, let's understand how to configure these images for your categories in the Anqi CMS backend management interface.The entire process is designed to be very user-friendly, even for users who are new to it.

After you log in to the AnQi CMS backend, please find and click on "Content Management" in the left navigation bar, and then select "Document Category".Here, you will see all the categories created.You can edit an existing category or click 'Add New Category' to create a new one.

After entering the editing or creation page of the category, you will find that the form contains common information such as "Category Name", "Category Description", etc.Please scroll down the page to find the collapsible area labeled "Other Parameters" and expand it.This is the treasure land for setting up category visual elements.

1. Set Category Banner Image:In the "Other Parameters" area, you will see an option called "Banner Image".This field is used to upload images that will be displayed in large size at the top of the category page or in a specific area.AnQi CMS supports uploading multiple images very considerately, which means you can set a beautiful Banner carousel for a single category, adding dynamic feeling and interactivity to the page.When uploading images, it is a practical suggestion to try and keep the dimensions and proportions of all Banner images consistent, so that the effect can be neat and beautiful during the front-end carousel, and avoid the appearance of image distortion or layout jumping.You can select an image from the media library or upload a new one directly.

2. Set Category Thumbnail:Immediately below the "Banner image", there is the "thumbnail" setting.Different from the grandeur of the banner image, thumbnails are usually used in category list pages, recommendation modules, or sidebars, etc., where small-sized images are needed to summarize the theme of the category.It usually appears on the page in a small and exquisite form, helping users quickly find their target among many categories.Although not every category requires setting a thumbnail, if your frontend design needs to display category images in these scenarios, this is where you upload it.Prepare a high-quality thumbnail that represents the content of each category, which will help enhance the professionalism and visual consistency of the entire website.

After uploading and selecting the image, please make sure to click the "OK" or "Save" button at the bottom of the page to ensure that all your changes have been successfully saved to the system.

Second, front-end display: apply the image to the template

After the background settings are completed, the next step is how to make these carefully prepared images beautifully appear on your website's front-end template. Anqi CMS provides a powerful and flexible template tag system, especially the "category detail tag" (categoryDetailIt is the key to calling classification-related information.

1. Display the classification banner image (multiple images carousel):To display the Banner group image you have set for the category, you need to usecategoryDetaillabel'sImagesThe field returns an array of image URLs, which is very suitable for creating image sliders or multi-image displays.

Assuming you are editing the list page or detail page template for categories (for example{模型table}/list.htmlor{模型table}/detail.html），can be called directly in the following way：

{# 假设您正在分类页面，可以直接获取当前分类的Images #}
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %} {# 检查是否有Banner图片上传 #}
<div class="category-banner-carousel">
    {% for image_url in categoryImages %}
    <img src="{{ image_url }}" alt="{% categoryDetail with name='Title' %} Banner" class="img-fluid">
    {% endfor %}
</div>
{% endif %}

This code will traversecategoryImageseach image URL in the array and generate the corresponding<img>Label. You can wrap a carousel component (such as Swiper, Owl Carousel, etc.) around it to easily achieve a Banner carousel effect.

If you only need to obtain the first Banner image as the main image of the category, for example, to display only one large image in a certain area of the category list page, you can handle it like this:

{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set firstBanner = bannerImages[0] %} {# 获取数组中的第一张图片 #}
<img src="{{ firstBanner }}" alt="{% categoryDetail with name='Title' %} 主图" class="img-fluid">
{% endif %}

By{% set firstBanner = bannerImages[0] %}We cleverly extracted the first image from the image array and used it for display.

2. Display category thumbnails:As for the category thumbnail, it is usually a single image, which can be called more directly, just usingcategoryDetaillabel'sThumbthe field.

In your template, whether it is to display related categories in the category list, the home page recommendation module, or the article detail page, you can call the thumbnail like this:

{# 在需要展示缩略图的任何地方 #}
{% categoryDetail categoryThumb with name="Thumb" %}
{% if categoryThumb %} {# 检查是否有缩略图上传 #}
<img src="{{ categoryThumb }}" alt="{% categoryDetail with name='Title' %} 缩略图" class="category-thumb">
{% endif %}

Here, we usecategoryDetailThe tag fetched the thumbnail URL of the current category and embedded it into<img>the tag. To ensure the robustness of page rendering, we usually use{% if ... %}Check if the image exists to avoid invalid links when the image is not set.

It should be noted that,categoryDetailThe tag will default to fetching the current