How to display the Banner slideshow image on the homepage or a specific group?

The home page and banner slideshow of specific groups, which is a key element to attract visitors and display core content on the website.A system with convenient management and flexible display, which can make your website operation twice as efficient.AnQiCMS (AnQiCMS) takes advantage of its intuitive design and powerful template tag features, allowing you to easily handle these visual elements, whether it's creating an eye-catching homepage banner or customizing exclusive promotional images for specific category pages, you can do so with ease.

Today, let's delve into how to make your Banner slideshow images come to life in Anqi CMS.

One, background settings: prepare for your banner content

In Anqi CMS, managing Banner images is very flexible. You can set up a universal carousel for the entire site, or add exclusive Banners for specific content (such as category pages or standalone pages).

1. Configure the homepage or custom group Banner carousel

This is the most common Banner application scenario, usually used to display core values or the latest activities on the homepage.

• Enter the Banner management interface:Log in to the AnQi CMS backend, where you will find a dedicated area for managing banners.In here, you can add, edit, sort and group your Banner images.
• Add a new Banner image:Click the 'Add' button, you can upload images and fill in the following information for each image:
  • Image file:This is the main body of the Banner. It is recommended to upload images of the same size to ensure the coordination of the carousel effect.
  • Link address:When a visitor clicks on the Banner, which page will it jump to? You can set a related internal page link or an external event link.
  • Alt text:This is an important description of the image, which not only helps search engines understand the content of the image, but also improves SEO effects, and can provide alternative information when the image cannot be loaded.
  • Introduction:A brief description that can be displayed as a Banner title or subtitle on the front end.
  • Group name:This is the key to managing the Banner carousel images. Anqi CMS allows you to set different 'group names' for Banner images (for example, you can create a group named 'Home Slide' and another named 'Promotion Event').By default, all Banners that have not been assigned to a specific group will be grouped under "default".Reasonably utilizing grouping can help you call different Banner collections on different pages.

2. Configure a dedicated Banner for a specific category or independent page

Sometimes, you may want a unique Banner for a product category page or an independent 'About Us' page to enhance its thematic nature.The Anqi CMS also provides such a convenient feature.

• Category page Banner:
  • Go to the "Content Management" -> "Document Category" interface in the background.
  • Select the category you want to edit, click the "Edit" button to enter the category detail page.
  • Find the "Banner image" setting item on the page. You can upload one or more images here as the exclusive banner carousel for this category page.These images will only be effective on this category page and will not interfere with the Banner on other pages.
• Independent Page Banner:
  • Go to the background's 'Page Resources' -> 'Page Management' interface.
  • Select the independent page you want to edit, click the "Edit" button to enter the page details page.
  • Find the "Banner Image" setting item on the page. You can upload exclusive banner carousel images here, which will be displayed only on this independent page.

Template call: Display your Banner on the website front end

After the background configuration is completed, the next step is to use the tags provided by Anqi CMS in the corresponding template files on the website frontend to call and display these banner images.AnQi CMS uses a syntax similar to the Django template engine, making template writing intuitive and efficient.

1. Call the Banner carousel on the homepage

Generally, the home page banner is placed at the top of the page, for example, in your template fileindex.htmlor the public header filepartial/header.html.

To call the homepage carousel configured in the "Banner Management" backend, you can usebannerList.

{% bannerList banners %}
    <div class="swiper-container"> {# 假设您使用Swiper或其他前端轮播库 #}
        <div class="swiper-wrapper">
            {% for item in banners %}
            <div class="swiper-slide {% if forloop.Counter == 1 %}active{% endif %}">
                <a href="{{item.Link}}" target="_blank">
                    <img src="{{item.Logo}}" alt="{{item.Alt}}" />
                    {# 如果您在后台Banner的“介绍”字段填写了文字，也可以在这里显示 #}
                    {% if item.Description %}
                    <div class="banner-description">
                        <h5>{{item.Description}}</h5>
                    </div>
                    {% endif %}
                </a>
            </div>
            {% endfor %}
        </div>
        {# 如果需要，可以添加分页器和导航按钮 #}
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
{% endbannerList %}

Code analysis:

• {% bannerList banners %}This is the core tag, it will retrieve all banner image data belonging to the "default" group from the background and assign it tobannersThis variable (you can customize the variable name, for examplehomepageBanners)
• {% for item in banners %}: Traverse through the loopbannersvariable, you can access the information of each Banner image one by one.
• item.LinkGet the jump link after clicking the Banner.
• item.LogoGet the URL address of the Banner image.
• item.AltGet the Alt text of the Banner image.
• item.Description：Get the introduction text of the Banner image.
• {% if forloop.Counter == 1 %}active{% endif %}：This is a small trick,forloop.CounterIt will return the current loop count (starting from 1). You can use it to add a picture to the first Banner.activeClass name, commonly used to initialize display in many front-end carousel components (such as Swiper, Owl Carousel, etc.)
• {% endbannerList %}and{% endfor %}: withbannerListandforThe tag is used for pairing, indicating the end of a code block.

Call the Banner of the specified group:

If you have set different groups for Banner in the background (such as "Activity Slide"), when calling in the template, just givebannerListlabel totypeJust set the parameters:

`twig {% bannerList activityBanners with type=“Activity Slides” %}

{# 同样地，在这里