How to display the cover image, thumbnail, or multiple image sets of the document in Anqi CMS?

How to display the cover image, thumbnail, or multiple image sets of documents in AnQi CMS is a concern for many operators.A visually appealing website cannot do without beautifully arranged pictures.The Anqi CMS provides very flexible and powerful features in this aspect, whether it is to set an eye-catching cover image for an article, automatically generate thumbnails for list display, or build a rich multi-image album, it can be easily achieved.

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.

The first is the quotation markDocument ImageThe field is usually used to upload a document thumbnail. If you upload an image, it will become the main thumbnail of the 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, reducing repetitive operations.

In addition to manual upload, Anqi CMS is stillGlobal settings "Content Settings"Options for more refined image processing are provided, allowing you to adjust according to the overall style and performance needs of the website:

• Thumbnail processing method and size: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 set a unified thumbnail size to ensure the consistency of the website's visual style.
• Default thumbnail: If the document does not upload any images and there are no images in the content, the system can call the default thumbnail you have set to avoid blank spaces appearing on the page.
• WebP image format and automatic compression:To optimize the website loading speed and save storage space, you can choose to enable WebP image format conversion and automatic compression of large images.After enabling, uploaded images will be automatically converted and compressed to the specified width, and 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 re-upload them one by one. Anqicms provides the "batch regenerate thumbnails" function, one click can update thumbnails throughout the site, very convenient.

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

Secondly, flexibly display images on the document details page.

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

• Call the cover logo (Logo): LogoIt usually refers to the main cover image of a document. In the document detail page, you can directly go through{{archive.Logo}}or use{% archiveDetail with name="Logo" %}Label to retrieve and display it. This image is usually used at the top of the page, leaving a 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 not commonly used on detail pages, butThumbThe field is still available, it provides a thumbnail version processed by the background settings. 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 album, etc.,ImagesThe field comes into play. This is an array that contains the addresses of multiple images, and you can iterate through 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 Anqi CMS content model supports custom fields, if you want a more personalized image set, you can add a custom field of the type "multi-image set" (for example, named in the background for the document model, you can add a custom field of the type "multi-image set" (for example, namedproduct_gallery）。In the document detail page, you can get the value of this custom field byarchiveDetaillabel, which is also an image URL array, and then display it 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>
  

Chapter 3, display images simply on the document list page

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

InarchiveListIn the loop, each document itemitemwill includeLogoandThumbField, you can choose to use 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}}"