How to extract and display the thumbnail and cover image of the document content in Anqi CMS?

In AnQi CMS, managing and displaying document content thumbnails and cover images is an important aspect for enhancing website visual effects, optimizing user experience, and improving search engine friendliness.AnQiCMS provides a flexible mechanism to handle these image resources, whether they are automatically extracted from the content or manually uploaded, they can be managed in detail in the background and called through concise template tags on the front end.

How AnQiCMS handles image resources: automatic extraction and manual specification

AnQiCMS is very intelligent and user-friendly in handling content images.When we publish a new document, if the document content contains images, even if we have not manually uploaded a separate thumbnail, the system will automatically identify and extract the first image in the content as the thumbnail for the document.This feature greatly simplifies the content publishing process, ensuring that each document has a default visual presentation.Of course, if you need a more personalized display, we can also choose to manually upload the specified image as the document thumbnail or cover.

This flexibility is not limited to documents.For the category page and independent single page of the website, AnQiCMS also supports uploading exclusive thumbnails or a banner composed of multiple images.All uploaded images will be unified into the "Image Resource Management" module, making it convenient for us to view, classify, and manage them collectively.

Backend settings: fine-grained control over the image processing process

To better meet the operational and visual standards of the website, AnQiCMS provides a series of image processing options in the "Content Settings" section of the backend. We can adjust these settings according to actual circumstances to optimize the display effect and loading performance of images:

• Thumbnail processing method:We can choose different methods such as 'proportional scaling based on the longest side', 'filling based on the longest side', or 'cropping based on the shortest side' when scaling images.This determines the display effect of the thumbnail at a fixed size, for example, whether to display the entire image and possibly leave white space, or crop the image to fill the specified area.
• Thumbnail size:The website can customize the specific width and height of thumbnails. Setting the appropriate size helps unify the page style and reduce the file size of the images, thereby speeding up the page loading speed.
• Default thumbnail: If some documents or content do not specify a thumbnail, the system can automatically use a preset 'default thumbnail' to fill in, avoiding the embarrassing situation of blank or missing images on the page.
• WebP image format conversion:AnQiCMS supports automatically converting uploaded JPG, PNG, and other images to WebP format.WebP usually has a higher compression rate, which can significantly reduce the size of images without losing too much quality, further improving the loading speed of websites.
• Automatically compress large images:For images with large dimensions uploaded by users, the system can automatically compress them, reducing their physical size and file size, which is very effective for optimizing mobile access experience and saving storage space.

These settings give us powerful control over the website's image resources, ensuring the display effect of images in different scenarios.

Call template: Display images flexibly on the front-end page

In the AnQiCMS template, the call of images is mainly realized through documents, categories, single pages, and tag details or list tags. These tags usually provideLogo/ThumbandImagesIt is crucial to understand the meaning and usage of different fields to access various image resources.

• Logo:It usually represents the main cover image or large image of the content, such as the first image of the document, the main Banner image of the category, or the Logo of the Tag.
• Thumb:A thumbnail image specifically refers to a smaller-sized image that is typically processed by the system (such as cropped, compressed).
• Images:When the content includes multiple images (such as document collages, categories, or single-page Banner carousels),Imagesthe field will return an array of image URLs.

Next, we will combine the AnQiCMS template tags to see how to call these images in specific content types:

1. Document content (article/product)

Whether it is a document detail page (archiveDetail) or a list page (archiveList)，it can conveniently call its cover image and thumbnail.

• Call the main image (Logo) and thumbnail (Thumb):

  {# 默认获取当前文档的首图和缩略图 #}
  <img src="{% archiveDetail with name='Logo' %}" alt="文档首图" />
  <img src="{% archiveDetail with name='Thumb' %}" alt="文档缩略图" />
  
  {# 在循环中，例如文档列表页，获取每项文档的首图和缩略图 #}
  {% archiveList archives with type="list" limit="10" %}
      {% for item in archives %}
          <a href="{{item.Link}}">
              <img src="{{item.Logo}}" alt="{{item.Title}}" /> {# 首图 #}
              <img src="{{item.Thumb}}" alt="{{item.Title}}" /> {# 缩略图 #}
              <span>{{item.Title}}</span>
          </a>
      {% endfor %}
  {% endarchiveList %}
  

• Invoke group image (Images):If the document is configured with multiple images,Imagesit will return an array, and you need to go throughforLoop to traverse and display.

  {# 在文档详情页，调用文档的图片组 #}
  {% archiveDetail docImages with name="Images" %}
  <div class="image-gallery">
      {% for img in docImages %}
          <img src="{{img}}" alt="文档图片" />
      {% endfor %}
  </div>
  

2. Classification page

Classification page (categoryDetailandcategoryListAlso supports Logo, Thumb, and Images calls.

• Call the main image (Logo) and thumbnail (Thumb):

  {# 在分类详情页，获取当前分类的大图和缩略图 #}
  <img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
  <img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />
  
  {# 在分类列表循环中 #}
  {% categoryList categories with moduleId="1" parentId="0" %}
      {% for item in categories %}
          <a href="{{ item.Link }}">
              <img src="{{item.Logo}}" alt="{{item.Title}}" />
              <img src="{{item.Thumb}}" alt="{{item.Title}}" />
              <span>{{item.Title}}</span>
          </a>
      {% endfor %}
  {% endcategoryList %}
  

• Call Banner group image (Images):The category page banner image is usually also an image array.

  {# 在分类详情页，调用分类的Banner组图 #}
  {% categoryDetail categoryBanners with name="Images" %}
  <div class="category-banner-slider">
      {% for banner in categoryBanners %}
          <img src="{{banner}}" alt="分类轮播图" />
      {% endfor %}
  </div>
  

3. Single page

Single page (pageDetailandpageList) image calling method is similar to the category.

• Call the main image (Logo) and thumbnail (Thumb):“`twig {# In the single page detail page, get the large image and thumbnail of the current page #} {# In a single-page list loop #} {% pageList pages %} {% for item in pages %} {{item.Title}} in English