How to display a custom Banner image group on the category page or single page?

In website operation, the attractiveness of visual content is crucial.Especially for category pages and standalone single pages, displaying a set of carefully designed banner images can effectively attract visitors' attention, strengthen the brand image, and convey specific information.AnQiCMS provides a straightforward and flexible mechanism that allows you to easily configure and display custom Banner image groups on these key pages.

Understand the AnQiCMS Banner image mechanism

AnQiCMS considers the Banner image group of category pages and single pages as the property of the page itself.This means you can directly upload and manage them on each category or single page editing interface without relying on the global or independent Banner module.This design concept gives you a high degree of content customization freedom, ensuring that each page can have the most fitting visual presentation that aligns with its theme and marketing goals.You can upload multiple images to form a Banner carousel group or simply display a core image.

Set Banner images for category pages and single pages in the background

The operation to configure the Banner image group is very simple, just go to the corresponding editing interface on the AnQiCMS backend.

Set Banner image for category page

  1. Log in to the admin backend and navigate:Log in to the AnQiCMS admin interface, then navigate to the left menu bar and select 'Content Management', then choose 'Document Category'.
  2. Select and edit the category: In the document category list, find the category you want to add or modify the Banner image. Click the 'Edit' button on the right of the category to enter the category detail editing page.
  3. Upload Banner Image:In the category editing page, scroll down to find the 'Banner Image' area.You can click the upload button to select an image to upload from your local computer, or you can select from the library of uploaded images.AnQiCMS supports uploading multiple images, which will be displayed as a photo group.In order to maintain the uniformity and aesthetics of the front-end display, it is recommended that you upload images with consistent dimensions.

Set Banner Image for Single Page

  1. Log in to the admin backend and navigate:Similarly, log in to the AnQiCMS backend, navigate to the left menu bar's 'Page Resources', and select 'Page Management'.
  2. Select and edit a single page:In the single-page list, find the single page you want to add or modify the Banner image. Click the 'Edit' button on the right to enter the single page detail editing page.
  3. Upload Banner Image:In the single-page editing page, you will also find a 'Banner image' area.The operation method is the same as the category page, you can upload multiple images to form a Banner image group, and pay attention to maintaining the consistency of image size.

By following these steps, you have completed the task of uploading and configuring the Banner image group for a specific category or single page in the AnQiCMS backend.These image data have already been stored in the system, waiting for the front-end template to call.

Call and display the Banner image group in the template

After completing the backend configuration, we need to modify the front-end template files of the website to display these carefully prepared Banner images to visitors.AnQiCMS powerful template tag system makes this process direct and efficient.

Call the Banner image in the category page template

The template for the category page is usually located/template/{您的模板名称}/{模型table}/list.htmlOr you can specify a custom template file for a specific category in the background (for example/template/{您的模板名称}/article/list-123.html)

You can use these template files in{% categoryDetail %}Tag to get the details of the current category, which includes the Banner image group we uploaded.

{# 假设这是您的分类列表模板（例如：/template/default/article/list.html） #}
{% comment %} 获取当前分类的Banner图片组 {% endcomment %}
{% categoryDetail bannerImages with name="Images" %}

{% if bannerImages %}
    {# 如果存在Banner图片，则进行遍历展示 #}
    <div class="category-banner-slider">
        <ul>
        {% for imageUrl in bannerImages %}
            <li><img src="{{ imageUrl }}" alt="分类Banner图片"></li>
        {% endfor %}
        </ul>
    </div>
{% else %}
    {# 如果没有设置Banner图片，可以显示一个默认图片或不显示 #}
    <div class="default-banner">
        <img src="/public/static/images/default-banner.jpg" alt="默认分类Banner">
    </div>
{% endif %}

In the code above:

  • {% categoryDetail bannerImages with name="Images" %}The label is used to get the current category's Banner image group.bannerImagesIs a custom variable name, you can use any name you like.name="Images"Specified that we need to retrieve the image group data configured on the backend.
  • {% if bannerImages %}Check if the image group exists, which is a good habit to avoid errors on the page when there are no images.
  • {% for imageUrl in bannerImages %}Loop through each image in the image group.imageUrlIn each iteration, it will be the complete URL path of the current image.
  • {{ imageUrl }}The URL of the image is output directly, you can use it in<img>label'ssrcthe attribute.

Call the Banner image in a single page template

The template for a single page is usually located/template/{您的模板名称}/page/detail.htmlOr the custom template file you specify for a specific single page in the background (for example/template/{您的模板名称}/page/about.html)

The way to call the single-page Banner image group is very similar to the category page, but you need to use{% pageDetail %}.

`twig {# Assume this is your single page template (e.g., /template/default/page/detail.html) #} {% comment %} Get the current single page's Banner image group {% endcomment %} {% pageDetail pageBannerImages with name=“Images” %}

{% if pageBannerImages %}

{# 如果存在Banner图片，则