How to set an independent Banner image or thumbnail to be displayed on the front page for document classification?

In AnQiCMS, set an independent banner image or thumbnail for document categories, which can greatly enhance the visual appeal and user experience of the website, making each category have a unique brand identity.Actually, AnQiCMS provides very intuitive and flexible features in this aspect. You can make these custom images beautifully appear on the front page with just a few simple settings.

1. Configure exclusive visual elements for the category in the backend

Firstly, we need to upload and set these unique images for your document categories in the AnQiCMS backend.

  1. Go to the document category management:Log in to the AnQiCMS backend, find 'Content Management' in the left navigation bar, click to expand, and select 'Document Category'.
  2. Select or create a category:In the document category list, you can select an existing category to edit, or click 'Add Category' to create a new category.After entering the category editing page, you will see a detailed settings form.
  3. Upload Banner Image:In the 'Other Parameters' section of the category settings page, you will find the 'Banner Image' option. This is where you set the exclusive top image for this category.
    • Banner images are typically used at the top of category pages as eye-catching background images, sliders, or main visual images.
    • You can upload multiple images, and the system will treat them as a set of slideshows.In order to maintain the aesthetic and consistency of the front-end display, it is strongly recommended that you upload images with the same size or proportional harmony.
  4. Upload thumbnail:Right below the "Banner Image
    • Thumbnail is usually a small preview image displayed in list pages, navigation menus, or content cards, serving as a visual identifier.
    • It is not mandatory, but when it is necessary to display a visual preview for categorization (such as displaying a list of popular categories on the homepage), thumbnails can provide clear visual guidance, greatly enhancing the user experience.
  5. Save settings:After completing the image upload and any other category information, click the 'OK' or 'Save' button at the bottom of the page, your settings will take effect.

Through these simple backend operations, you have already configured unique visual resources for the category. Next, we need to understand how to call these images in the template files of the website's frontend.

Two, Template Call: Let the custom image shine on the front stage

After setting up the images in the background, the next step is to display them on the front page.This requires us to use the specific tags provided by AnQiCMS in the template file.The template tag system of AnQiCMS is powerful and flexible, and it can easily achieve both single category pages and category lists.

1. Call the image on the single category page (e.g., the detail page of an article category)

When you visit a specific category page, you can usecategoryDetailtags to get the details of the category, including the Banner image and thumbnail that we just set.

{# 假设这是您的分类详情模板文件，如 article/list.html 或 product/list.html #}

{# 获取当前分类的完整数据对象 #}
{% categoryDetail currentCategory %}

{# 显示分类的名称作为页面标题 #}
<h1>{{ currentCategory.Title }}</h1>

{# 显示分类的描述 #}
<p>{{ currentCategory.Description }}</p>

{# 调用分类的 Logo 图（通常是主图或大图） #}
{% if currentCategory.Logo %}
    <img src="{{ currentCategory.Logo }}" alt="{{ currentCategory.Title }} 主图" class="category-main-logo">
{% endif %}

{# 调用分类的 Banner 组图，可用于轮播、背景等场景 #}
{% if currentCategory.Images %}
    <div class="category-banner-slider">
        {% for image in currentCategory.Images %}
            <img src="{{ image }}" alt="{{ currentCategory.Title }} Banner-{{ forloop.Counter }}" class="slider-item">
        {% endfor %}
    </div>
{% endif %}

{# 调用分类的缩略图（通常是小图，如果 Logo 已作为大图，这里可能不显示） #}
{% if currentCategory.Thumb %}
    <img src="{{ currentCategory.Thumb }}" alt="{{ currentCategory.Title }} 缩略图" class="category-small-thumb">
{% endif %}

In the above code, we first obtain{% categoryDetail currentCategory %}all the data of the current category and assign it tocurrentCategorythe variable. After that, you can{{ currentCategory.Logo }}/{{ currentCategory.Images }}and{{ currentCategory.Thumb }}Retrieve and display the corresponding image address. To avoid missing images causing page display exceptions, we also added{% if ... %}judgment, the corresponding image is only rendered when the image exists<img>Label.

2. In the category list page, call images (for example: display multiple category cards on the home page)

If you want to display multiple categories (such as category modules on the homepage, or a list of subcategories under a parent category) on a page and show thumbnails or logos for each category,categoryListTags come into play.

[en] Assuming you are on the homepage or other aggregation pages, and you need to list multiple categories and display their thumbnails # Here we take the top-level categories under the article model as an example, and you can adjust moduleId and parentId according to your needs {% categoryList topCategories with moduleId=“1” parentId=“0” %}

{%