How to display a custom Banner group in a single page in AnQi CMS?

In website operation, we often need to display a set of exquisite pictures on specific single pages, such as the carousel of product special page, the promotional Banner of event introduction page, or the group photos showing the company's style on the "About Us" page.AnQiCMS (AnQiCMS) fully considers these needs, providing an intuitive and efficient way for you to easily implement the display of custom Banner group images on a single page without writing complex code.

Configure single page Banner group image in AnQi CMS backend

The AnqiCMS integrates the Banner group image function directly into the single-page editing interface, making it very convenient to manage.

First, you need to log in to the Anqi CMS backend management system.Find and click on 'Page Resources' under the left navigation bar.Here, you can choose to edit an existing single page or create a brand new one.

After entering the single-page editing interface, scroll down and you will see a region named "Banner image".This area is exactly where you upload and manage the exclusive Banner group image for this single page.You can click the upload button to select multiple images you wish to display.The Anqi CMS supports batch uploads, and to achieve **display effects, it is recommended that you upload images of the same size, which will be more coordinated and beautiful in the frontend display.After uploading, these images will be bound to the current single page.

Display the Banner group in the template

After completing the background image upload and configuration, the next step is to figure out how to display these Banner group images on the website front-end page.AnQi CMS uses a syntax similar to the Django template engine, allowing data calls through concise template tags.

The core template tag for the Banner group on a single page ispageDetail. This tag helps us get the detailed information of the current single page, which includes the group image data we uploaded. These group images will be namedImagesThe field stores.

To display these group images in a single-page template (usually named)page/detail.htmlor a custom single-page template such aspage/about.html), you can write the template code like this:

{# 使用 pageDetail 标签获取当前单页面的 Images 字段，并将其赋值给变量 pageImages #}
{% pageDetail pageImages with name="Images" %}

{# 检查是否存在 Banner 组图 #}
{% if pageImages %}
<div class="banner-carousel">
    <ul>
    {# 循环遍历 pageImages 数组，展示每一张 Banner 图 #}
    {% for item in pageImages %}
        <li>
            {# 图片的 src 属性直接使用 item 变量，因为它就是图片的 URL #}
            {# alt 属性可以获取当前单页面的标题，提升 SEO 和可访问性 #}
            <img src="{{item}}" alt="{% pageDetail with name="Title" %}" />
        </li>
    {% endfor %}
    </ul>
</div>
{% else %}
{# 如果没有上传 Banner 图，可以显示一个默认内容或留空 #}
<div class="no-banner-placeholder">
    此页面暂无 Banner 组图。
</div>
{% endif %}

In this code block:

• {% pageDetail pageImages with name="Images" %}: We go throughpageDetailTag to specify the retrieval ofImagesField content and store it inpageImagesthe variable.
• {% if pageImages %}This is a conditional judgment to ensure that the subsequent picture display logic is executed only when the single page has indeed uploaded the Banner group image, to avoid page errors.
• {% for item in pageImages %}We useforLoop throughpageImagesarray. In each iteration,itemThe variable will represent the URL of the current image.
• <img src="{{item}}" alt="{% pageDetail with name="Title" %}" />Here it is used directlyitemAs an imagesrcThe attribute value. For SEO-friendliness and user experience, the image'saltThe property we called the title of the current single page.

If you only need to get the first Banner image as the main visual of the page, or use it as a CSS background image, you can further optimize:

{% pageDetail pageImages with name="Images" %}
{% set firstBanner = "" %}
{% if pageImages and pageImages|length > 0 %}
    {# 获取数组中的第一张图片URL #}
    {% set firstBanner = pageImages[0] %}
{% endif %}

{% if firstBanner %}
    {# 作为普通图片显示 #}
    <img src="{{firstBanner}}" alt="{% pageDetail with name="Title" %}" class="single-page-banner" />

    {# 或者作为背景图应用到某个 div 上 #}
    <div class="hero-section" style="background-image: url('{{firstBanner}}');">
        <h1>{% pageDetail with name="Title" %}</h1>
        <p>{% pageDetail with name="Description" %}</p>
    </div>
{% endif %}

By following these steps, you can flexibly display the custom Banner group image on the single page of Anq CMS.This greatly simplifies the process of content editing and template development, allowing you to focus more on the presentation of content and the optimization of user experience.

Frequently Asked Questions (FAQ)

1. Ask: If I want to display different Banner groups on different single pages, do I need to create a separate template for each page? Answer:It is not necessary. The "Banner Image" feature of Anqi CMS is independently configured for each single page.You just need to upload the exclusive Banner group image on each single page editing interface.In the template, usepageDetail with name="Images"When called, the system will automatically retrieve the Banner group image bound to the current single page being accessed, without the need for you to write a different template file for each page.

2. Ask: Can other content types (such as article categories, product categories) also set Banner groups? Answer:Yes, AnQi CMS's content model design is very flexible.The article category and product category both support setting Banner group images.In the category editing interface, you will also find similar 'Banner image' options, the upload method is the same as the single page.In the template, you can usecategoryDetail with name="Images"Tag to call the Banner group image of the category.

3. Q: What problems can be caused by inconsistent Banner image sizes uploaded? How to avoid them? Answer:If the size of the uploaded Banner image is inconsistent, it may cause layout confusion, image distortion, or poor carousel effect on the front end, affecting the beauty of the page.To avoid this situation, it is recommended to ensure that the same set of Banner images have the same width and height when designing or uploading images.You can configure the processing method and size of the image thumbnail in the "Content Settings" backend, but it is best to unify the image size at the source file stage.