In Anqi CMS, configuring and displaying the banner carousel image on the homepage is a key step to enhance the visual appeal and content presentation effect 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 the Banner carousel image in the background
The Banner image on the homepage is not randomly stacked; it requires careful management to ensure it displays as expected on the front end. Anqi CMS provides a flexible way to handle these images:
Image upload and grouping: Usually, you will find an entry specifically for managing Banners in the "Page Resources" or "Content Management" related area of the backend.Here, you can upload your Banner image.When uploading each image, the system will allow you to enter some key information, such as:
- Link Address: The target page to jump to when the user clicks on 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 'home carousel') for a group 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 locations.The system will have a 'default' group by default.
When uploading images, it is recommended that you use images with consistent dimensions and proportions, which can prevent the carousel from jumping or layout confusion when switching, thereby providing a smoother user experience.
Category and dedicated banner for single page (for reference, not directly used for the home page carousel):It is worth mentioning that Anqi CMS also allows you to upload exclusive Banner images for specific category pages or single pages (such as the "About Us" page) through the "Document Classification" or "Page Management" feature.Although these images are usually used on their respective pages rather than on the homepage carousel, understanding these features can help you customize the visual elements for different parts of the website when needed.
Second, display the Banner carousel in the front-end template
Once your Banner image is configured in the background and grouped, the next step is to display them on the homepage through template tags.AnQi CMS uses the 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 based on the specified group name.
This 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 banners with the group name "Home Slide" and store them in a namedbannersIn the variable. If you have not set a group, or want to call the Banner of the default group, you can omit itwith type="..."Section.{% 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 overbannersEach Banner image in the list. In each loop, the details of the current image will be stored initemthe variable.item.Link: Get the link address of the Banner image.item.LogoGet the actual file path of the Banner image. This is the most commonly used field, usually the large image of the Banner.item.AltGet the image 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 to dynamically add the first element of the carouselactiveCSS class. Many front-end carousel libraries (such as Swiper, Owl Carousel, etc.) depend on this class to initialize the carousel.
3. Further improve the display effect.
It is not enough to form a dynamic slideshow just by displaying images through template tags.In order to achieve smooth switching, automatic playback, navigation buttons, and other functions, you also need to combine the frontend CSS styles and JavaScript code.
- CSS style:Define responsive styles for carousel containers and images to ensure they display well on different devices. For example, set the image width to 100%, height auto, or use
object-fitThe attribute to control the display style of the image within the container. - 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 can flexibly configure and display the Banner carousel images on the homepage of Anqi CMS, adding dynamics and attractiveness to your website.
Frequently Asked Questions (FAQ)
- Why is my home page Banner image not displaying?First, please check if you have already