How to customize the display of Banner Carousel images on the website homepage?

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

Preparation: Manage your Banner images in the background

First, we need to make sure 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' in the 'Image Resource Management'.

In the Banner management feature, you can:

  • Upload image：Select your carefully designed Banner image. To ensure website loading speed and display quality, 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 a specific page after clicking, such as product introduction, event details, etc.
  • Enter alternative text (Alt): Add descriptive alternative text to images. This not only helps with SEO and improves the visibility of images in search engines, but also provides text descriptions when images cannot be loaded, enhancing the accessibility of the website.
  • Add Description (Description): Provide a brief description of the Banner image, which can be used in some templates to display above or below the image, increasing the amount of information.
  • Grouping (Type)This is a very practical feature. AnQiCMS allows you to group manage Banners.For example, you can create groups named "Home Main Carousel", "Product Page Carousel", or "Mobile End Carousel", and so on.The Banner image on the homepage can be categorized into a default "default" group, or you can create a custom group like "Slide" for easy future calls.

These settings of this information are to make your Banner image not only beautiful but also carry information and guide users.

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

After completing the background management of the images, 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 image, you need to use the AnQiCMS providedbannerListLabel. This tag is specifically used to get the Banner list data.

Open the homepage file of the template currently in use on your website (usuallyindex/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 that tells AnQiCMS to get all banner image data under the specified group (here isdefaultthe group) and assign the result to a variable namedbanners.
  • {% for item in banners %}：TraversebannersEach Banner image data in the array, each loop assigns the current Banner image data toitemVariable.
  • {% 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.) need to add a picture to the first one.activeOr a similar class name, so that it can be displayed during initialization.forloop.CounterIs a loop counter built into 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 Title (item.Title).
  • {% if item.Description %}: Determine if the Banner has description information, if it does, display it.
  • {% empty %}: This is an optional tag, whenbannersThere is no data 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 a real "carousel" effect, you 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.

Customize and optimize: 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 interaction：Integrating popular JavaScript carousel plugins such as Swiper, Owl Carousel, and others to achieve advanced carousel functions like automatic playback, manual switching, indicators, and left-right navigation arrows.Make sure these script and style files are correctly included in your template.
  • Responsive DesignMake sure 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 image to maintain the vitality and freshness of the homepage content, in coordination with the latest marketing activities or important notifications.

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

Frequently Asked Questions (FAQ)

  1. Why did my Banner image display but not the carousel effect?AnQiCMS'bannerListThe label is mainly responsible for reading the banner image data configured on the backend and displaying it on the frontend page.To implement automatic sliding, switching animation and other effects, it is usually necessary to introduce JavaScript carousel plugins (such as Swiper, Owl Carousel, Slick, etc.) on the front end and set CSS styles and initialize JavaScript code 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'bannerListTag supporttypeParameters. You can specify different "group names" for different Banner images in the background Banner management function. Then, in the template,{% bannerList banners with type="您的分组名称" %}Call the Banner of a specific group to achieve independent management and display of Banners in different areas such as the homepage, product page, and event page.

  3. Can I customize the display of Banner images on pages other than the homepage?Can be. According to the AnQiCMS document, you can not only set the Banner on the homepage, but also upload and display Banner images on the category page and single page.In the "Document Category" editing page, there is a "Banner Image" option, where you can set the carousel images for specific categories.Similarly, when editing a single page in the "Page Management", there is also a "Banner Image" setting area, where you can set a dedicated Banner for single pages such as "About Us", "Contact Us", etc.The way these banners are called may be slightly different from the homepage, and you need to consult the template tag document of the corresponding page.