The Banner area of the website, much 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 utilizing its powerful content management features, you can easily configure and display a dynamic banner image list, keeping your website fresh and attractive.
Understanding the Banner configuration logic in AnQi CMS
In AnQiCMS, configuring the dynamic banner image list is an intuitive and flexible process.Generally, these rotatable images can be directly associated with specific content units on the website, such as a category page or an independent single page.
When you are editing a document category or a single page in the background, you will find a dedicated area for setting the 'Banner Image'.Here, you can upload multiple images, and the system will treat them as the Banner group images for that specific category or page.To ensure the coordination and consistency of the front-end display, we usually recommend that you upload images of the same size.
use cleverlybannerListLabel: The core of dynamic banner display
To display the meticulously configured dynamic banner image list on the website front-end, AnQiCMS provides a core template tag ——bannerList.This label is the key to implementing dynamic Banner display. It can obtain and provide the corresponding Banner image data according to your configuration, allowing you to flexibly traverse and render it in the template.
bannerListThe basic form of a label is:{% bannerList 变量名称 %}. You can specify a variable name that is easy to identify in the template, such asbanners. Then, use standard looping structures, such as{% for item in banners %}You can access and process each Banner image in the list one by one.
This tag supports some practical parameters to fine-tune the control of the retrieved Banner data:
siteId:If your AnQiCMS has multi-site management functionality deployed and you want to call banner data from other sites, you can use this parameter to specify the target site's ID.But in most single-site application scenarios, this parameter usually does not need to be set.type:This isbannerListOne of the most commonly used parameters of the tag. By default, if not specifiedtypeParameter, it will retrieve the Banner image under the "default" group. But if you have created multiple Banner groups in the background (such as "Home Slider", "Product Display Banner", etc.), you can then settype="分组名称"Call to accurately retrieve the Banner image list for a specific group.This allows you to display different sets of Banners in different areas of the website as needed, greatly enriching the page's expressiveness.
Inside the loop,itemThe variable represents each banner image in the list, it includes several keywords that you can call in the template:
Id:Each Banner image's unique identifier 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 the Banner image, the target URL address will be redirected to.Description:The description information of the Banner image, which is usually used as the image title or a brief description.Alt:The alternative text (Alt Text) of the image is very important for SEO optimization and improving website accessibility (for example, when the image cannot be loaded or for visually impaired users to read).
Practical Guide: Displaying Dynamic Banner Image List in Templates
UnderstoodbannerListThe powerful features of the tag, next we will demonstrate how to apply it to your website template.Assuming you want to display a carousel Banner on the homepage, and these images have already been configured to a group named "Home Slide" in the background.
You can display on the website:index.htmlIn the template files where a Banner needs to be displayed, write a code snippet similar to the following:
<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