How to customize the display of banner carousel images on the homepage of the website?

In website operation, the home page banner carousel image is an important component to attract visitors' attention and convey core information.AnQiCMS (AnQiCMS) understands this need and provides a flexible and convenient way, allowing you to easily customize the display of these key visual elements on the homepage.

Preparation: Manage your Banner images in the background.

Firstly, we need to ensure that the images used for the carousel have been uploaded and properly managed.The 'AnQi CMS' usually provides a dedicated 'Banner Management' area in the background, or manages it centrally under 'Page Resources' -> 'Image Resource Management'.

In the Banner management feature, you can:

  • Upload imagesChoose the carefully designed Banner image you have selected. To ensure the website loads quickly and displays effectively, it is recommended to optimize the image size and dimensions in advance.
  • Add Link (Link)Set a redirect link for each Banner image to guide visitors to visit specific pages after clicking, such as product introductions, event details, etc.
  • Fill in the alternative text (Alt)To add descriptive alternative text to an image.This not only helps with SEO and improves the visibility of images in search engines, but also provides text descriptions when images fail to load, enhancing the accessibility of the website.
  • Add Description (Description)This is a brief text description for the Banner image, which can be used in some templates to display above or below the image, increasing the amount of information.
  • Group by TypeThis is a very practical feature.AnQiCMS allows you to group manage banners.For example, you can create different groups named 'Home Main Carousel', 'Product Page Carousel', or 'Mobile End Carousel', etc.The banner images on the homepage can be unified into a default 'default' group, or you can create a custom group like 'Slideshow' for convenience in future calls.

This setting of the information is to ensure that your banner image is not only beautiful but also carries information and guides users.

Core Steps: Call the Banner list in the home page template

After completing the background management of the image, the next step is to call these Banner images in the template file of the website homepage.AnQiCMS uses a template engine syntax similar to Django, retrieving data through specific tags.

To display the home page banner carousel images, you need to use the AnQiCMS providedbannerListLabel. This label is specifically used to retrieve the Banner list data.

Open the homepage file of the current template used on your website (usually)index/index.htmlorindex.html）。Then, you can use the following code snippet to call and display your Banner image: 

<div class="banner-carousel">
    {% bannerList banners with type="default" %} {# 如果您没有自定义分组，可以使用默认的"default" #}
        {% for item in banners %}
        <a class="banner-item {% if forloop.Counter == 1 %}active{% endif %}" href="{{item.Link}}" target="_blank">
            <img src="{{item.Logo}}" alt="{{item.Alt}}" title="{{item.Title}}" />
            {% if item.Description %}
            <div class="banner-description">{{item.Description}}</div>
            {% endif %}
        </a>
        {% empty %}
        {# 如果没有Banner图片，这里可以显示一个默认的占位符或者提示信息 #}
        <p>暂无Banner图片，敬请期待！</p>
        {% endfor %}
    {% endbannerList %}
</div>

Code analysis:

  • {% bannerList banners with type="default" %}This is the core tag, it tells AnQiCMS to get all banner image data under the specified group (heredefault), and assign the result to a variable namedbanners.
  • {% for item in banners %}: Iterate overbannersEach Banner image data in the array, each loop assigns the current Banner image data toitema variable.
  • {% if forloop.Counter == 1 %}active{% endif %}This is the key to implementing the carousel effect. Most front-end carousel plugins (such as Swiper, Owl Carousel, etc.) require adding aactiveOr similar class name, to be displayed during initialization.forloop.CounterIs the built-in loop counter of the template engine, starting from 1.
  • <img src="{{item.Logo}}" alt="{{item.Alt}}" title="{{item.Title}}" />: Output the URL of the Banner image (item.Logo), alternative text (item.Alt) And the title (item.Title).
  • {% if item.Description %}: Check if the Banner has description information, if it does, then display it.
  • {% empty %}: This is an optional tag, whenbannersNo data is available in the list,emptyThe content within the block will be displayed.

After adding this code, you will see the image displayed on the page.To achieve the real "carousel" effect, you also need to introduce the corresponding JavaScript library and CSS styles on the front-end, and initialize their configuration.AnQiCMS is mainly responsible for providing Banner data, and the specific animation effects are implemented by the front-end code.

Customization and Optimization: Enhance User Experience

To make your Banner carousel more outstanding, you can further customize and optimize:

  • Style Adjustment: According to your website design, beautify the display of Banner images through CSS, including size, margin, transition effects, etc.
  • Front-end InteractionIntegrates popular JavaScript carousel plugins such as Swiper, Owl Carousel, etc., to achieve advanced carousel features like automatic playback, manual switching, indicators, and left-right navigation arrows.Ensure that these scripts and style files are correctly included in your template.
  • Responsive DesignEnsure that the Banner image displays well on different devices (PC, tablet, mobile) and prepare different sizes of Banner images for mobile devices if necessary.
  • Content updateRegularly update the Banner images to maintain the vitality and freshness of the home page content, in coordination with the latest marketing campaigns or important announcements.

By following these steps, you will be able to fully utilize the functions of AnQiCMS, customize the display of professional and attractive banner carousel images on the homepage, effectively enhancing the visual effects and user experience of the website.

Common Questions (FAQ)

  1. Why does my Banner image show up, but there is no carousel effect?AnQiCMSbannerListThe label is responsible for reading the Banner image data configured on the backend and displaying it on the frontend page.To achieve automatic sliding, switch animations, and other effects, it is usually necessary to introduce a JavaScript carousel plugin (such as Swiper, Owl Carousel, Slick, etc.) on the front-end, and then perform CSS style settings and JavaScript code initialization according to the documentation of these plugins.AnQiCMS provides image data, and the specific dynamic effects are implemented by the front-end code.

  2. Can I set different groups for Banner images in the AnQiCMS backend?Yes, AnQiCMS supportsbannerListtag supporttypeParameters. You can specify different "group names" for different Banner images in the Banner management feature on the backend. Then, in the template,{% bannerList banners with type="您的分组名称" %}Call a specific group's Banner to realize independent management and display of Banners in different areas such as the home page, product page, and event page.

  3. Can I customize the display of Banner images on other pages besides the homepage?Can be.According to the AnQiCMS documentation, not only can you set a Banner on the homepage, but you can also upload and display Banner images on category pages and single pages.In the 'Document Classification' editing page, there is a 'Banner Image' option, where you can set the carousel image for a specific category.Similarly, when editing a single page in 'Page Management', there is also a 'Banner Image' setting area, which can be used to set exclusive banners for single pages such as 'About Us' and 'Contact Us'.The calling methods of these Banners may be slightly different from the homepage, and the template tag document of the corresponding page needs to be consulted.