How to configure banner images and thumbnails for a single page in AnQiCMS to enrich its visual display?

On the day when the content of websites becomes increasingly rich, it is no longer enough to convey information solely through text.Visual elements, such as eye-catching banner images and expressive thumbnails, can attract visitors' attention immediately, enhancing the professionalism and user experience of the website.For AnQiCMS users, cleverly configuring these visual elements for single pages (such as "About Us", "Contact Us", or "Service Introduction", etc.) is a simple operation that can bring great benefits.AnQiCMS knows 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.

Backend configuration: Add Banner image and thumbnail to the 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 the page management

After logging in to the backend, please navigate to the module of Page Resources in the left menu bar, then click on Page Management. Here, you will see a list of all single-page pages 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 new page.After entering the single-page editing interface, you will see basic configuration items such as title, content, and so on.Scroll down the page, and you will find the area specifically used to configure visual elements.

3. Configure Banner Image

Below the single page editing interface, you will see an area named "Banner Image".

Banner images are usually used at the top of the page to display large images, playing a role in enhancing 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 implementing a top page carousel effect.

  • Upload/Select imageClick the upload button in the Banner image area, you can select the appropriate image from the system's existing image library, or directly upload a new image from your local device.
  • Optimization suggestion: To ensure that the website displays well on different devices, it is recommended to upload high-quality but moderately sized images.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 jumping when switching pages.

4. Configure Thumbnail

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

A thumbnail of a single page is usually smaller, and it is mainly used as a visual identifier for the content when referencing this single page in other parts of the website.For example, in the recommended module on the homepage, the related content list, site map, or friend link block, the thumbnail of a single page can provide a quick visual clue to identify the content.

  • Upload/Select image: Similar to the Banner image, you can click the upload area to select an image from the image library or upload a new image as a thumbnail.
  • Optimization suggestion: Thumbnails should concisely and clearly summarize the theme of the page. If your website has unified size requirements for thumbnails, you can globally configure them in the [Content Settings], and AnQiCMS can also 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.

Display and call in the template: Display the image on the front end

After configuring the images in the background, the next step is to ensure that they display correctly on the front end of your website.AnQiCMS uses a template engine syntax similar to Django, allowing you to easily display images configured on the backend through simple tags.

1. Locate the template file.

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

2. Use the tag to call the picture

You can call it in the template file bypageDetailTag to get the data of the single page configuration, including the banner image and thumbnail we just uploaded.

  • Call the thumbnail (Thumb)To call the thumbnail of a single page, you can usepageDetaillabel and specifyname="Thumb". This will output the thumbnail image address configured in the background.

    {% 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, then throughif pageThumbCheck if the image exists before displaying it, as this can prevent invalid tags from being generated when the image path is empty.altIt is recommended to use a single-page title for properties, as this is beneficial for SEO.

  • Call the main picture/covers image (Logo): If the "thumbnail full image" (i.e., a single larger cover image, referred to in the document asLogofield) is also configured with an image, you can access it vianame="Logo"to call.

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

  • Call Banner group image (Images)For multiple banner images uploaded on the backend, AnQiCMS will store them as a group of images.Images