How to extract and display the first image in the document content as a thumbnail?

In website operation, equipping each article or product with an attractive thumbnail is the key to increasing click-through rate and optimizing user experience.However, manually creating and uploading thumbnails for a large amount of content will undoubtedly take a lot of time and effort.Our AnQi CMS is well-versed in this, providing us with an intelligent and efficient thumbnail processing solution, making website content management easier.

AnQi CMS' intelligent thumbnail mechanism

The thumbnail processing mechanism of AnQi CMS is very user-friendly. When publishing or editing documents, if you do not manually upload thumbnail images but the document content contains images, the system will automatically identify and extract images from the document.the first imageAs the thumbnail of the document. This means that even if you focus on content creation and temporarily ignore the upload of the thumbnail, your article on the list page can still have a beautiful illustration, greatly improving the efficiency of content display and the visual appeal of the page.

When you add documents in the content management backend, you will find that the 'Document Image' item is used to set the thumbnail.Even if you leave it blank and do not upload, as long as there is an image in the content, AnQi CMS will automatically help you 'capture' the first image as a backup.

Display document thumbnail in content list

On the front-end template of the website, we often need to display thumbnails on pages such as article lists, product lists, etc., so that users can quickly browse and select content of interest.AnQi CMS provides a simple template tag, making this process intuitive.

When we usearchiveListTags to loop through document list, each document object (usually we useitemto represent the single document in the loop) contains aThumbfield. ThisThumbThe field is the thumbnail address processed by the system.

Here is an example of code to display a thumbnail in a document list:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-card">
            {% if item.Thumb %}
                <a href="{{item.Link}}" class="thumbnail-link">
                    <img src="{{item.Thumb}}" alt="{{item.Title}}" class="article-thumbnail">
                </a>
            {% endif %}
            <div class="article-info">
                <a href="{{item.Link}}">
                    <h3>{{item.Title}}</h3>
                    <p class="description">{{item.Description|truncatechars:120}}</p>
                </a>
                <span class="read-more">阅读更多</span>
            </div>
        </div>
    {% empty %}
        <p>暂时没有更多文章。</p>
    {% endfor %}
{% endarchiveList %}

In the code above, we first usearchiveListThe tag gets the document list. Inforinside the loop,{% if item.Thumb %}Ensure that the image is displayed only when the thumbnail exists, avoiding unnecessary placeholder empty images.item.ThumbDirectly output the thumbnail URL, whileitem.Titleused as the image'saltattribute, which is helpful for SEO.item.Description|truncatechars:120It is used to cut the article summary, keeping the list neat.

Display the main thumbnail on the document detail page.

Although the full content of the document is usually displayed on the detail page, there may still be a need to display the feature thumbnail or cover image of the article separately, especially when designing some special layouts.

In the document detail page, the current document object can usually be accessed directly througharchivevariable access. Similarly, we can usearchive.Thumbto retrieve and display the thumbnail of the document.

This is an example of a thumbnail displayed on the document detail page:

{% archiveDetail archive with name="Id" %} {# 确保在详情页环境中获取当前文档 #}
<article class="document-detail">
    <h1 class="document-title">{{archive.Title}}</h1>
    
    {% if archive.Thumb %}
        <figure class="document-cover">
            <img src="{{archive.Thumb}}" alt="{{archive.Title}}的封面图">
            <figcaption>文档封面</figcaption>
        </figure>
    {% endif %}
    
    <div class="document-content">
        {{archive.Content|safe}} {# 文档内容通常需要使用safe过滤器避免HTML转义 #}
    </div>
</article>

In this example, we assume that on the document detail page,archiveThe variable already represents the document being viewed. By{% if archive.Thumb %}Determine, we can display a document thumbnail below or above the document title to guide visually.

Customize the thumbnail: optimize the display effect.

The AnQi CMS not only provides automatic extraction features, but also allows us to deeply customize the generation and processing of thumbnails to meet the specific design requirements of the website.

In the background, you can go to the 【background settings】→【content settings】page. Here, you will find detailed configuration options for thumbnails:

• Thumbnail Processing MethodYou can choose different image processing algorithms.
  • Scale proportionally to the longest sideKeep the image proportion unchanged, scale the longest side to the specified size, and scale the other side proportionally.
  • Fill the longest side: Resize the image to the specified size, fill the insufficient part with white, ensure that the image is displayed completely and maintains the ratio.
  • Trim according to the shortest edge: Crop the image based on the shortest edge, usually used to generate thumbnails of fixed aspect ratio, which may result in the loss of some edge content.
• Thumbnail sizeYou can set the width and height of the thumbnail (for example: 200x150 pixels), the system will generate images of the corresponding size based on the thumbnail processing method you choose.Setting the size appropriately can effectively control the size of the image file, speeding up page loading.
• Default thumbnailIf a document does not have an uploaded thumbnail nor any images to extract from the content, the system will use the 'default thumbnail' you have set here to substitute, ensuring the uniformity of the website's visuals.
• batch regenerate thumbnailsWhen you change the thumbnail size or processing method, you can use this feature to update all thumbnails on the website with one click, very convenient.

The flexibility of these settings allows you to worry-free about the complexity of image processing, just with simple configuration, the Anqi CMS can automatically complete the generation and optimization of thumbnails.

Summary

The automation and flexibility of AnQi CMS in thumbnail processing greatly reduces the burden on website operators, allowing us to focus more on creating high-quality content.Whether it is automatically extracting the first picture from the document content or customizing the generation rules of thumbnail images through the background, Anqi CMS provides powerful and convenient support to ensure that your website always presents users with an eye-catching visual effect.

Frequently Asked Questions (FAQ)

1. If the document content has multiple images, which one will AnQiCMS choose as the thumbnail?In case you do not manually upload a thumbnail, the AnQiCMS system will automatically extract the content of the documentthe first imageas the thumbnail of the document.

2. Why is my thumbnail not displaying at the size I set?Answer: This may be due to several reasons. First, please check whether the 'thumbnail size' is correctly set in the [Background Settings] -> [Content Settings] section.Next, the "thumbnail processing method" will also affect the final display effect, for example, choosing "scale proportionally by the longest side" may cause the actual size of the image to be inconsistent with the set size (but the ratio will be maintained).Finally, try to clear