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 consume a lot of time and energy.Our company, Anqi CMS, is well-versed in this field and provides us with an intelligent and efficient thumbnail processing solution, making website content management easier.
Anqi CMS's 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 a thumbnail image, but the document content contains images, the system will automatically identify and extract images from the document.the first imageAs the thumbnail of this document.This means that even if you focus on content creation and temporarily neglect the upload of thumbnails, your article can still have an aesthetically pleasing illustration on the list page, greatly enhancing 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, the Anqi CMS will automatically "capture" the first one 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 and product lists, so that users can quickly browse and select content of interest.AutoCMS provides a simple template tag, making this process intuitive.
When we usearchiveListEach document object (usually we useitemto represent a single document in the loop) contains aThumbfield. ThisThumbThe field is the address of the thumbnail after the system processes it.
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 above code, we first usearchiveListTags get the document list.forInside the loop,{% if item.Thumb %}Ensure that the image is displayed only when the thumbnail exists, avoiding unnecessary empty image placeholders.item.ThumbDirectly output the thumbnail URL,item.Titlewhich is then used as the image.altAttribute, which is helpful for SEO.item.Description|truncatechars:120Used to extract the article abstract, 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 are times when we may still need to show the feature thumbnail or cover image of the article separately, especially when designing some special layouts.
In the document details page, the current document object can usually be accessed directly.archiveSimilarly, we can directly usearchive.Thumbto obtain and display the thumbnail of the document.
Here 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. Through{% if archive.Thumb %}Judgment, we can display a document thumbnail below or above the document title as a visual guide.
Custom thumbnail: optimize display effect
The Anqi CMS not only provides an automatic extraction feature, but also allows for deep customization of thumbnail generation and processing methods 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 method：You can choose different image processing algorithms.
- Scale proportionally by the longest side：Maintain the aspect ratio of the image, resize the longest side to the specified size, and the other side is scaled proportionally.
- Scale proportionally by the longest side with paddingEnglish: Resize the image to the specified size, fill the insufficient part with white to ensure the image is displayed completely and maintains the aspect ratio.
- [en] : Crop to the shortest edge.：Crop the image based on the shortest edge, usually used to generate thumbnails of fixed aspect ratios, which may result in the loss of some edge content.
- Thumbnail size：You can set the width and height of the thumbnail (for example: 200x150 pixels), and the system will generate images of the corresponding size based on your selected 'thumbnail processing method'.Reasonable settings of size can effectively control the size of image files and speed 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' set here as a substitute to ensure the consistency of the website's visual style.
- 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, which is very convenient.
The flexibility of these settings allows you to worry-free about the complexity of image processing. With simple configuration, the security CMS can automatically complete the generation and optimization of thumbnails.
Summary
Common Questions (FAQ)
1. If the document contains multiple images, which one will AnQiCMS choose as the thumbnail?答：In the absence of manually uploading thumbnails, the AnQiCMS system will automatically extract the document content.the first imageAs a thumbnail of the document.
2. Why is my thumbnail not displaying at the size I set?Answer: This may be due to several reasons.Firstly, please check if the "thumbnail size" is correctly set in the →.The "thumbnail processing method