How to set document thumbnails and control their display on the list page?

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

Next, we will delve into how to set document thumbnails in the AnQi CMS and master various display methods on the list page.

Part 1: Set Document Thumbnails

Add a thumbnail to your document, Secure CMS offers several convenient ways to ensure your content is always presented in **English**.

  1. Upload when publishing or editing documentsWhen you create or modify documents in the Anqi CMS backend, you will see the options of 'Document Image' or 'Document Thumbnail'.This is the most direct way to set it up, you can click the upload button, select an image that is ready to be uploaded from your local device, or choose from the existing image resource library.Choose a high-quality, highly relevant image as the thumbnail, which is a key 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. System automatically extracts content imagesIf your document content contains images, but you have not manually uploaded or selected a thumbnail in the "Document Images" section, SafeCMS will intelligently extract the first image from the document text and use it as the thumbnail for the document.This feature saves you the trouble of manual settings, especially suitable for websites with a large amount of content publishing.

  3. Configure Global Default ThumbnailTo handle cases where some documents may not have a manually set thumbnail and no images are included in the content, you can set a "default thumbnail".In the background "Content Settings", you can upload a universal default image for the website.So, in any place where a thumbnail needs to be displayed but the image is missing, the system will automatically use this default image to fill in, 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

Set the thumbnail correctly, and then show it in the list pages of the website as you expect, such as article lists, product lists, or search result pages, is an important aspect to improve user experience.

  1. Get thumbnail path in templateThe template engine of AnQi CMS 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 }}：usually used to get the thumbnail path of the document, the system will generate it according to the thumbnail processing rules configured in the background.
    • {{ item.Logo }}：usually used to get the main image or cover image of the document, sometimes it may beitem.ThumbThe same, 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, which you can display in a loop.

    On the list page template file (such asarchiveList.htmlorindex.htmlthe content area), when you display documents in a loop using thearchiveListtag, you can use the following code structure:

    {% 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, the document's own thumbnail is displayed first, if the document does not have a setting, then try to display the thumbnail of the category it belongs to, and if there is still none, display the website's Logo or default image, ensuring that the image will not be missing.

  2. Global Thumbnail Processing SettingsIn the "Content SettingsThis is the core that controls all thumbnail generation rules.

    • Scale proportionally by the longest side: The image will maintain the original aspect ratio, scaling based on the longest side, and the other side will be adjusted proportionally.
    • Scale proportionally by the longest side with paddingEnglish: The image will be resized to the specified dimensions, and the insufficient part will be filled with white to maintain the complete display.
    • [en] : Crop to the shortest edge.：The image will be centered cropped based on the shortest side, some edge information may be lost, but it can ensure that the image fills the specified size. At the same time, 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 the image size and improve page loading speed.

English: The third part: Optimize thumbnail effect and performance

Just displaying thumbnails is not enough. To provide a better user experience and achieve better search engine rankings, the optimization of thumbnails is equally important.

  1. Uniform size and ratioIn web design, maintaining the consistency of thumbnail size and ratio on list pages can make the page look neater and more professional.Through the 'Content Settings' under 'Thumbnail Size' and 'Thumbnail Processing Method', plan uniformly, 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.The "Whether to enable Webp image format" and "Whether to automatically compress large images" features are provided by Anqi CMS.Turning on WebP format can significantly reduce image size while maintaining visual quality; enabling automatic compression for large images can prevent uploading overly large images, further optimizing performance.These settings can be adjusted in the "Content Settings".

  3. Batch regenerate thumbnailsWhen you adjust the thumbnail processing method or size in the 'Content Settings', the images that have already been uploaded will not change immediately according to the new rules.You can use the 'Batch regenerate thumbnails' feature.This tool can generate thumbnail images for all images on the website in one click according to the latest settings, ensuring the uniformity of the display style of the entire website.

Through the above steps, you can not only flexibly set thumbnails for documents in the Anqi CMS, but also finely control their display on the list page and optimize their performance.An appropriate thumbnail strategy can effectively enhance the visual appeal, user experience, and overall performance of a website.

Common Questions (FAQ)

Q1: Why are my list page thumbnails not displaying, or are they displaying a broken icon?A1：Firstly, please check if the thumbnail has been uploaded in the document, or if images are contained in the document content and the system has automatically extracted them. Secondly, check if the path to the thumbnail called in the template code is correct, for example{{ item.Thumb }}.Finally, confirm that 'Default Thumbnail' is configured under 'Content Settings' in the background to ensure that there is an image to display in any case.Sometimes, browser cache may also cause display exceptions. Try clearing the browser cache or accessing in incognito mode.

Q2: I have modified the thumbnail size and processing method in the background 'Content Settings', why does the image on the list page not change?A2：When 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 SettingsThis 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 the document, do the category or single-page list also need to display thumbnails? Is Safe CMS supported?A3: Yes, AnQi CMS also supports setting and displaying thumbnails for categories and single pages.You can find the 'thumbnail' upload option when creating or editing a category or single page.