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

AnQiCMS as an efficient and customizable enterprise-level content management system has a significant advantage in the flexibility of content display.For the common image carousel (Banner) feature 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 requirements.

Understand the Banner Management Mechanism of AnQiCMS

In AnQiCMS, the implementation of 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 needs. There are mainly the following implementation paths:

  1. Global or Group Carousel (Home/General Banner)【en】 : Carousel suitable for the website's homepage, general pages, or specific theme modules.This type of carousel is usually managed in a dedicated area in the backend (such as there may be a related entry in 'Website Navigation Settings' or a special 'Banner Management' module), and can be grouped and called by template tags.
  2. Category Exclusive Carousel (Category Banner)Carousel images set for specific product or article categories. These Banners are directly bound to the category details and are only displayed on the category and its sub-pages.
  3. Single Page BannerAbout Us, Contact Us, and other independently customized carousel images for standalone pages. They are stored within the content of the single page and are effective only on that page.

Next, we will discuss step by step how to achieve these customized image carousel displays through AnQiCMS template tags.

Core: UsingbannerListTags to implement global or group carousels

If you wish to display a set of carousel images on the homepage or a general area of the website,bannerListLabels are your favorites. This label can directly retrieve the Banner list you have configured from the background.

Basic Usage: Get default or homepage Banner

The simplest usage is to call directlybannerListThe tag, it will get 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 namedbannersA variable that will contain all the default Banner's data.
  • {% for item in banners %}to iteratebannersEach item in the array is a Banner.
  • item.Link: The link address to which the carousel will jump after clicking.
  • item.LogoCarousel image address.
  • item.AltImage'saltAttribute text, used as alternative text when the image cannot be displayed, and also benefits SEO.
  • item.Title[en] : It is typically the title or brief text of the Banner.
  • item.Description[en] : It is the detailed description text of the Banner.

You can also add some dynamic effects based on the number of loops. For example, add one for the first BanneractiveClass, this is very common in many front-end 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 %}

Here are theforloop.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