How to display the background custom banner (Banner) image list in the template?

The banner image on the website is an important element to attract visitors' attention and display core information.In AnQi CMS, you can flexibly customize these banner images in the background and elegantly display them in various template positions on the website.Below, we will discuss in detail how to display the custom banner image list in the template, making your website more attractive.

Configuration and management of background banner images

In AnQi CMS backend, banner image management is mainly divided into two cases: global homepage banners and specific content banners.

  1. Global homepage banner (Banner) managementThis usually refers to the carousel or important promotional images displayed on the homepage or other public areas of a website.You can find a dedicated 'Banner Management' module or similar in the background to configure.Here, you can upload multiple images, set link addresses for each image, image descriptions (for SEO and auxiliary descriptions), and specify the "group" they belong to.By using the grouping feature, you can categorize banners of different purposes, such as "home page large image", "sidebar advertisement", and so on, which provides a foundation for the flexible calling of front-end templates.

  2. Banner management for specific content (categories, single pages)Anqi CMS also provides the function to set exclusive banners for specific content such as article categories, product categories, or independent single pages.

    • When you edit aCategoryAt the time, there will be an option for the 'Banner image' in the category editing interface.You can upload a set or multiple images here for this category, which will only be displayed on the pages of this category and its subcategories.
    • Similarly, when editingsingle pageThere is also a "Banner Image" setting option.You can set unique banner images for independent pages such as "About Us", "Contact Information", and so on.When uploading these specific banners, please pay attention to the consistency of the image size to ensure a coordinated and aesthetically pleasing visual effect on the frontend.

Show the global banner list in the template

To display the global banner list you have set up in the background, AnQi CMS provides a very convenient tag:bannerList.

This tag's usage is very intuitive. You can use it to get a collection of banner images, and then display them on the page by iterating through them.

The basic call example is as follows:

{% bannerList banners %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

In the code above:

  • {% bannerList banners %}Defined a namedbannersStore the retrieved banner list in a variable.
  • {% for item in banners %}Loop through this list, and in each iteration, the data of the current banner will be assigned toitemVariable.
  • itemThe variable contains various information about the banner, such as:
    • {{item.Logo}}The URL address of the banner image.
    • {{item.Link}}The link address where the banner jumps after clicking.
    • {{item.Alt}}The Alt attribute of the image, which is very important for SEO and accessibility.
    • {{item.Title}}The banner title, which can be used to display image descriptions or text overlay.
  • target="_blank"Make sure to open the link in a new window to improve user experience.

Call banners by group

If you have set different "groups" for banners in the background, you can use them totypeParameters to accurately call banners of specific groups. For example, if you create a group named "Home Carousel", you can call it like this: 

{% bannerList banners with type="首页轮播" %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

Such banners belonging to the 'Homepage Carousel' group will be loaded and displayed in the template.

Special style processing: for example, the first banner

In some carousels, you may want the first banner to have a special style (such as 'active' state). You can useforin the loopforloop.Counterattribute to achieve this effect:

{% bannerList banners with type="首页轮播" %}
    {% for item in banners %}
    <a class="{% if forloop.Counter == 1 %}active{% endif %}"  href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

Whenforloop.CounterWhen equal to 1, it indicates that the current element is the first element in the loop, add it foractiveclass, convenient for defining its style through CSS.

Display a banner list of specific content in the template (category/page)

For the exclusive banners you set in categories or single pages, the calling method is slightly different. These banner images are usually attributes of the content itself, so they need to be usedcategoryDetailorpageDetailtags to obtain.

Whether it is a category or a single page, they both have aImagesfield used to store multiple banner images uploaded, this field returns an array of image URLs.

Call the category banner image:

{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %} {# 判断是否有图片上传 #}
<ul>
{% for item in categoryImages %}
  <li>
    <img src="{{item}}" alt="{% categoryDetail with name="Title" %}" />
  </li>
{% endfor %}
</ul>
{% endif %}

here,categoryDetailTag to get the details of the current category and pass through:name="Images"Get the banner image array. Then, we pass through theforLoop throughcategoryImagesarray and display each image.

Call single page banner image:

{% pageDetail pageImages with name="Images" %}
{% if pageImages %} {# 判断是否有图片上传 #}
<ul>
{% for item in pageImages %}
  <li>
    <img src="{{item}}" alt="{% pageDetail with name="Title" %}" />
  </li>
{% endfor %}
</ul>
{% endif %}

Its logic is completely consistent with the category banner call, but justcategoryDetailReplacepageDetail.

Only display the first banner or as a background image

Sometimes, you may only need to display the first image in a specific banner or use it as the background image of the page. You can combineifsentences and array indices to achieve this:

{% pageDetail bannerImages with name="Images" %}
{% if bannerImages %}
  {% set pageBanner = bannerImages[0] %} {# 获取数组中的第一张图片URL #}
  <div class="page-banner" style="background-image: url('{{pageBanner}}'); background-size: cover; background-position: center;">
    {# 这里可以放置其他页面内容，例如页面标题等 #}
  </div>
{% endif %}

This code retrieves the first banner image on a single page and sets it as a background image for an element, achieving a beautiful visual effect.divElement background image, achieving a beautiful visual effect.

Practical Tips

  • Image optimization：No matter which banner, large images will seriously affect the website loading speed.Before uploading an image, it is recommended to compress it and consider using modern image formats like WebP.The Anqi CMS backend content settings also provide the function of automatically compressing large images, which can save some manual compression steps after turning it on.
  • Alt attribute: for<img>Add tags with meaningful contentaltThe attribute is very important. This not only helps search engines understand the content of the image but also provides text alternatives when the image cannot be loaded, improving accessibility.
  • Responsive DesignEnsure your CSS styles allow banner images to display well on various devices (PC, tablet, mobile), for example, usingmax-width: 100%; height: auto;etc. style rules.

By the above method, you can easily call and display the custom banner image list on the Anqi CMS template, adding vitality and liveliness to your website.

Frequently Asked Questions (FAQ)

Q1: I uploaded a banner image on the backend, but why isn't it showing in the front-end template?A1: First, please check if you are using the correct template tags (bannerListorcategoryDetail/pageDetailCombineImagesField). Secondly, if usedbannerListand specifiedtypeParameters, please ensure that the "Group Name" in the background banner matches the template intypeThe value matches completely. Finally, check if the image has been successfully uploaded and the image address is valid, and then try again after clearing the browser cache or the system cache of the CMS.

Q2: How to display only the first image in the category or single page banner list?A2: When throughcategoryDetailorpageDetailTag to get toImagesWhen a field is an array of image URLs. You can access the first image by using the array index[0]For example,{% set firstBanner = categoryImages[0] %}You can get the URL of the first image. It is best to add one before using it.{% if categoryImages %}Judgment, to avoid errors when there are no images.

Q3: Can I display different banner images on different devices (such as PC and mobile phone)?A3: Security