How to configure and display the Banner carousel image on the homepage of Anqi CMS?

Configuring and displaying the Banner carousel image on the homepage in AnQi CMS is a key step to enhancing the visual appeal and content presentation of the website.This process involves the upload and grouping management of background images, as well as the writing of front-end template code.

1. Configure Banner Carousel Image in the Background

The Banner images on the homepage are not randomly stacked, they require careful management to ensure they display as expected on the front end. The Anqi CMS provides a flexible way to handle these images:

  1. Image upload and grouping:usually, you will find a special entry for managing banners in the "page resources" or "content management" area on the backend.Here, you can upload your Banner image.

    • Link address (Link): The target page to jump to when the user clicks the Banner.
    • Image description (Alt)：Used for image SEO optimization and auxiliary functions, this text will be displayed when the image cannot be shown.
    • Group name (Type)This is an extremely important setting.By setting the same 'group name' (such as 'Home Slide' or 'Homepage Carousel') for a set of Banner images, you can accurately call this group of images in the front-end template to achieve the need to display different Banners at different positions.系统默认会有一个“default”分组。

    When uploading images, it is recommended that you use images with consistent dimensions and proportions. This can avoid the image from jumping or the layout from becoming chaotic during the transition of the carousel, thus providing a smoother user experience.

  2. Category and Single Page Exclusive Banner (for reference, not directly used for the homepage carousel):

II. Display Banner Carousel in Front-end Template

Once your Banner image is configured in the background and grouped, the next step is to display them on the homepage using template tags.The Anqi CMS uses Django template engine syntax, calling data through specific tags.

To display the home page banner carousel, you need to usebannerListthe tag. This tag will retrieve the corresponding banner image list according to the group name you specify.

Here is a typicalbannerListLabel usage example:

{# 使用 bannerList 标签获取名为“首页幻灯”的 Banner 列表 #}
{% bannerList banners with type="首页幻灯" %}
    {# 检查是否有 Banner 图片，避免页面空白 #}
    {% if banners %}
    <div class="banner-carousel">
        {% for item in banners %}
        {# 为第一个 Banner 添加 active 类，通常用于轮播图的初始显示状态 #}
        <a href="{{item.Link}}" target="_blank" class="banner-item {% if forloop.Counter == 1 %}active{% endif %}">
            <img src="{{item.Logo}}" alt="{{item.Alt}}" class="banner-image" />
            {# 如果 Banner 有描述或标题，也可以在这里显示 #}
            {% if item.Description %}
            <div class="banner-caption">
                <h5>{{item.Title}}</h5> {# 虽然文档中没有明确提到Title字段，但常用于Banner描述 #}
                <p>{{item.Description}}</p>
            </div>
            {% endif %}
        </a>
        {% endfor %}
    </div>
    {% else %}
    {# 当没有 Banner 图片时，可以显示一个占位符或提示信息 #}
    <div class="no-banner-placeholder">
        <p>暂无轮播图片，敬请期待！</p>
    </div>
    {% endif %}
{% endbannerList %}

Code analysis:

  • {% bannerList banners with type="首页幻灯" %}This line of code tells the system that we want to retrieve all the Banner images with the 'Group Name' as 'Home Slider' and store them in a file namedbannersThe variable in. If you have not set the group, or want to call the default group's Banner, you can omit itwith type="..."Part.
  • {% if banners %}：This is a conditional judgment to ensure that the carousel structure is only rendered when the Banner image list is obtained.
  • {% for item in banners %}：This is a loop structure that will iterate overbannersThe image of each Banner in the list. The detailed information of the current image will be stored initemthe variable.
  • item.Link: Get the link address of the Banner image.
  • item.Logo：Get the actual file path of the Banner image. This is the most commonly used field, usually the large image of the Banner.
  • item.Alt：Get the description text of the Banner image.
  • item.Description：Get the introduction text of the Banner image.
  • {% if forloop.Counter == 1 %}active{% endif %}This is a commonly used technique, used to dynamically add aactiveCSS class. Many frontend carousel libraries (such as Swiper, Owl Carousel, etc.) depend on this class to initialize the carousel.

Three, further improve the display effect.

It is not enough to display images through template tags to form a dynamic carousel effect.To achieve smooth transitions, automatic playback, navigation buttons, and other functions, you also need to combine the front-end CSS styles and JavaScript code.

  1. CSS Styles:Define responsive styles for carousel containers and images to ensure good display on different devices. For example, set the image width to 100%, height auto, or useobject-fitThe property controls the display style of the image within the container.
  2. JavaScript Carousel Library:Introduce popular JavaScript carousel libraries (such as Swiper.js, Owl Carousel, etc.), and then initialize your Banner carousel container according to their documentation.These libraries usually provide rich features and animation effects, making your home page banner more interactive.

By following these steps, you will be able to flexibly configure and display the home page banner carousel images in the Anqi CMS, adding dynamic and attractiveness to your website.

Common Questions and Answers (FAQ)

  1. Why is my home page Banner image not displaying?Firstly, please check if you have