How to display the home page or specific group's Banner carousel image?

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

One, Backend Settings: Prepare for your Banner content

Managing Banner images in AnQi CMS is very flexible. You can set up a universal carousel for the entire site, or add dedicated Banners for specific content (such as category pages or standalone pages).

1. Configure the Banner Carousel on the homepage or a custom group

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, and you will find a dedicated area for managing banners.Here, you can add, edit, sort, and group your Banner images.
  • Add a new Banner image:Click the “Add” button, you can upload an image and fill in the following information for each image:
    • Image file:This is the main content of the Banner. It is recommended to upload images of the same size to ensure the coordination of the carousel effect.
    • Link address:When the visitor clicks 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 and improve SEO effectiveness, but also provides alternative information when the image cannot be loaded.
    • Introduction:Short text description that can be used as a Banner title or subtitle displayed on the frontend.
    • Group name:This is the key to managing the Banner carousel images.The AnQi CMS allows you to set different 'group names' for Banner images (for example, you can create a group named 'Home Slider' and another named 'Promotion Event').By default, all Banners that are not specified in any group will be assigned to the "default" group.Reasonably utilize 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 product category page or an independent "About Us" page to have a unique Banner 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 on the back end.
    • Select the category you want to edit, click the "Edit" button to enter the category details page.
    • Find the 'Banner Image' setting option on the page.You can upload one or more images here as the exclusive banner carousel for this category page.These images will only take effect on the category page and will not interfere with the Banner on other pages.
  • Independent Page Banner:
    • Go to the "Page Resources" -> "Page Management" interface on the backend.
    • Select the independent page you want to edit, click the "Edit" button to enter the page details page.
    • Similarly, find the 'Banner Image' setting option in 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 frontend

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.The AnQi CMS uses syntax similar to the Django template engine, making template writing intuitive and efficient.

1. Call Banner Carousel on the homepage

The home page banner is usually placed at the top of the page, for example, in your template file.index.htmlOr in the common header file.partial/header.html.

To call the homepage carousel configured in the background "Banner Management", you can usebannerListLabel.

{% 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 fetch all Banner image data belonging to the 'default' group from the background and assign it.bannersThis variable (you can customize the variable name, for example)homepageBanners).
  • {% for item in banners %}: Through loop traversal)bannersthe variable, you can access the information of each Banner image one by one.
  • item.LinkGet the jump link after Banner click.
  • 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 little trick,forloop.CounterReturns the current loop count (starting from 1). You can use it to add aactiveClass name, commonly used to initialize display in many front-end carousel components (such as Swiper, Owl Carousel, etc.).
  • {% endbannerList %}and{% endfor %}: withbannerListandforLabel pairing usage, indicating the end of a code block.

Call the Banner of a specified group:

If you have set different groups (such as 'Event Slides') for Banners in the background, when calling in the template, you only need to givebannerLista labeltypethe parameters:

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

{# 同样地，在这里