How to display a dynamic banner image on the homepage of a website and implement click-through?

Displaying dynamic banner images on the website homepage with click-through functionality is a common requirement to enhance the visual appeal and user engagement of a website.By utilizing the powerful functions and flexible template mechanism of AnQiCMS, we can easily achieve this goal.The entire process is mainly divided into two parts: background configuration and front-end template calling.

Step 1: Configure Banner Image and Link on the Back-end

To display a dynamic banner on the homepage of the website, you first need to upload the images and set the links in the AnQiCMS backend.

Generally, in the AnQiCMS backend's 'Content Management' or 'Page Resources' module, there will be a special 'Banner Management' or 'Slide Management' feature entry.If your template supports custom Banner grouping, you can also create a new group here, such as naming it "Home Carousel" for clearer management.

Next, you need to add banners one by one. When adding or editing each banner, the key information settings include:

  • Image upload:Upload the banner image you have prepared. To ensure the visual consistency of the carousel effect, it is recommended that all banner images maintain consistent dimensions.
  • Image title/description:Enter the title and description of the Banner, which can be displayed above the image on the front end and provide more information.
  • Alt text:This is the alternative text for the image, which is very important for search engine optimization (SEO) and improving the accessibility of the website.Please fill in meaningful alt text for each image, briefly describe the content of the image.
  • Redirect link: This is the core of the click-through implementation. Here, enter the URL address that the user should visit after clicking on the Banner image.This link can be an in-site article, a product page, or an external promotional page.

After uploading all Banner images and configuring the information, save your settings.

Step 2: Call in the front-end template file.

After configuring the background data, the next step is to display these Banner data on the homepage of the website. This requires you to edit the homepage template file of the website.

In AnQiCMS, the home page template files are usually located intemplatethe folder under the theme directory of the template you are currently using, for exampledefault/index/index.htmlordefault/index.html. You can edit online through the 'Template Design' feature in the background, or directly modify the files through FTP and other methods.

In the home page template file, you can use the AnQiCMS providedbannerListThe tag is used to retrieve the Banner data configured on the background. This tag can flexibly retrieve the Banner list you set up on the background and provide image addresses, links, and other information.

This is a basic template call example, showing how to obtain Banner data and build an HTML structure:

<div class="banner-carousel">
    {% bannerList banners with type="default" %} {# 如果您创建了自定义分组，将 "default" 替换为您的分组名，例如 "首页轮播" #}
        {% for item in banners %}
            <a href="{{ item.Link }}" target="_blank"> {# item.Link 就是您在后台设置的跳转链接 #}
                <img src="{{ item.Logo }}" alt="{{ item.Alt }}" /> {# item.Logo 是图片地址，item.Alt 是Alt文本 #}
                {# 您也可以在这里添加 item.Title 或 item.Description 来显示文本信息 #}
                {% if item.Title %}
                    <div class="banner-title">{{ item.Title }}</div>
                {% endif %}
            </a>
        {% endfor %}
    {% endbannerList %}
</div>

In this code block:

  • {% bannerList banners with type="default" %}: This is the tag to call the Banner list.bannersThis is the variable name specified for this list.type="default"Indicates the Banner obtained for the default group. If you have created a custom group, pleasedefaultreplace it with your group name.
  • {% for item in banners %}: AnQiCMS will treat each Banner data obtained as oneitemPerform a loop.
  • {{ item.Link }}: It will output the jump link of each Banner.
  • {{ item.Logo }}：The image address of each Banner will be output.
  • {{ item.Alt }}：The Alt text of each Banner will be output.
  • target="_blank"This is an optional attribute, used to set the new window or new tab to open after clicking on the link.

Implement dynamic carousel effect:

AnQiCMS'bannerListThe label is mainly responsible for providing Banner data, while dynamic carousel effects (such as smooth transitions, auto-play, left and right switch buttons, and bottom indicators, etc.) usually require the implementation of front-end JavaScript libraries and CSS styles.Common carousel libraries include Swiper, Owl Carousel, etc.

You need to include the CSS and JavaScript files of these libraries in the front-end page, then follow their documentation to initialize the HTML structure containing the Banner image as a dynamic carousel with a few simple lines of JS code. For example, an initialization of Swiper might look like this:

// 假设您已经引入了Swiper的CSS和JS文件
var mySwiper = new Swiper('.banner-carousel', {
    loop: true, // 循环模式选项
    autoplay: {
        delay: 3000, // 自动播放间隔
        disableOnInteraction: false, // 用户操作后不停止自动播放
    },
    pagination: { // 底部小圆点
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: { // 左右箭头
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

Remember, the above JavaScript code needs to be adjusted according to the carousel library and its specific configuration you choose.

Optimization and注意事项

  • Image size and loading speed:The home page banner image is usually large, and it is recommended to compress the image appropriately to not affect the website loading speed.AnQiCMS provides options such as 'Whether to automatically compress large images', 'Whether to enable Webp image format', etc. under 'Content Settings' to help you optimize image size.
  • Responsive design:Ensure that your Banner image and its container display well on different devices (such as mobile phones, tablets, computers).This is usually achieved through CSS media queries and the responsive functionality of carousel libraries.
  • SEO friendly:Except for fillingaltText, the content of the Banner is best to exist in HTML text form (not part of the image), which is more beneficial for search engines to capture and understand.
  • Accessibility:Consider adding pause/play buttons to the carousel and ensure that keyboard navigation and other functions work properly to enhance the experience for all users.

By following these steps, you can easily display a dynamic carousel banner image with click-through functionality on the homepage of the website powered by AnQiCMS, adding vitality and user attraction to your website.

Frequently Asked Questions (FAQ)

Q1: Why does the dynamic effect not appear after uploading the Banner image? A1:AnQiCMS'bannerListThe tag is mainly used to retrieve Banner data from the backend and render it into an HTML structure.The actual dynamic carousel effect (such as smooth transition, auto-play, navigation arrows, etc.) usually requires implementing through frontend JavaScript code and CSS styles.You need to integrate a frontend carousel library (such as Swiper, Owl Carousel) and initialize it according to its documentation to see the dynamic effects.

Q2: How to set different Banner sliders for different pages (such as category pages, single pages)? A2:In addition to the global Banner on the homepage, AnQiCMS also supports setting Banners for specific pages.

  • Category page Banner:In the background "Content Management" -> "Document Category", editing a category will have a "Banner Image" option, where you can upload exclusive carousel images for this category. On the category page template, you can usecategoryDetailLabel to get the banner group image of this category, for example{% categoryDetail categoryImages with name="Images" %}.
  • Single page Banner:Similarly, editing a single page in "Page Resources"->"Page Management" also has a "Banner Image" option, accessible through the single page template.pageDetailtag, for example{% pageDetail pageImages with name="Images" %}.
  • Home Global Banner:If you used parameters while configuring in the background,tag-/anqiapi-other/3498.htmlmentionedtypeto create different Banner groups, for example,type="首页轮播"then you can navigate through them in the home template.{% bannerList banners with type="首页轮播" %}Call these images specifically to implement the exclusive carousel on the homepage.

Q3: What's the matter with the banner image not being able to jump after clicking? A3:This is usually because the redirect link is not configured correctly or the template is not used correctly. Please check the following points:

  1. Backend link configuration:Confirm that when editing each Banner on the AnQiCMS backend, you have filled in the complete, accessible URL in the corresponding 'Jump Link' field.
  2. Template tags use:Ensure that the properties are used correctly in the template file,<a>label'shref`{{ item.Link