How to display custom Banner image and content in AnQiCMS single page?

In website operation, a well-designed single page often plays a vital role in brand display, product introduction, or promotion of specific activities.An eye-catching banner area that can quickly grab visitors' attention and convey key information.AnQiCMS as a flexible content management system provides a very convenient way for you to easily set up and display custom banner images and content on a single page.

Next, we will explore together how to implement this feature in AnQiCMS.

Step 1: Upload Banner image for the single page in the background.

AnQiCMS provides an intuitive interface for managing your static pages. To set a banner for a single page, you need to log in to the backend first.

1. Enter Page Management:After logging into the AnQiCMS backend, you will see the menu item 'Page Resources' in the left navigation bar, click on it, and then select 'Page Management'.Here is a list of all the single pages on your website.
2. Select or create a single page:You can choose to edit an existing single page, such as "About Us" or "Contact Information", or click "Add Single Page" to create a new page.
3. Upload Banner image:In the editing interface of a single page, scroll down and you will find a section named "Banner image".In here, you can click the upload button to select the banner image you have prepared.
   • You can upload a single image as the fixed banner of the page.
   • If your design requires a carousel effect, AnQiCMS also supports you uploading multiple images.The system will manage them as a group of banner images, convenient for you to call in the frontend template.
   • To ensure a unified and beautiful visual effect, it is recommended that you upload images with consistent size and proportion.

After the image upload is complete, remember to click the "OK" or "Save" button at the bottom of the page to save your changes to the system.

Second step: Design or modify the single-page template to display the Banner

After setting up the Banner image on the back-end, we need to inform AnQiCMS how to display them in the front-end template. AnQiCMS's template files are usually located/templateIn the directory. The default template path for a single page is usuallypage/detail.htmlBut you can also specify a custom template for a specific page.

We will mainly usepageDetailTag to retrieve image data from a single page. This tag is very flexible and can capture all relevant information on the page.

1. Display a single Banner image

If you only want to display the first Banner image you uploaded and make it the main visual element of the page, you can do this:

{%- pageDetail bannerImages with name="Images" %}
{%- if bannerImages %}
{%- set pageBanner = bannerImages[0] %}
<div class="page-banner" style="background-image: url('{{ pageBanner }}'); background-size: cover; background-position: center;">
    {# 您可以在这里叠加页面标题、简介等内容 #}
    <div class="container">
        <h1>{% pageDetail with name="Title" %}</h1>
        <p>{% pageDetail with name="Description" %}</p>
    </div>
</div>
{%- endif %}

This code first uses{% pageDetail bannerImages with name="Images" %}Get the list of all banner images associated with a single page.bannerImagesIt will be an array containing all image URLs. Next,{% set pageBanner = bannerImages[0] %}Get the URL of the first image in the list and apply it as a background image to andivelement. This way, you can be in thisdivInternally, freely overlay the title, description, and other text content of the page.

2. Display multiple Banner images (basic implementation of carousel)

If you upload multiple Banner images and want to implement a carousel effect on the front end, AnQiCMS will provide you with all the image URLs.You need to combine the front-end JavaScript carousel libraries (such as Swiper, Owl Carousel, etc.) to drive them.How to display all images and output them:

{%- pageDetail pageImages with name="Images" %}
{%- if pageImages %}
<div class="swiper-container mySwiper"> {# 假设您使用了Swiper轮播库 #}
  <div class="swiper-wrapper">
    {%- for item in pageImages %}
    <div class="swiper-slide">
      <img src="{{ item }}" alt="{% pageDetail with name="Title" %} Banner {{ forloop.Counter }}" />
    </div>
    {%- endfor %}
  </div>
  {# 添加分页器和导航按钮，需要根据您选择的轮播库文档进行配置 #}
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>
{# 别忘了引入Swiper的JS和CSS文件，并初始化Swiper实例 #}
<script>
    var swiper = new Swiper(".mySwiper", {
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>
{%- endif %}

Here, we use a loop.pageImagesAn array, each image will be output as a carousel item. The specific front-end carousel logic (such as autoplay, indicators, navigation buttons, etc.) needs to rely on the third-party JavaScript library you choose to implement.

Step 3: Combine other content to enhance the Banner area

In addition to simple image display, it is usually desirable to overlay some text information in the Banner area to achieve better visual effects and information communication efficiency.

• Page title and description:Page title ({% pageDetail with name="Title" %}) and summary ({% pageDetail with name="Description" %}) are the most common overlay elements. They can be directly throughpageDetailLabel retrieval.
• Custom field:If your single-page model defines other custom fields (such as "Banner Subtitle", "Call-to-Action Button Text", etc.), you can also use similar{% pageDetail with name="您的自定义字段名" %}The way to obtain and display. These custom fields can be set in the "Other Parameters" section when editing the single page in the background.
• Safe output:It is worth noting that all text content originating from the backend rich text editor, in order to ensure safety and proper display of HTML format, usually needs to be added during output|safeFilter. For example,{{ pageContent|safe }}.

By using these flexible configurations and template calls, AnQiCMS allows you to easily create a single