How to display the list of dynamic Banner images configured in the website?

The website's banner area is like a dynamic promotional window, its visual appeal and content delivery efficiency directly affect the first impression of visitors to the website.A well-designed Banner that can quickly capture the user's attention, effectively showcasing the brand image, latest activities, or core products.In AnQiCMS (AnQi CMS), by taking advantage of its powerful content management features, you can easily configure and display a dynamic Banner image list, keeping your website fresh and attractive.

Understand the Banner configuration logic in AnQiCMS

In AnQiCMS, configuring the dynamic banner image list is an intuitive and flexible process.These scrollable images can usually be directly linked to specific content units of a website, such as a category page or an independent single page.

When you edit a document category or a single page in the background, you will find a dedicated area for setting the "Banner image" region.Here, you can upload multiple images, and the system will treat them as a banner group for the specific category or page.To ensure the coordination and uniformity of the front-end display effect, we usually recommend that you upload images of the same size.

In addition to this page-level Banner setting, AnQiCMS also provides a more advanced Banner management method.Through the corresponding function module on the backend, you can create and manage multiple independent Banner groups.This means that you can design and configure a set of exclusive Banner images for the homepage of the website, different special event pages, and even seasonal promotional activities.Each group can have its own unique set of images and be identified by a custom name.This fine-tuned configuration capability brings great flexibility and convenience to website content operation.

Use cleverlybannerListLabel: Core of Dynamic Banner Display

To display the meticulously configured dynamic banner image list on the front end of the website, AnQiCMS provides a core template tag——bannerList. This tag is the key to implementing dynamic Banner display, which can obtain and provide the corresponding Banner image data according to your configuration, and can be flexibly traversed and rendered in the template.

bannerListThe basic form of a tag is:{% bannerList 变量名称 %}. You can specify a variable name that is easy to identify in the template, such asbanners. Then, through standard loop structures, such as{% for item in banners %}You can access and process each Banner image in the list one by one.

This tag also supports some practical parameters to allow you to fine-tune the Banner data you obtain:

• siteId:If your AnQiCMS has deployed the multi-site management feature and you want to call the Banner data of other sites, you can use this parameter to specify the ID of the target site.But this parameter is usually not needed in most single-site application scenarios.
• type:This isbannerListOne of the most commonly used parameters of the tag. By default, if not specifiedtypeA parameter that will retrieve the Banner image under the "default" group. But if you have created multiple Banner groups in the background (such as "Home Slide", "Product Display Banner", etc.), you can settype="分组名称"Call the Banner image list of a specific group accurately.This allows you to display different banner collections as needed in different areas of the website, greatly enriching the page's expressiveness.

Inside the loop,itemThe variable represents each banner image in the list, which includes the following keywords that can be called in the template:

• Id:Each Banner image has a unique identifier ID in the system.
• Logo:The complete URL address of the Banner image on the server, which is the core field for displaying the image.
• Link:When the visitor clicks on the Banner image, it will jump to the target URL address.
• Description:The description information of the Banner image, which can usually be used as an image title or brief description.
• Alt:Image alternative text (Alt Text), which is very important for SEO optimization and improving website accessibility (for example, when images cannot be loaded or for visually impaired users).

Guide to displaying dynamic Banner image lists in templates

UnderstoodbannerListAfter the powerful function of the tag, we will demonstrate how to apply it to your website template.Suppose you want to display a carousel Banner on the website homepage, and these images have already been configured in a group named "Homepage Slides" in the background.

You can use it in the website'sindex.htmlOr write similar code snippets in other template files that need to display Banners:

<div class="main-banner-container"> {# 假设这是一个用于Banner轮播的外部容器 #}
    {% bannerList homeBanners with type="首页幻灯" %} {# 获取“首页幻灯”分组的Banner列表 #}
        {% for bannerItem in homeBanners %}
        <a href="{{bannerItem.Link}}" target="_blank" class="banner-slide {% if forloop.Counter == 1 %}active-slide{% endif %}">
            {# 结合thumb过滤器生成缩略图，并用于懒加载，提高性能 #}
            <img src="{{bannerItem.Logo|thumb}}" alt="{{bannerItem.Alt}}" loading="lazy" class="responsive-banner-image"/>
            {% if bannerItem.Description %}
                <div class="banner-text-overlay">
                    <h3>{{bannerItem.Description}}</h3>
                </div>
            {% endif %}
        </a>
        {% endfor %}
    {% endbannerList %}
</div>

Let's