How to set up independent Banner images or thumbnails for document categories to be displayed on the front page?

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.In fact, AnQiCMS provides very intuitive and flexible features in this aspect, you can easily make these custom images beautifully appear on the front page with just a few steps.

1. Configure exclusive visual elements for categories in the background

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

  1. Enter document category management:Log in to the AnQiCMS backend, find "Content Management" in the left navigation bar, expand it, 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 banner image for this category.
    • The banner image is usually used at the top of the category page, as an eye-catching background image, carousel image, or main visual image.
    • You can upload multiple images, 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 of the same size or proportional harmony.
  4. Upload thumbnail:Below the "Banner Image", you will see the "Thumbnail" option.
    • Thumbnail is usually a small preview image displayed in a list page, navigation menu, or content card, serving as a visual identifier.
    • It is not mandatory, but when it is necessary to display visual previews for classification (such as displaying popular category lists on the homepage), thumbnails can provide clear visual guidance and greatly enhance the user experience.
  5. Save settings:After completing the upload of the image and filling out any other category information, click the 'OK' or 'Save' button at the bottom of the page, your settings will take effect.

Through these simple background 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.

Second, template call: Let the custom image shine on the front page

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.AnQiCMS' template tag system is powerful and flexible, it can easily realize both individual category pages and category lists.

1. Call the image on a single category page (for example, the detail page of an article category)

When you visit a specific category page, you can usecategoryDetailtags to get detailed information about the category, including the Banner image and thumbnail that we have just set up.

{# 假设这是您的分类详情模板文件，如 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 obtained the article list through{% categoryDetail currentCategory %}Retrieved all data from the current category and assigned it tocurrentCategorythe variable. After that, you can use{{ currentCategory.Logo }}/{{ currentCategory.Images }}and{{ currentCategory.Thumb }}To retrieve and display the corresponding image address. To avoid the page displaying abnormally due to missing images, we also added{% if ... %}judgment, only when the image exists will the corresponding one be rendered<img>.

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

If you want to display multiple categories on a page (such as the category module on the homepage or the subcategory list under a parent category), and display thumbnails or Logos for each category, thencategoryListthe tag comes into play.

`twig {# Assume you are on the homepage or other aggregation pages, and you need to list multiple categories and display their thumbnails #} {# Here is an example of getting the top-level categories under the article model, and you can adjust moduleId and parentId according to your needs #} {% categoryList topCategories with moduleId=“1” parentId=“0” %}

{%