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

In Anqi CMS, the homepage banner slideshow is an important element that attracts visitors' attention and showcases core content.Effectively acquiring and displaying these Banner images can greatly enhance the visual appeal and user experience of the website.The AnQi CMS provides intuitive functions and flexible template tags, allowing us to easily achieve this goal.

Step 1: Configure your Banner carousel image in the background

Before starting to display Banner on the website frontend, 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 new Banner entries, upload images (i.e., Logo) for each Banner, set the link (Link) that the click will redirect to, add alternative text (Alt) for search engine understanding and accessibility, and write a brief description (Description).

An essential setting is the 'Group Name' (type).The AnQi CMS allows you to set different groups for different Banner slideshows.For example, you can create a group named "Home Carousel" to specifically display the Banner on the homepage.So, when you call it in the template, you can precisely specify which group's Banner to display.Ensure that a clear group name is selected for the homepage carousel, such as 'default' or 'Homepage Banner', and maintain consistent image sizes to ensure the visual harmony of the carousel.

Step two: Call and display the Banner Carousel in the template.

After completing the backend configuration, the next step is to display these exquisite banner images on the homepage of your website.This is mainly achieved through the template tags of AnQi CMS.index.htmlOr the public segment files it contains.

The Anqi CMS provides a special purpose for this.bannerList[en]A tag that helps us retrieve the Banner list configured on the backend.

[en]Basic calling method.

To get the list of all default groups' Banners, 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 above code:

• {% bannerList banners %}The label will assign the data of the Banner list configured on the back-end to a variable namedbanners.
• {% for item in banners %}The loop will iterate over thebannersEach item in the list of Banners.
• Inside the loop,itemthe variable represents the data of the single Banner currently being processed. We can useitem.Logoto get the image address,item.LinkGet the jump link,item.AltGet the alternative text for the image, as well as,item.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", you need to specify the group through the parameter when calling it in the template:typeParameter to specify the group:

{% 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 %}

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

Add a special style to the first Banner

In many carousels, the first Banner item may need to be in an active state when loaded or have special styles. You canforloop.CounterTo determine if the current element is the first element in a 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, and if so, addactiveClass name, to cooperate with front-end JavaScript or CSS to implement default activation effect.

Practical suggestions and precautions

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