The `bannerList` tag provides additional filters to handle the images or text of the Banner?

As an experienced website operations expert, I am happy to deeply analyze AnQi CMS for youbannerListThe function of the tag, and answer questions about its filter. When building a visually appealing and content-efficient website, a Banner (banner ad or carousel) is undoubtedly a key element in attracting users' attention.Security CMS provides convenient for thisbannerListTag, but its function is far more than a simple content call.

Flexible use of Anqi CMS'sbannerListTag: fine control of content and format

In the template design of AnQi CMS,bannerListTags are an important tool for efficiently retrieving the website's frontend Banner list.At first glance, you might wonder whether this tag itself provides additional "filters" to directly handle the Banner's images or text, such as automatically cropping images, truncating text, etc.The answer is,bannerListThe core responsibility of the tag is inFiltering and obtaining data contentHowever, this does not mean that you cannot fine-tune the image or text processing of the Banner content.In fact, AnQi CMS is strong and flexibleGeneral filter mechanism, Endowing you withbannerListultimate control over the data obtained.

bannerListTag: Core of data acquisition

First, let us make it clearbannerListThe positioning of the label. It is intended to accurately retrieve the required Banner data set from the background database according to your configuration. Its main parameters include:

• siteIdIf you are managing multiple sites in Anqicms,siteIdthe parameter allows you to specify which site to retrieve Banner data from, realizing flexible calls of multi-site content.
• typeThis isbannerListThe most commonly used parameter, with a default value of"default". You can create multiple Banner groups in the background (such as “Home Page Big Picture”, “Sidebar Promotion” etc.), and then throughtype="分组名"Call the Banner of a specific group. This greatly improves the modularity and maintainability of Banner management.

When you usebannerListWhen a tag is encountered, it returns an array of Banner objects. In the template'sforloop, you 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 Attribute 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 tag itself does not contain any parameters directly used for image scaling, text cropping, and other operations.The design philosophy separates the data acquisition from the formatted display processing, thus providing greater flexibility.

Flexible General Filter: A Tool for Content Formatting

AlthoughbannerListTags do not come with formatting filters, but the Anqi CMS template engine provides richuniversal filters. These filters can be applied to any variable, includingbannerListEach one obtained in the label loopitemThe property. This means that you can format the image address, text description, Alt attribute, etc. of the Banner in various detailed ways.

Applying a filter to image content:

For banner images, we often need to optimize them to ensure their display effect and loading speed on different devices. At this time,thumbandurlencodeFilters are particularly 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 linkitem.Linkmay contain special 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 the banner (such as titles, descriptions, Alt attributes) also needs to be adjusted according to design requirements, such as uniform length, removal of HTML tags, or case conversion. Anqi CMS providestruncatechars/safe/striptags/replaceand a series of case conversion and other filters:

• truncatecharsortruncatewordsFilter:Used to truncate long descriptions and add ellipsis to maintain the layout. You can choose to truncate by character count (truncatecharsOr truncate 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:On the contrary, if you want to remove all HTML tags from the description text and keep 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 text, such as unified SEO keywords or revised copywriting.

  
  <img src="{{item.Logo}}" alt="{{ item.Alt|replace:"旧关键词,新关键词" }}" />
  

Integrate these filters into