The `bannerList` tag provides an additional filter to handle the image or text of the Banner?

As an experienced website operation expert, I am more than happy to delve into the Anqi CMS.bannerListThe function of the label, and answer questions about its filter.When building a visually appealing and content-efficient website, Banner (ad banner or carousel) is undoubtedly a key element to attract users' attention.bannerListTag, but its function is far more than just simple content calls.

Flexible use of Anqi CMS'sbannerList标签：Content and Format Control

In the template design of AnQi CMS,bannerListLabels are an important tool for efficiently retrieving the website's frontend Banner list.At first glance, you may wonder if this tag itself provides an additional 'filter' to directly handle the images or text of the Banner, such as automatically cropping images, truncating text, etc.bannerListThe core responsibility of the label isFiltering and obtaining data contentauto formatting instead of direct formatting.However, this does not mean that you cannot refine the image or text content of the Banner.Universal filter mechanism，which gives youbannerListThe ultimate control ability of the data obtained.

bannerListTag: The core of data acquisition.

First, let's be clearbannerListThe location of the label. It is designed to accurately retrieve the required Banner dataset from the background database according to your configuration. Its main parameters include:

  • siteId：If you are managing multiple sites in the security CMS,siteIdthe parameter allows you to specify which site to obtain Banner data from, realizing flexible calling of content across multiple sites.
  • type：This isbannerListThe most commonly used parameter, the default value is"default". You can create multiple Banner groups in the background (such as "Home Page Big Picturetype="分组名"Call the Banner of a specific group. This greatly enhances the modularity and maintainability of Banner management.

When you usebannerListWhen labeling, it will return an array of Banner objects. In the template,foryou can access the specific properties of each Banner object, such asitem.Logo(image address),item.Link[Link address],item.Description(Description text) anditem.Alt(Image alt text). For example, a basic call example is as follows:

{% bannerList banners with type="homepage-main" %}
    {% for item in banners %}
        <a href="{{item.Link}}" target="_blank">
            <img src="{{item.Logo}}" alt="{{item.Alt}}" />
            <h5>{{item.Title}}</h5> {# 假设存在Title字段 #}
            <p>{{item.Description}}</p>
        </a>
    {% endfor %}
{% endbannerList %}

As you can see,bannerListThe label itself does not contain any parameters directly used for image scaling, text clipping, and other operations.Its design philosophy is to separate the data acquisition from the formatted data display, thus providing greater flexibility.

Flexible general filter: a tool for content formatting.

AlthoughbannerListThe label does not come with a formatting filter, but the Anqi CMS template engine provides a richGeneral filter. These filters can be applied to any variable, includingbannerListTag loop to get each oneitemThe attribute means that you can perform various detailed formatting processes on the Banner's image address, text description, Alt attribute, etc.

Application of filters for image content:

For banner images, we often need to optimize them to ensure their display effects and loading speed on different devices. At this time,thumbandurlencodeFilters are especially useful:

  • thumbFilter:It can generate thumbnails of specified size based on the original image address, which is crucial for implementing responsive images and speeding up page loading.
    
<img src="{{ item.Logo|thumb }}" alt="{{ item.Alt }}" />
  • urlencodeFilter:If the Banner link containsitem.Linkspecial characters, useurlencodeto ensure correct link parsing and avoid jump errors.
    
<a href="{{ item.Link|urlencode }}" target="_blank">

Filter applied to text content:

The display of text on banners (such as titles, descriptions, Alt attributes) also needs to be adjusted according to design requirements, such as uniform length, removing HTML tags, or converting case. Anqi CMS providestruncatechars/safe/striptags/replaceEnglish for case conversion and a series of filters:

  • truncatecharsortruncatewordsFilter:Used to truncate overly long description text and add an ellipsis to maintain the layout's neatness. You can choose to truncate by character count (truncatechars) Or truncated by word count (truncatewords).
    
<p>{{ item.Description|truncatechars:50 }}</p> {# 描述文字截取前50个字符 #}
  • safeFilter:If Banner Descriptionitem.DescriptionThe content is entered from the rich text editor, which may contain HTML tags. UsesafeThe filter can indicate to the template engine to render these HTML tags as content instead of escaping them.
    
<p>{{ item.Description|safe }}</p> {# 渲染包含HTML的描述文字 #}
  • striptagsFilter:Alternatively, if you wish to remove all HTML tags from the description text and retain only plain text content, you can usestriptags.
    
<p>{{ item.Description|striptags|truncatechars:100 }}</p> {# 移除HTML标签后截取文字 #}
  • upper/lower/capfirstFilter:Used to convert text to uppercase, lowercase, or title case to meet specific design requirements.
    
<h5>{{ item.Alt|upper }}</h5> {# 将Alt文字转换为大写 #}
  • replaceFilter:Used to replace specific strings in the text, such as unified SEO keywords or corrected copywriting.
    
<img src="{{item.Logo}}" alt="{{ item.Alt|replace:"旧关键词,新关键词" }}" />

Integrate these filters into