How to display a list of custom banner (Banner) images in a template?

The banner image on the website is an important element to attract visitors' attention and display core information.In the Anqi CMS, you can flexibly customize these banner images in the background and elegantly present them in various template positions of 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 the Anqi CMS backend, banner image management is mainly divided into two cases: global homepage banner and specific content banner.

  1. Global Homepage Banner (Banner) ManagementThis usually refers to the carousel or important promotional images that need to be displayed on the homepage or other public areas of a website.You can find the special 'Banner Management' or similar module in the background for configuration.Here, you can upload multiple images, set link addresses, image descriptions (for SEO and auxiliary explanation), and specify the "group" they belong to.Through the grouping function, you can categorize different types of banners for different purposes, such as 'Home Page Large Image', 'Sidebar Advertisement', and so on. This provides a foundation for flexible calling of front-end templates.

  2. Specific content (category, single page) banner managementThe 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 aCategoryWhen in the category editing interface, there will be an option for a "Banner Image".You can upload a set of one or more images here for this category, these images will only be displayed on the page of this category and its subcategories.
    • Similarly, when editingsingle pageWhen, there is also a 'Banner image' setting option.You can set unique banner images for independent pages such as 'About Us' and 'Contact Information'.Please pay special attention to the consistency of the image size when uploading these specific banners to ensure a coordinated and aesthetically pleasing visual effect on the frontend.

Display the global banner list in the template

To display the global banner list you set in the background in the template, SafeCMS provides a very convenient tag: bannerList.

The usage of this tag is very intuitive. You can use it to get a collection of banner images and then display them on the page by traversing them in a loop.

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 above code:

  • {% bannerList banners %}Defined a namedbannersStore the obtained banner list in a variable.
  • {% for item in banners %}Loop through this list, and each iteration will assign the data of the current banner toitema variable.
  • 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}}：Banner title, which can be used to display image descriptions or text overlay.
  • target="_blank"Ensure that the link is opened in a new window when clicked, improving user experience.

Call banners by group

If you have set different "groups" for banners in the background,typeParameters to precisely call a specific banner group. 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 %}

Thus, only the banners belonging to the 'Home 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.Counterproperty 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, addactivea class for easy definition of its style by CSS.

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

For the exclusive banners you set in the category or single page, the calling method is slightly different. These banner images are usually as properties of the content itself, so they need to usecategoryDetailorpageDetailyou can get it by tag.

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

Call 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,categoryDetailGet the details of the current category and throughname="Images"Get the banner image array. Then, we throughforto iteratecategoryImagesArray, 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, just thatcategoryDetailwithpageDetail.

Only display the first banner or as a background image

Sometimes, you might only need to display the first image in a specific banner or use it as the background image for a page. You can achieve this by combiningifsentences and array indices.

{% 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 will fetch the first horizontal banner image on a single page and set it as a background image for an element, achieving a beautiful visual effect.divElement background image, achieving a beautiful visual effect.

Practical tips

  • Image OptimizationRegardless of which banner, large images will significantly affect the website loading speed.Before uploading an image, it is recommended to compress it and consider using modern image formats such as WebP.The background content settings of Anqi CMS also provides the function of automatically compressing large images, which can save some manual compression steps when enabled.
  • Alt attribute: For<img>Label addition should be meaningfulaltAttributes are very important. Not only do they help search engines understand the content of the image, but they also provide text alternatives when the image cannot be loaded, improving accessibility.
  • Responsive DesignEnsure your CSS styles make the banner image display well on different devices (PC, tablet, mobile), for example, usingmax-width: 100%; height: auto;etc. style rules.

Through the above method, you can easily call and display the background custom banner image list in the Aanqi CMS template, adding vitality and vitality to your website.

Common Questions (FAQ)

Q1: I uploaded a banner image on the backend, but why doesn't the front-end template show it?A1: First, please check if you are using the correct template tags (bannerListorcategoryDetail/pageDetailCombineImagesField). Next, if it is usedbannerListand specifiedtypeparameter, please ensure that the "Group Name" in the background banner matches the template withtype完全匹配。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 CMS.

Q2: How to display only the first image in the category or single-page banner list?A2: When going throughcategoryDetailorpageDetailto get the tagImagesWhen a field is, it 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