How to dynamically display different group Banner slideshows on the website homepage?

The banner slideshow on the homepage is an important window to attract visitors' attention and convey core information.By setting it cleverly, we can make the homepage banner slideshow display dynamically according to different marketing goals or content themes, which can not only improve user experience but also effectively guide users to browse.AnQiCMS (AnQiCMS) provides flexible features to help users easily meet this requirement.

Understanding the Banner mechanism of AnQi CMS

In AnQi CMS, the management and display of Banners have a clear logic.The system supports grouping for Banners, which means you can create independent sets of Banner images for different purposes and themes.For example, you can create a group for the header carousel on the homepage, another group for the promotional banner in the sidebar, or a temporary group for a specific promotional event.

Manage these Banner groups and images are usually performed in the Anqi CMS backend management interface.Here, you can upload images, set the link address for each Banner, add Alt text to the images (which is crucial for improving the website's SEO performance and accessibility), as well as provide a brief description and title.The key is that you can create multiple different Banner groups in the background and add corresponding images to each group.

Implement steps: Dynamically display different group Banner carousel

We need to combine the backend settings and the frontend template file calls to dynamically display these group banners on the website homepage.

The first step: Set Banner group and image in AnQi CMS background

First, please log in to your Anqicms CMS backend. Although the specific menu path may vary depending on the version or theme, you will usually find features such as 'Banner Management' or 'Slideshow Management' under 'Page Resources' or 'Content Management'.

After entering the Banner management interface, you will see options to create or edit Banner groups. Here:

  1. Create a new Banner group:For example, you can create a group named "Home Highlight" to display the most important promotional images on the website;Create a new group named "New Products Flash" for scrolling the latest products.The name of the group is the unique identifier you call when using the front-end template.
  2. Upload an image for each group:Upload your prepared banner images under their respective groups. Each image needs:
    • Image file:Choose high-quality, appropriately sized images.
    • Link address (Link):Set the target page after clicking the Banner.
    • Alt text (Alt):Add descriptive text to images to enhance SEO and user experience.
    • Title (Title) and Description (Description):Fill in as needed, this information can be displayed on the front end.
    • Note:It is recommended that all Banner images within the same group be of consistent size to ensure the coordination and uniformity of the carousel effect.

Step two: Call the Banner of the specified group in the website homepage template

After completing the background configuration, we need to modify the website's homepage template file. The AnQi CMS template files are usually stored in/templatethe directory, the homepage file may beindex/index.htmlorindex.html.

AnQi CMS provides a special template tag for calling the Banner list——bannerList. Through this tag'stypeThe parameter allows us to specify which group's Banner to call.

Here is an example code snippet showing how to call different groups of Banners in different areas of the homepage:

{# 首页主要轮播区域 - 调用“首页主推”分组的Banner #}
<div class="main-carousel-section">
    <div class="swiper-wrapper"> {# 假设您使用了Swiperjs等轮播库 #}
        {% bannerList mainBanners with type="首页主推" %}
            {% for item in mainBanners %}
            <div class="swiper-slide">
                <a class="carousel-link {% if forloop.Counter == 1 %}active{% endif %}" href="{{item.Link}}" target="_blank">
                    <img src="{{item.Logo}}" alt="{{item.Alt}}" title="{{item.Description}}" />
                    <div class="banner-content">
                        <h3>{{item.Title}}</h3>
                        <p>{{item.Description}}</p>
                    </div>
                </a>
            </div>
            {% endfor %}
        {% endbannerList %}
    </div>
    {# 添加Swiper的导航、分页等元素 #}
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

{# 首页侧边栏推广区域 - 调用“新品速递”分组的Banner #}
<div class="sidebar-promotion">
    <h3>新品速递</h3>
    <div class="product-banner-list">
        {% bannerList newArrivalsBanners with type="新品速递" %}
            {% for item in newArrivalsBanners %}
            <a class="product-promo-item" href="{{item.Link}}" target="_blank">
                <img src="{{item.Logo}}" alt="{{item.Alt}}" title="{{item.Description}}" />
                <h4>{{item.Title}}</h4>
            </a>
            {% endfor %}
        {% endbannerList %}
    </div>
</div>

Code analysis:

  • {% bannerList mainBanners with type="首页主推" %}This line of code tells Anqi CMS to find the Banner group named "Home Main Push" and assign all the Banner data tomainBannersthis variable.
  • {% for item in mainBanners %}This is a loop statement that will iteratemainBannersover each Banner data. In each iteration, the current Banner data will be stored initemthe variable.
  • {{item.Link}}/{{item.Logo}}/{{item.Alt}}/{{item.Title}}/{{item.Description}}These are the ones you can get fromitemThe Banner data retrieved from the variable corresponds to the links, image addresses, Alt text, title, and description set in the background.
  • {% if forloop.Counter == 1 %}active{% endif %}This is a commonly used technique to mark the first element as 'active' in a carousel, so that the front-end CSS/JavaScript can initialize the carousel effect.forloop.CounterRepresents the current loop count, starting from 1.

Step 3: Style and interaction (implemented through CSS/JavaScript)

It is not enough to simply call out images and links; you also need to write the corresponding CSS to beautify the layout and appearance of the Banner, as well as JavaScript code to implement the animation effects, automatic playback, switch buttons, and pagination for interactive functions.This work usually depends on the front-end carousel library (such as Swiper.js, Owl Carousel, etc.) or custom script you choose.

Optimization suggestion

  • Image optimization:When uploading Banner images on the backend, be sure to pay attention to the image size and file size.Large images can significantly affect the website's loading speed. Anqi CMS provides features such as automatic image compression and conversion to WebP format in the 'Content Settings' section, and it is recommended to make full use of them.
  • Responsive design:For screens of different sizes (PC, tablet, mobile), different banner layouts or images may be required.You can set media queries in CSS to adjust the display of the Banner, and even consider uploading different Banner images for different device sizes in the background (if the system supports it, or by creating different Banner groups and calling them in the front end based on the device type).
  • SEO friendly:Ensure that each Banner image is filled with meaningful contentaltThis not only helps search engines understand the image content, but also provides information to users when the image fails to load.

By following these steps, you can easily implement dynamic display of different group banners on the homepage of the Anqi CMS-built website, thereby better serving your website operation goals.

Frequently Asked Questions (FAQ)

1. Can I display multiple Banner carousels on the same page, each showing content from different groups?

Yes, it can be done. Just as shown in the example in the article, you only need to use the template multiple timesbannerListtag,