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 the article or highlight the highlights of the product, a suitable thumbnail and cover image can greatly enhance the user experience and have a positive impact on the dissemination effect of the content.The 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 the security CMS from two aspects: background configuration and template call.

一、Background Configuration: Global Settings and Content Management

It is very important to understand how the security 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 background management interface of AnQi CMS, go to the 'Background Settings' section under 'Content Settings', 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 provided, such as 'Scale proportionally by the longest side' which ensures the integrity of the image and adjusts the size automatically, and 'Crop by the shortest side' which will center crop to fill the predefined width and height.Based on the overall design style of the website and the requirements of image display, choose the most suitable method to avoid image distortion or unnecessary blank space.
  • Thumbnail sizeThis is a very practical setting option.You can set a recommended width and height based on the actual display size of thumbnails in the website front-end layout.The 'Auto CMS' will automatically generate a thumbnail version of the uploaded image to match the size you choose.Reasonable settings can effectively reduce the size of image files and speed up page loading.
  • Default ThumbnailWhen the article or product does not have a separate uploaded thumbnail, the system can automatically refer to the default image set here.This is very helpful for maintaining the uniformity of the website's visual style, ensuring that there is a visual element even if the content of the image is not specified.
  • Whether to automatically compress large images and specified widthIf your website frequently uploads high-resolution images, enabling this feature can automatically compress images larger than the specified width, thereby saving storage space and improving website performance.This setting is particularly user-friendly for mobile users, which can reduce data consumption.
  • whether to enable Webp image format：Webp is a more efficient image format that can provide the same or even better image quality with smaller file sizes.Enable this feature and newly 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 site images to ensure that all old images can be generated with the corresponding thumbnail versions according to the new rules.

2. Content editing page image management: 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 ThumbnailIn publishing articles or products, you can directly upload images as their thumbnails.It is worth mentioning that even if you do not manually upload, if the article content contains images, the security CMS can intelligently automatically extract the first image in the content as a thumbnail, saving a lot of manual operation trouble.
  • Category/Singular Page Banner and Thumbnail ImageFor category pages or independent single pages (such as "About UsThese images usually have specific design requirements and can be uploaded according to the page layout.
  • Image Resource LibraryAll uploaded images will be collected under the "Page Resources" section in the "Image Resource Management".You can perform operations such as image classification, batch deletion, and replacement here, and even view the original large image and file information, achieving centralized management of image assets.

Part 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 the user.The template engine of AnQi CMS is similar to Django, and through specific tags and variables, we can call various image data very flexibly.

1. Basic Image Field Parsing

Whether it is articles, products, categories, or single pages, Anqi CMS provides several core image fields for template calls:

  • Logo：通常指内容的封面首图或分类/单页的大图，例如文章列表中的主图。
  • Thumb：Represents a thumbnail of the content, usually a small image processed by the system, suitable for list pages and similar scenarios.
  • Images：If the content supports multiple image display (such as product sets, categories, or single-page Banner carousel), this field will return an array of image URLs that need to be displayed through a loop.

2. English call article/product image

In the article detail page or list page, we can usearchiveDetailorarchiveListtags to get the image.

  • 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 images (Images) of articles/products:ImagesIt is usually a list of image URLs, which needs to be accessed throughforLoop traversal.
    
{% archiveDetail archiveImages with name="Images" %}
<div class="product-gallery">
    {% for imgUrl in archiveImages %}
        <img src="{{imgUrl}}" alt="产品图片" />
    {% endfor %}
</div>

3. Call the category image

In the category detail page or navigation, usecategoryDetailorcategoryListTags to get images.

  • Get the banner image and thumbnail of the category detail 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 the thumbnails of the 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 single-page images is similar to categories, usingpageDetailorpageListLabel.

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

    {% pageDetail with name=“Title” %} English

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