How to configure Banner image and thumbnail for single page in AnQiCMS to enrich its visual display?

In today's increasingly rich website content, relying solely on text to convey information is no longer enough.Visual elements, such as eye-catching banner images and expressive thumbnails, can attract visitors' attention at first glance and enhance the professionalism and user experience of the website.For AnQiCMS users,巧妙配置这些视觉元素，is a simple operation that can bring great benefits for single-page (such as "About UsAnQiCMS deeply understands the importance of content display, providing an intuitive backend management interface and flexible template calling mechanism, allowing you to easily add personalized visual charm to your website.

Next, we will learn in detail how to configure the Banner image and thumbnail for a single page in AnQiCMS and display it on the website.

Background configuration: Add Banner image and thumbnail for a single page

Firstly, you need to log in to the AnQiCMS backend management interface to perform the corresponding image upload and association operations.

1. Navigate to page management

After logging in to the back end, please navigate to the left menu bar's module and then click on . Here, you will see a list of all single-page items that have been created.

2. Edit or create a single page

You can choose an existing single page to edit, or click the "Add Single Page" button to create a brand new page.After entering the editing interface of a single page, you will see basic configuration items such as title, content, etc.Scroll down the page, and you will find the area specifically used for configuring visual elements.

3. Configure Banner image

Below the single page editing interface, you will see a region named 'Banner image'.

Banner images are usually used at the top of the page to display large images, playing a role in setting the theme and creating an atmosphere.AnQiCMS allows you to upload multiple images as Banner images on a single page, which is very suitable for achieving the effect of a top carousel on the page.

• Upload/Select ImageClick the upload button in the Banner image area, you can select a suitable image from the system's existing image library, or directly upload a new image from your local device.
• Optimization SuggestionsTo ensure that the website displays well on different devices, it is recommended that you upload high-quality images with moderate file sizes.If you plan to use multiple images for a carousel, try to keep the aspect ratio or size of all Banner images consistent, so as to avoid layout jumps when switching pages.

4. Configure Thumbnail

Immediately below the Banner image configuration area, you will find a 'Thumbnail' configuration option.

A single-page thumbnail is typically smaller in size and is mainly used as a visual identifier for referencing the single page in other parts of the website.For example, the thumbnail on a single page can provide a quick visual clue to identify the content in the recommended module on the homepage, related content list, site map, or friend links section.

• Upload/Select Image：Similar to the Banner image, you can click the upload area, select an image from the image library, or upload a new image as a thumbnail.
• Optimization SuggestionsThumbnail should concisely and clearly summarize the page theme.If your website has a uniform size requirement for thumbnails, you can globally configure it in the , and AnQiCMS can automatically process images according to your settings.

After completing the configuration of the banner image and thumbnail, remember to click the "OK" or "Save" button at the bottom of the page to save your changes.

Template invocation and display: Let the image be displayed on the front-end

After the images are configured in the background, the next step is to ensure that they display correctly on your website's frontend.AnQiCMS uses a template engine syntax similar to Django, allowing you to easily display images configured in the backend on the page in English.

1. Locate the template file.

For a single-page, the default template file is usually located in the theme you are currently usingpage/detail.htmlPath under. If you have set a custom template for a specific single-page in the background (for example, specifying the "About Us" page as a custom template)page/about.html)，then you need to edit the corresponding custom template file.

2. Call images using tags

In the template file, you can use:pageDetailLabel to get the various data of the single page configuration, including the Banner image and thumbnail we just uploaded.

• Call thumbnail (Thumb)： To call the thumbnail of a single page, you can usepageDetaila tag to specifyname="Thumb". This will output the thumbnail image address configured on the back end.

  {% pageDetail pageThumb with name='Thumb' %}
  {% if pageThumb %}
      <img src="{{ pageThumb }}" alt="{% pageDetail with name='Title' %}" />
  {% endif %}
  {% endpageDetail %}
  

  Here we first assign the thumbnail address topageThumbthe variable, and then pass throughif pageThumbDetermine if the image exists before displaying it, which can avoid invalid tags when the image path is empty.altIt is recommended to use a single-page title for properties, which is beneficial for SEO.

• 调用主要图片/封面图 (English)Logo)： 如果后台的“缩略图大图”（即单张较大的封面图，在文档中被称为English)Logo字段）也配置了图片，您可以通过Englishname="Logo"to call it.

  {% pageDetail pageLogo with name='Logo' %}
  {% if pageLogo %}
      <img src="{{ pageLogo }}" alt="{% pageDetail with name='Title' %}" />
  {% endif %}
  {% endpageDetail %}
  

• 调用Banner组图 (English)Images)： 对于在后台上传的多张Banner图，它们会被AnQiCMS作为一个图片组存储在EnglishImages