How to manage and display custom page Banner carousel in Anqi CMS?

In website operation, a beautiful page banner carousel is a key element to attract visitors' attention, convey important information, and enhance brand image.AnQiCMS provides a flexible and intuitive way to manage and display these visual contents, whether you want to set up a Banner for the homepage, a specific page, or a category page, it can be easily achieved.

Manage custom Banner carousel

The AnQi CMS allows you to set exclusive Banner images for different content types, mainly including Banners for specific pages, Banners for category pages, and Home or Global Banners implemented through tags.

For a specific page Banner:If you need to configure a Banner Carousel for single-page pages such as "About Us" and "Contact Us", you can go to the AnQi CMS backend management interface.First, click on the left menu's 'Page Resources', then select 'Page Management'.Here, you can edit an existing single page or create a new one.In the page editing interface, scroll down to find an option named "Banner image".You can upload multiple images here, which will constitute the banner carousel of this page.To maintain a neat and professional page layout, it is recommended that you upload images of consistent size.

For a category page Banner:For pages that need to display carousels for article categories, product categories, etc., the operation process is similar to that of a single page.You need to go to the "Content Management" backend, then click "Document Category"。Select the category you want to set for the Banner and edit it.In the category editing interface, you will also see an option for a "Banner image", where you can upload the Banner image for the category page.Similarly, please ensure that the uploaded images have a uniform size to maintain the consistency of the front-end display effect.

For the homepage or global Banner:AnQi CMS also providesbannerListThe label can be used to obtain the Banner image for the homepage or other general areas.Although the document does not directly display the detailed management entry on the background, the existence of this tag indicates that the system supports this kind of global Banner configuration.Generally, these Banners will have a 'group name' (type), such as 'slide', to distinguish different Banner groups for front-end calls.

Display Banner carousel in the front-end template

After completing the image upload and configuration on the back-end, the next step is to display these banners on the website front-end.This requires you to use specific tags in the Anqi CMS template files to call data.Anqi CMS uses a Django-like template syntax, through double curly braces{{变量}}and percent sign curly braces{% 标签 %}to operate data.

Get single page Banner data:In the template file of a single page (for examplepage/detail.htmlor a custom single page template), you can usepageDetailLabel to get the details of the page, including Banner images. The label provides a name calledImagesThe field will return an array containing all the Banner image URLs.

{# 假设在单页面模板中获取Banner图片 #}
{% pageDetail pageImages with name="Images" %}
<div class="banner-carousel">
    {% for imageUrl in pageImages %}
    <div class="carousel-item">
        <img src="{{ imageUrl }}" alt="页面Banner" />
    </div>
    {% endfor %}
</div>

If your design only needs to display a background image and not a carousel, you can also directly obtain the first image from the array:

{% pageDetail pageImages with name="Images" %}
{% if pageImages %}
{% set firstBanner = pageImages[0] %}
<div class="page-header" style="background-image: url('{{ firstBanner }}');">
    {# 这里可以放置页面标题等内容 #}
</div>
{% endif %}

Get the Banner data for the category page:Similar to a single page, in the template file of the category page (such as{模型table}/list.htmlor a custom category template), you can usecategoryDetailtags to get the category Banner image. Similarly, through