How to display the cover image, thumbnail, or multi-image set of a document in AnQi CMS?

How to display the cover image, thumbnail, or multi-image set of documents in AnQi CMS is a concern for many operators.A visually appealing website cannot do without carefully arranged images.It is fortunate that AnQi CMS provides very flexible and powerful functions in this aspect, whether it is setting a prominent cover image for articles, automatically generating thumbnails for list display, or building a rich multi-image album, it can be easily realized.

1. Basic settings and intelligent processing of document images

When we add or edit documents on the AnQi CMS backend, we will find several key settings related to images, which together form the foundation for the display of document images.

首先是“English”Document imageField, here usually used to upload the thumbnail of the document.If you upload an image, it will be used as the main thumbnail for this document.But even if you do not upload manually, AnQi CMS is smart enough: if the document content contains images, the system will automatically extract the first image as the document thumbnail.This greatly simplifies the daily release process and reduces repetitive operations.

Except for manual upload, the AqyCMS alsohas a 'Content Settings' in the global settingsThis provides more fine-grained image processing options, allowing you to adjust according to the overall style and performance needs of the website:

  • Thumbnail processing methods and dimensions:You can define whether the thumbnail is scaled proportionally to the longest side, padded to the longest side (the insufficient part of the image is filled with white), or cropped to the shortest side.At the same time, it can also set a unified thumbnail size to ensure the consistency of the website's visual style.
  • Default thumbnail:If the document does not have any uploaded images and there are no images in the content, the system can call the default thumbnail you have preset to avoid blank spaces due to missing images on the page.
  • WebP image format and automatic compression: EnglishTo optimize website loading speed and save storage space, you can choose to enable WebP image format conversion and automatic compression of large images.After turning on, the uploaded images will be automatically converted and compressed to the specified width. These processes are all done automatically in the background.
  • Batch regenerate thumbnails:If you modify the thumbnail processing method or size, you do not need to upload them one by one. Anqi CMS provides a "batch regenerate thumbnails" feature, which can update all site thumbnails with one click, very convenient.

These background settings ensure that no matter where the image comes from, it can be presented in the most suitable way for the website.

Second, flexibly display images on the document detail page.

In the detailed content page of the document, we usually need to display the most complete image information, which may be a large and impressive cover image, or a set of detailed multi-image collections. The Anqi CMS providesarchiveDetailLabel, let us easily call these images.

  • Call cover first image (Logo): LogoIt usually refers to the main cover image of the document. On the document detail page, you can directly access it by{{archive.Logo}}or use{% archiveDetail with name="Logo" %}Label to get and display it. This image is usually used at the top of the page, leaving the first impression on the user.

    {# 示例：展示文档封面首图 #}
<div class="document-cover">
    <img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %}" />
</div>

  • Call thumbnail (Thumb):Although it may not be commonly used on the detail page,ThumbThe field is still available, it provides a thumbnail version processed by the backend. If your detail page layout needs a smaller image, you can directly call:

    {# 示例：展示文档缩略图（如果需要） #}
<div class="document-thumb">
    <img src="{% archiveDetail with name='Thumb' %}" alt="{% archiveDetail with name='Title' %}" />
</div>

  • Display multiple image sets (Images):When a document needs to display a set of images, such as product multi-angle display, event photo albums, etc.ImagesThe field comes into play. This is an array that contains the addresses of multiple images, and you can loop through them to display them one by one.

    {# 示例：展示文档内置的多图集 #}
<div class="document-gallery">
    {% archiveDetail archiveImages with name="Images" %}
    {% for imgUrl in archiveImages %}
        <img src="{{ imgUrl }}" alt="图片描述" />
    {% endfor %}
    {% endarchiveDetail %}
</div>

  • Achieve more flexible multi-image sets through custom fields:The content model of AnQi CMS supports custom fields. If you want a more personalized image collection, you can add a custom field of the type "multi-image setproduct_gallery）。In the document detail page, you can obtain the value of this custom field througharchiveDetailtags, which is also an array of image URLs, and then display them in a loop:

    {# 示例：展示通过自定义字段实现的图集（假设自定义字段名为product_gallery） #}
<div class="product-gallery">
    {% archiveDetail customGallery with name="product_gallery" %}
    {% for img in customGallery %}
        <img src="{{ img }}" alt="产品详情图" />
    {% endfor %}
    {% endarchiveDetail %}
</div>

Three, display images simply on the document list page

In article lists, product lists, and other pages, images usually appear in the form of thumbnails, which can attract users and maintain the neatness and loading speed of the page.archiveListThe label is the main character here, it helps us batch retrieve document data, and display the thumbnail of each document in the loop.

InarchiveListEach document item in the loopitemwill includeLogoandThumbField, you can choose to use it according to your design requirements:

”`twig {# Example: Display thumbnails in the document list #}

    {% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li class="document-item">
    <a href="{{item.Link}}">
        <div class="item-image">
            {% if item.Thumb %} {# 优先使用缩略图 #}
                <img src="{{item.Thumb}}" alt="{{item.Title}}" />
            {% elif item.Logo %} {# 如果没有缩略图，则使用封面首图 #}
                <img src="{{item.Logo}}"