When building modern websites, the banner carousel is a common element used to enhance visual appeal and convey important information.They are usually located in prominent positions on the website, such as at the top of the homepage, to display the latest activities, featured products, or important announcements.In AnQiCMS (AnQiCMS), managing and displaying these carousels becomes very convenient, mainly due to its powerful template tag system, especiallybannerList.
bannerListThe tag is a template tag specially designed by Anqi CMS for website carousel ads, which can help us easily obtain preset carousel ad data from the background and display it flexibly on the website front-end.Through this tag, you can easily load and display carousel images at any location on the website (such as the homepage, product category page, or event special page).
bannerListHow do tags work?
bannerListThe tag works by retrieving the carousel data you have pre-configured from the Anqi CMS backend.These carousel data are usually set uniformly in the corresponding management module on the backend, for example, in document classification or single page management, you can upload and set multiple Banner images for specific categories or pages.
In the template file, you can usebannerListLabel to retrieve this data. Its basic usage is to combineforLoop, traverse, and output information for each carousel image. The tag will assign the obtained carousel data to a variable you specify (such asbanners），then you can access the specific properties of each image in this variable.
Core features and parameter analysis
bannerListThe tag provides several practical parameters to meet the needs of different scenarios:
type(Group Name):This isbannerListOne of the most commonly used parameters of the tag. By default,typehas a value of"default". But you can set different groups for the carousel in the background, for example, set a group named "Home Big Picture" for the homepage, and set a group named "Product Promotion" for a product category page.Specify in the tagtype="分组名"You can accurately call the carousel of a specific group, thus realizing different carousel content displayed in different areas or pages of the website. For example, if you create a group named "Slide" in the background, you can use it in the template bytype="幻灯"Call it.siteId(Site ID):If your Anqi CMS system has enabled the multi-site management feature and you want to call data from other sites, you can do so bysiteIdParameters are used to specify the target site. For most single-site operation users, it is usually unnecessary to fill in this parameter, as the system will automatically obtain the data of the current site.
WhenbannerListThe label gets the carousel data and then assigns it to the variable you define in the form of an array object (for examplebanners) atforIn the loop, each element of the array (usually nameditemEach represents a carousel, and it includes several key fields:
Id:The unique identifier of each carousel, usually used for internal logic processing, and is rarely displayed directly on the front-end page.Logo:Carousel image URL (URL), this is the most core field when displaying images on the front end.Link:Target link address where the carousel clicks.Description:A brief description of the carousel, which can be displayed below the image or in the prompt box.Alt:Image alt text. This is crucial for SEO and improving website accessibility.Even if the image cannot be loaded, users can understand the content of the image through text.
Actual operation: how to call in the templatebannerList
To display the carousel on your website template, you need tobannerListembed the tag into the corresponding.htmlThe template file contains. The following is a typical call example that shows how to retrieve the carousel of the default group and display it as clickable images:
{# 假设这是网站首页的模板文件，调用默认分组的轮播图 #}
<div class="banner-carousel">
{% bannerList banners %}
{% for item in banners %}
<a href="{{item.Link}}" target="_blank">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
{# 如果有描述，也可以在这里显示 #}
{% if item.Description %}
<p>{{item.Description}}</p>
{% endif %}
</a>
{% endfor %}
{% endbannerList %}
</div>
If you need to call a specific group carousel, for example, a group named "Slideshow" is set in the background, the code will be slightly modified:
{# 调用名为“幻灯”的分组轮播图 #}
<div class="slider-area">
{% bannerList banners with type="幻灯" %}
{% for item in banners %}
<a href="{{item.Link}}" target="_blank">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
</a>
{% endfor %}
{% endbannerList %}
</div>
In the actual carousel component, we often need to add a specialactiveclass name to make it default display. The Anqi CMS template engine providesforloop.CounterSuch a loop counter can help us easily achieve this:
{# 为第一张轮播图添加 active 类名 #}
<div class="swiper-wrapper">
{% bannerList banners %}
{% for item in banners %}
<div class="swiper-slide {% if forloop.Counter == 1 %}active{% endif %}">
<a href="{{item.Link}}" target="_blank">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
</a>
</div>
{% endfor %}
{% endbannerList %}
</div>
In this way,bannerListLabel combinationforThe loop makes the dynamic loading and display of carousel content intuitive and easy to maintain. You only need to update the carousel content in the background, and the front page will automatically synchronize to display the latest data.
Expand applications and **practice
bannerListThe flexibility of tags is not limited to the homepage. You can apply them to:
- Category page:Set a dedicated top carousel for different product category pages, displaying the latest products or events in that category.
- Single Page:For example, a single-page like “About Us” or “Contact Us”, or also utilize
bannerListImage representing the label display. - Special event page:Customized carousel images to attract users for specific marketing activities or special content.
When configuring the carousel, there are several practices worth noting:
- Image size consistency:Try to upload images with consistent size and proportions. This ensures that the carousel transitions are visually smooth and aesthetically pleasing, and avoids layout jumps caused by images of different sizes, affecting user experience.
- Optimize image size:Use a compression tool to optimize the image file size of the carousel to speed up page loading, improve user experience, and increase search engine ranking.
- Improve
AltProperties:For each carousel image:AltFill in meaningful descriptions. This not only helps visually impaired users understand the content of the image but also improves the visibility of the image in search engines, which is greatly beneficial for the SEO performance of the website.
BybannerListThe tag, Anqi CMS provides powerful and convenient tools for website operators, allowing