In website operation, we often need to display a set of exquisite pictures on specific single pages, such as the carousel on the product special page, the promotional Banner on the event introduction page, or the group photos showcasing the company's style on the "About Us" page.The AnQiCMS (AnQiCMS) fully considers such needs and provides an intuitive and efficient way for you to easily display custom banner group images on a single page without writing complex code.
In the auto CMS background configuration of single page Banner group image
The CMS 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 backend management system of Anqi CMS.Find and click on "Page Resources" under "Page Management" in the left navigation bar.Here, you can choose to edit an existing single page or create a new single page.
Enter the single-page editing interface, scroll down, and you will see a section named "Banner image".This area is used for uploading and managing the exclusive Banner group images for this single page.You can click the upload button and select multiple images you wish to display.The Auto CMS supports batch uploading, and to achieve **the display effect, it is recommended that you upload images of the same size, which will be more coordinated and beautiful in the front-end display.After uploading, these images will be bound to the current single page.
Call and display the Banner group in the template
The core template tag for the Banner group on a single page ispageDetailThis tag helps us get detailed information about the current single page, including the Banner group image data we uploaded. These images will be namedImagesThe field storage.
To display these groups in a single-page template (usually named)page/detail.htmlor a custom single-page template likepage/about.html), you can write the template code in this way:
{# 使用 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 through:pageDetailtags to specify the retrievalImagesThe content of the field, 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 Banner group picture is indeed uploaded on this single page, to avoid page errors.{% for item in pageImages %}We useforto iteratepageImagesthe array. In each iteration,itemThe variable will represent the current image URL.<img src="{{item}}" alt="{% pageDetail with name="Title" %}" />Here it is used directly:itemAs the imagesrcThe attribute value. To ensure SEO-friendliness and a good 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 image 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 %}
Through the above steps, you can flexibly display customized Banner groups on the single page of the CMS.This method greatly simplifies the process of content editing and template development, allowing you to focus more on content presentation and user experience optimization.
Common Questions (FAQ)
问：If I want to display different Banner groups on different single pages, do I need to create a separate template for each page? Answer:No need.The "Banner Image" feature of Anqi CMS is independently configured for each single page.You just need to upload the exclusive Banner group picture on each single page editing interface.
pageDetail with name="Images"When called, the system will automatically retrieve the currently accessed single-page Banner group image bound to it, without the need for you to write a different template file for each page.问：除了单页面，其他内容类型（如文章分类、产品分类）是否也能设置 Banner 组图？ Answer:Yes, the content model design of Anqi CMS is very flexible.The article category and product category both support setting a Banner group image.In the category editing interface, you will also find similar 'Banner Image' options, with the same upload method as the single page.
categoryDetail with name="Images"Label to call the Banner group image of the category.Q: What problems can occur if the dimensions of the uploaded Banner images are inconsistent? How can this be avoided? Answer:If the size of the uploaded Banner image is inconsistent, it may cause layout disorder, image distortion, or poor carousel effect when displayed on the front end, affecting the aesthetics 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 image thumbnail processing method and size in the "Content Settings" backstage, but it is still better to unify the image size at the source file stage.