How to retrieve and display the list of Banner carousel images configured on the website homepage?

In Anqi CMS, the Banner carousel on the homepage is an important element to attract visitors' attention and display key content.Correctly obtain and display these banner images, which can greatly enhance the visual effects and user experience of the website.AnQi CMS provides intuitive functions and flexible template tags, allowing us to easily achieve this goal.

Step 1: Configure your Banner slideshow in the background

Before starting to display Banner on the website front-end, we first need to configure it in the Anqi CMS backend management system.Generally, you can find the configuration entry in the "Page Resources" or similar "Banner Management" area.

Here, you can create a new Banner entry, upload an image (i.e., Logo) for each Banner, set the link (Link) to redirect after clicking, add image alternative text (Alt) for search engine understanding and accessibility, and write a brief description (Description).

A key setting is the 'group name' (type).The Anqi CMS allows you to set different groups for different Banner sliders.For example, you can create a group named "Home Carousel" to display the Banner on the homepage.This way, when you call it in the template, you can accurately specify which group's Banner to display.Make sure to select a clear group name for the homepage carousel, such as "default" or "Homepage Banner", and maintain consistent image sizes to ensure the visual harmony of the carousel.

Second step: Call and display the Banner carousel in the template

After completing the background configuration, the next step is to display these exquisite banner images on your website homepage.This is mainly achieved through the template tags of AnQi CMS. Usually, these codes are placed in your website template files.index.htmlin the public fragment files it contains.

AnQi CMS provides a specialbannerListLabel, it can help us get the background configuration Banner list.

Basic calling method

To get the list of Banners for all default groups, you can use the following code snippet:

{% bannerList banners %}
    <div class="homepage-banner-carousel">
        {% for item in banners %}
        <a href="{{item.Link}}" target="_blank">
            <img src="{{item.Logo}}" alt="{{item.Alt}}" />
            <h5>{{item.Description}}</h5>
        </a>
        {% endfor %}
    </div>
{% endbannerList %}

In the code above:

• {% bannerList banners %}The tag will assign the Banner list data configured on the backend to a variable namedbanners.
• {% for item in banners %}The loop will iterate overbannersEach item in the list of banners.
• Inside the loop,itemThe variable represents the data of the current single banner being processed. We can access it byitem.LogoGet the image address,item.LinkGet the jump link,item.AltGet image alternative text anditem.DescriptionGet the description text of the Banner.

Call the Banner of the specified group

If you have set a specific group name for the home page Banner in the background, such as "Home Slide", then when calling it in the template, you need to specify the group throughtypethe parameter:

{% bannerList banners with type="首页幻灯" %}
    <div class="homepage-banner-carousel">
        {% for item in banners %}
        <a href="{{item.Link}}" target="_blank">
            <img src="{{item.Logo}}" alt="{{item.Alt}}" />
            <h5>{{item.Description}}</h5>
        </a>
        {% endfor %}
    </div>
{% endbannerList %}

Bywith type="分组名"Parameters, you can ensure that only Banners belonging to a specific group are displayed, which is very useful when managing multiple carousel areas.

Add special styles to the first Banner.

In many carousels, the first Banner item may need to be active as soon as it loads, or have special styles. You canforloop.CounterTo determine if the current element is the first element of the loop:

{% bannerList banners %}
    <div class="homepage-banner-carousel">
        {% for item in banners %}
        <a class="carousel-item {% if forloop.Counter == 1 %}active{% endif %}"  href="{{item.Link}}" target="_blank">
            <img src="{{item.Logo}}" alt="{{item.Alt}}" />
            <h5>{{item.Description}}</h5>
        </a>
        {% endfor %}
    </div>
{% endbannerList %}

Here, we use{% if forloop.Counter == 1 %}To determine if the current loop is the first one, if so, then addactiveClass name to配合前端JavaScript or CSS to implement default activation effect.

Practical suggestions and precautions

• Image optimization:The uploaded Banner image should be appropriately compressed, maintaining a moderate file size to ensure the website loads quickly.At the same time, unify the size and aspect ratio of the images can make the carousel look more professional and beautiful.