How to customize the display of image carousel (Banner) through template tags in AnQiCMS?

AnQiCMS as an efficient and customizable enterprise-level content management system has a significant advantage in the flexibility of content display.For the common picture slideshow (Banner) function on websites, AnQiCMS provides various ways to customize the display through template tags, allowing you to easily achieve a rich and diverse Banner display effect according to different page and business needs.

Understand AnQiCMS's Banner management mechanism

In AnQiCMS, the implementation of the image slideshow is not a single path, but provides a very flexible mechanism. You can choose the most suitable management method according to different scene requirements. There are mainly the following implementation paths:

  1. Global or Group Carousel (Home/General Banner): Suitable for the website's homepage, general pages, or specific theme module carousel.This type of carousel is usually managed in a dedicated area in the background (such as a related entry in "Website Navigation Settings" or a dedicated "Banner Management" module), and can be grouped and called by template tags.
  2. Category-Specific Carousel (Category Banner): Carousel set for specific product or article category. These Banners are directly bound to the category details and are displayed only on the category and its sub-pages.
  3. Single Page BannerCarousel images customized for independent single-page pages such as "About Us" and "Contact Us". They are stored in the content of the single page and only take effect on that page.

We will discuss step by step how to achieve these custom image carousel displays through AnQiCMS template tags.

core: usingbannerListTags can implement global or grouped carousels.

If you wish to display a slideshow of images on the homepage or some general area of the website,bannerListThe tag is your preference. This tag can directly retrieve the Banner list you have configured from the background.

Basic usage: Get default or home page Banner

The simplest way is to call directlybannerListTag, it will retrieve the default or home page configured Banner image:

{% bannerList banners %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
        <p>{{item.Description}}</p>
    </a>
    {% endfor %}
{% endbannerList %}

In this code block:

  • {% bannerList banners %}Defined a namedbannersThe variable that will contain all the default Banner data.
  • {% for item in banners %}Loop throughbannersEach Banner item in the array.
  • item.Link: The link address to which the carousel will jump after clicking.
  • item.Logo: Carousel image address.
  • item.Alt: The image'saltAttribute text, used as an alternative text when the image cannot be displayed, and also beneficial for SEO.
  • item.Title: It is usually the title or brief text of a Banner.
  • item.Description: Detailed description text of a Banner.

You can also add some dynamic effects based on the number of loops. For example, add one to the first BanneractiveClass, this is common in many frontend carousel components (such as Bootstrap Carousel):

{% bannerList banners %}
    {% for item in banners %}
    <a class="{% if forloop.Counter == 1 %}active{% endif %}" href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

Hereforloop.CounterReturns the current iteration count (starting from 1) in each loop.

Custom grouping: Implement a Banner carousel for a specific area.

The strength of AnQiCMS lies in the fact that you can not only set global