How to customize the display of thumbnail and cover images for articles or products?

In website content operation, the visual appeal of images is crucial.Whether it is to show the essence of an article or highlight the highlights of a product, a suitable thumbnail and cover image can greatly enhance the user experience and have a positive impact on the spread of content.AnQiCMS (AnQiCMS) provides rich and flexible features, allowing us to easily customize the display of images for articles or products according to specific needs.

This article will introduce in detail how to manage and display thumbnails and cover images in Anqi CMS from two aspects: background configuration and template call.

One, backend configuration: global settings and content management

It is very important to understand how the Anqi CMS backend handles and manages images before using them. These settings will directly affect the display effect of images on the front end.

1. Global content settings: Unified image processing strategy

In the Anqi CMS backend management interface, go to the "Backend Settings" under the "Content Settings" section, and you will find a series of options related to image processing.These settings are designed to help us automate the optimization of images, ensuring the loading speed and display quality of website images.

  • Thumbnail Processing MethodHere are various scaling modes, such as 'scale proportionally based on the longest side' which ensures the integrity of the image and adjusts the size, and 'crop to the shortest side' which will center-crop to fill the preset width and height.Choose the most suitable method based on the overall design style of the website and the display requirements of the images, to avoid image distortion or unnecessary blank spaces.
  • Thumbnail sizeThis is a very practical setting item. You can set a recommended width and height based on the actual display size of the thumbnail in the website front-end layout.The Anqi CMS will automatically generate a thumbnail version of the uploaded image according to the thumbnail processing method you choose.Reasonable settings can effectively reduce the file size of images and speed up page loading.
  • Default thumbnail: When an article or product does not have a thumbnail image uploaded separately, the system can automatically reference the default image set here.This is very helpful to maintain the visual style consistency of the website, ensuring that there is a visual element even if the content of the specified image is not provided.
  • Whether to automatically compress large images and specified widthIf your website frequently uploads high-resolution images, enabling this feature can automatically compress oversized images to a specified width, thereby saving storage space and improving website performance.This setting is particularly friendly to mobile users and can reduce data consumption.
  • Whether to enable Webp image formatWebp is a more efficient image format that can provide the same or even better image quality with smaller file sizes.Enable this feature and new uploaded JPG, PNG images will be automatically converted to Webp format, further optimizing the website loading speed.
  • batch regenerate thumbnailsIf you modify the thumbnail size settings, you can use this feature to batch process all website images to ensure that all old images can be generated with the corresponding thumbnail versions according to the new rules.

2. Image management on the content editing page: flexible upload and automatic extraction

When creating or editing articles, products, categories, or single pages, AnQi CMS provides an intuitive interface for managing related images.

  • Article/Product Thumbnail: When posting articles or products, you can directly upload images as their thumbnails.It is worth mentioning that even if you do not upload manually, if the content of the article contains images, Anqi CMS can intelligently automatically extract the first image in the content as a thumbnail, saving a lot of trouble of manual operation.
  • Category/Banner image and thumbnail of single page: For category pages or standalone pages (such as "About Us"), you can upload a "Banner image" specifically for the banner display at the top of the page, as well as a "thumbnail" for the small image display in the category list or navigation.These images usually have specific design requirements and can be uploaded according to the page layout.
  • Image resource libraryAll uploaded images will be collected under 'Page Resources' under 'Image Resource Management.'You can perform image classification management, batch deletion, replacement, and even view the original large images, file information, etc., to achieve centralized management of image assets.

II. Template invocation: Flexible display of image data

The backend configuration determines how images are processed and stored, while the frontend template determines how these images are displayed to users.The AnQi CMS template engine is similar to Django, allowing us to flexibly call various image data through specific tags and variables.

1. Basic image field parsing

Whether it is an article, product, category, or single page, Anqi CMS provides several core image fields for template calls:

  • LogoCover image or main image of category/page, such as the main image in article list.
  • ThumbA thumbnail image of the content, usually a small size image processed by the system, suitable for list pages and other scenarios.
  • ImagesIf the content supports multi-image display (such as product group images, categories, or single-page Banner carousel), this field will return an array of image URLs that need to be displayed in a loop.

2. Call article/product images

On the article detail page or list page, we can usearchiveDetailorarchiveListtags to get images.

  • Get the cover image and thumbnail of the article detail page:
    
{% archiveDetail with name="Title" %}
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
  • Get the cover image and thumbnail of the article list:
    
{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <a href="{{item.Link}}">
        <h5>{{item.Title}}</h5>
        {% if item.Logo %} {# 判断Logo是否存在 #}
            <img src="{{item.Logo}}" alt="{{item.Title}}" />
        {% endif %}
        {% if item.Thumb %} {# 判断Thumb是否存在 #}
            <img src="{{item.Thumb}}" alt="{{item.Title}}" />
        {% endif %}
    </a>
    {% endfor %}
{% endarchiveList %}
  • Get the group image (Images) of the article/product:ImagesIt is usually a list of image URLs, which needs to beforlooped through.
    
{% archiveDetail archiveImages with name="Images" %}
<div class="product-gallery">
    {% for imgUrl in archiveImages %}
        <img src="{{imgUrl}}" alt="产品图片" />
    {% endfor %}
</div>

3. Call Category Image

Use in Category Details Page or NavigationcategoryDetailorcategoryListTag to Get Image

  • Get Banner Image and Thumbnail of Category Details Page:
    
<h1 class="category-title">{% categoryDetail with name="Title" %}</h1>
{% categoryDetail categoryBanner with name="Images" %} {# Images字段可作为Banner组图 #}
{% if categoryBanner %}
    <div class="category-banner">
        {% for img in categoryBanner %}
            <img src="{{img}}" alt="{% categoryDetail with name="Title" %}" />
        {% endfor %}
    </div>
{% endif %}
<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
<img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />
  • Get Thumbnails of Category List:
    
{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
    <a href="{{ item.Link }}">
        <span>{{item.Title}}</span>
        {% if item.Thumb %}
            <img src="{{item.Thumb}}" alt="{{item.Title}}" />
        {% endif %}
    </a>
    {% endfor %}
{% endcategoryList %}

4. Call the single page image

The way to call the image of the single page is similar to classification, usingpageDetailorpageList.

  • Get the Banner image and thumbnail of the single page details：“`twig

    {% pageDetail with name=“Title” %}

    {% pageDetail pageBanner with name=“Images” %} {% if pageBanner %}
    {% for img in pageBanner %}{% pageDetail with name={% endfor %}
    {% endif %}{% pageDetail with name=<img src=“{%