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 a prominent position on the website, such as at the top of the homepage, to display the latest activities, featured products, or important announcements.bannerListTag.
bannerListThe tag is a template tag specially designed for website carousel by Anqi CMS, which can help us easily obtain the preset carousel data from the background and display it flexibly on the website front end.Through this tag, you can easily load and display carousel images dynamically at any location on the website (such as the homepage, product category page, or event special page).
bannerListHow does the tag work?
bannerListThe working principle of the label is that it will fetch the pre-configured carousel data from the security CMS backend.These carousel data are usually set uniformly in the corresponding management module on the back end, such as in document classification or single page management, where you can upload and set multiple Banner images for specific categories or pages.
You can use it in the template file,bannerListLabel to get this data. Its basic usage is to combineforLoop, iterate and output information for each carousel image. The tag will assign the obtained carousel data to a variable you specify (for example,banners），then you can access the specific properties of each image in this variable.
Core feature and parameter explanation
bannerListTags provide several practical parameters to meet the needs of different scenarios:
type(Group Name):This isbannerListthe most commonly used parameter of the tag. By default,typethe value is"default".You can set different groups for the carousel in the background, for example, set a group named 'Home Page Big Picture' for the homepage, and a group named 'Product Promotion' for a product category page.type="分组名"You can accurately call the carousel of a specific group, thereby realizing different carousel content 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.type="幻灯"Call it.siteId(Site ID):If your security CMS system has enabled the multi-site management feature and you want to call data from other sites, you can do so bysiteIdParameter to specify the target site. For most single-site operations users, it is usually unnecessary to fill in this parameter, the system will automatically obtain the data of the current site.
whenbannerListLabel gets carousel data and assigns it to a variable you define in the form of an array object (for examplebanners). Inforthe loop, each element of the array (usually nameditemAll of them represent a carousel image, and include the following key fields:
Id:The unique identifier for each carousel image, usually used for internal logic processing and is rarely displayed directly on the front page.Logo:The image address (URL) of the carousel, which is the most core field for displaying images on the front end.Link:The target link address where the carousel jumps after being clicked.Description:A brief description of the carousel, which can be displayed below the image or in a tooltip.Alt:Image alternative text (Alt Text).This is crucial for search engine optimization (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 to:bannerListLabel embedded into the corresponding.htmltemplate file. Here is an example of a typical call that shows how to get the carousel of the default group and display it as a clickable image:
{# 假设这是网站首页的模板文件，调用默认分组的轮播图 #}
<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 carousel group, for example, a group named '幻灯' 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 special class name to the first image.activeThe template engine of Anqi CMS 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>
By this means,bannerListTag combinationforLoop to make 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 the display of the latest data.
Extend Application and Practice
bannerListThe flexibility of tags allows them to be more than just on the homepage. You can apply them to:
- Category Page:Set a dedicated top carousel for different product category pages to display the latest products or promotions in that category.
- Single page:For example, "About Us" or "Contact Us" and other single-page, or you can also use
bannerListimages related to tag display. - Special event page:Customize carousel images to attract users for specific marketing activities or thematic content.
When configuring the carousel, there are several **practices to note:
- Image size consistency:Try to upload images with consistent size and ratio. This ensures that the carousel transitions are visually smooth and aesthetically pleasing, avoiding layout jumps caused by images of different sizes, which can affect user experience.
- Optimize image size:Use compression tools to optimize the image file size of the carousel images to speed up page loading, improve user experience, and enhance search engine ratings.
- Improve
AltProperties:For each carousel imageAltProperty description should be meaningful.This not only helps visually impaired users understand the content of images, but also improves the visibility of images in search engines, which is very beneficial for the SEO performance of the website.
bybannerListTags, Anqi CMS provides powerful and convenient tools for website operators, allowing