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

In website operation, a well-designed single-page often plays a crucial role in brand display, product introduction, or promotion of specific activities.An eye-catching banner area that can quickly capture visitors' attention and convey core information.AnQiCMS as a flexible content management system, provides a very convenient way for you to easily set and display customized 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 AnQiCMS admin, 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
  3. Upload Banner Image:In a single-page editing interface, scroll down and you will find a section named "Banner Image".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 for the page.
    • If your design requires a carousel effect, AnQiCMS also supports you uploading multiple images.The system will manage them as a set 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 uploading the image, remember to click the 'OK' or 'Save' button at the bottom of the page to save your changes to the system.

第二步：Design or modify the single-page template to display the Banner

After setting up the Banner image in the background, next, we need to inform AnQiCMS how to display them in the frontend template. AnQiCMS's template files are usually located in/templateThe directory. The default template path for a single page is usuallypage/detail.htmlHowever, you can also specify a custom template for a specific page.

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

1. Display a single Banner image

If you only want to display the first Banner image you upload and use it as the main visual element of the page, you can do it like 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 the 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 thedivelement. This way, you can do this in thedivEnglish title, description, and other text content can be overlaid on the page freely.

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

If you have uploaded 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 with front-end JavaScript carousel libraries (such as Swiper, Owl Carousel, etc.) to drive 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 looppageImages

Third step: Combine other content to enhance the Banner area

In addition to simple image display, we usually also hope to overlay some text information in the Banner area to achieve better visual effects and information delivery efficiency.

  • Page title and description:Page title ({% pageDetail with name="Title" %}) and introduction ({% pageDetail with name="Description" %}) are the most common overlay elements. They can be directly accessed viapageDetailTag retrieval.
  • Custom field:If your single-page model defines other custom fields (such as, "Banner Subtitle{% pageDetail with name="您的自定义字段名" %}The way to obtain and display. These custom fields can be edited in the "Other Parameters" section when editing a single page in the background.
  • Safe output:It is worth noting that, in order to ensure safety and correct display of HTML format, the text content from the backend rich text editor usually needs to be added when outputting.|safea filter. For example,{{ pageContent|safe }}.

Through these flexible configurations and template calls, AnQiCMS allows you to easily create a single page that is both beautiful and practical