How to set up document thumbnails and control their display on list pages?

In a content management system, an eye-catching thumbnail can greatly enhance the attractiveness of the content, whether it is in an article list, product display, or other content aggregation pages, it is an important visual element to guide users to click.AnQiCMS (AnQiCMS) understands this and provides flexible thumbnail settings and display control features to help you optimize the visual effects and user experience of your website.

Next, we will discuss in detail how to set the thumbnail of the document in Anqi CMS and master its various display methods on the list page.

Part one: Set the document thumbnail

Add a thumbnail to your document, Anq CMS offers several convenient ways to ensure your content is always presented in the best**form.

1. Upload when publishing or editing documentsWhen you create or modify documents in the Anqi CMS backend, you will see the options for 'document image' or 'document thumbnail'.This is the most direct way to set up, you can click the upload button, select a prepared image from your local device, or choose from the existing image library.Choose a high-quality, highly relevant image as a thumbnail, which is a crucial step to attract users.

   Hint: When uploading images, it is recommended that the size be consistent with the design of your website list page, which helps ensure that the images are displayed clearly and load quickly.

2. The system automatically extracts content imagesIf your document content contains images, but you have not manually uploaded or selected a thumbnail at the "Document Image" location, Anqi CMS will intelligently extract the first image from the document content and use it as the thumbnail for the document.This feature saves you the trouble of manual setup, especially suitable for websites with a large amount of content publishing.

3. Configure global default thumbnailIn order to deal with the possibility that some documents may not have manually set a thumbnail and do not contain any images in the content, you can set a 'default thumbnail'.In the "Content Settings" on the back end, you can upload a universal default image for the website.This will automatically use this default image to fill in any place where a thumbnail needs to be displayed but the image is missing, to avoid blank or incorrect placeholders on the page and maintain the overall visual consistency of the website.

Part two: Fine-grained control of thumbnail display

After setting up the thumbnail, how to display them in the list pages of the website, such as article lists, product lists, or search result pages, in the way you expect, is an important link to improving user experience.

1. Get thumbnail path in templateThe Anqi CMS template engine provides a simple and intuitive way to obtain the thumbnail path of the document. In the list loop, you can call the image by the following fields:

   • {{ item.Thumb }}This is usually used to get the thumbnail path of the document, the system will generate the thumbnail processing rules according to the background configuration.
   • {{ item.Logo }}This is usually used to get the main image or cover image of the document, sometimes it may beitem.ThumbSame, may also be larger in size.
   • {{ item.Images }}If the document contains multiple cover images (such as product group images), this field will return an array of image paths, and you can display them in a loop.

   In the template file (such as) on the list pagearchiveList.htmlorindex.htmlin the content areaarchiveListWhen you display documents through the

   {% archiveList archives with type="page" limit="10" %}
       {% for item in archives %}
       <li>
           <a href="{{item.Link}}">
               <h5>{{item.Title}}</h5>
               <div>
                   {# 优先显示文档缩略图，如果不存在则显示默认缩略图 #}
                   {% if item.Thumb %}
                       <img alt="{{item.Title}}" src="{{item.Thumb}}">
                   {% else %}
                       {# 如果文档没有缩略图，可以考虑显示分类的缩略图或者全局默认缩略图 #}
                       {% categoryDetail categoryThumb with name="Thumb" id=item.CategoryId %}
                       {% if categoryThumb %}
                           <img alt="{{item.Title}}" src="{{categoryThumb}}">
                       {% else %}
                           <img alt="{{item.Title}}" src="{% system with name='SiteLogo' %}">
                       {% endif %}
                   {% endif %}
               </div>
           </a>
       </li>
       {% endfor %}
   {% endarchiveList %}
   

   This code demonstrates how to use{% if %}Logical judgment, first display the thumbnail of the document itself, if the document is not set, then try to display the thumbnail of the category it belongs to, and if there is none, display the website logo or default image, ensuring that the image does not miss.

2. Global thumbnail processing settingsIn the Anqi CMS backend, you can find the option for 'thumbnail processing method'.This is the core that controls all thumbnail generation rules. You can choose different processing methods according to the design requirements of the website:

   • Scale proportionally to the longest sideThe image will maintain the original aspect ratio, zooming based on the longest side, and the other side will be adjusted proportionally.
   • Fill the longest sideThe image will be resized to the specified size, and the insufficient part will be filled with white to maintain the complete display.
   • Trim according to the shortest edge: The image will be cropped to the center based on the shortest edge, some edge information may be lost, but it can ensure that the image fills the specified size. You can also set the "thumbnail size", which will determine the exact width and height of the generated thumbnail.Set these parameters reasonably to effectively control image size and improve page loading speed.

Part three: Optimize thumbnail effects and performance

It's not enough to just display thumbnails; to provide a better user experience and to achieve better search engine rankings, the optimization of thumbnails is also important.

1. Uniform size and proportionIn web design, maintaining the uniformity of thumbnail dimensions and proportions on list pages can make the page look more tidy and professional.By planning the 'Thumbnail Size' and 'Thumbnail Processing Method' in the 'Content Settings', for example, set all list thumbnails to 200x150 pixels and choose 'Crop to Shortest Side' to ensure the image fills the container and achieves a unified visual effect.

2. Image Compression and WebP FormatThe size of the image file directly affects the page loading speed. Anqi CMS provides the functions of 'whether to enable Webp image format' and 'whether to automatically compress large images'.Turn on WebP format can greatly reduce image size while maintaining visual quality;Enabling automatic compression of large images can prevent uploading excessively large pictures, further optimizing performance.These settings are adjusted in the "Content Settings".

3. batch regenerate thumbnailsAfter you adjust the thumbnail processing method or size in the "Content Settings", the uploaded images will not change immediately according to the new rules.At this time, you can use the "Batch regenerate thumbnails" feature.This tool can quickly regenerate the thumbnails of all images on the website according to the latest settings, ensuring the uniformity of the display style of the entire site.

By following these steps, you can not only flexibly set thumbnails for documents in Anqi CMS, but also finely control their display on list pages and optimize performance.A reasonable thumbnail strategy can effectively enhance the visual appeal, user experience, and overall performance of a website.

Frequently Asked Questions (FAQ)

Q1: Why are my list page thumbnails not displaying, or are they showing a broken icon?A1: First, check if the thumbnail has been uploaded with the document, or if the document content contains images and the system has automatically extracted them. Second, check if the path to the thumbnail called in the template code is correct, for example{{ item.Thumb }}. Make sure that the 'Default Thumbnail' is configured in the 'Content Settings' backend to ensure that an image is displayed in all cases.Sometimes, browser cache may also cause display anomalies, try clearing the browser cache or access in incognito mode.

Q2: I have modified the thumbnail size and processing method in the background 'Content Settings', why does the picture on the list page still not change?A2: After you modify the global thumbnail processing settings, the system will not automatically regenerate thumbnails for images that have already been uploaded and generated.You need to go to the 'Content Settings' page, find and click the 'Batch Regenerate Thumbnails' button.This operation will regenerate thumbnails for all existing images according to the new settings.After completion, clear the browser cache to see the updated effect.

Q3: In addition to documents, category or single-page lists also need to display thumbnails, does AnQi CMS support this?A3: Yes, Anqi CMS also supports setting thumbnails for categories and single pages and displaying them.You can find the thumbnail upload option when creating or editing categories, single pages.In the template, you