In website content operation, carefully selecting and setting thumbnails for each article or product page is a time-consuming and important task.A captivating thumbnail can significantly increase click-through rate, optimize user experience, and be beneficial for SEO performance.However, facing a massive amount of content, manually uploading and adjusting thumbnails will undoubtedly become a huge burden.A CMS that understands this well provides a smart and flexible solution, automatically converting the first image of the document content into a thumbnail, greatly simplifying the operation process.
Intelligent Extraction: How to automatically capture the first image in AnQi CMS
The intelligence of Anqi CMS lies in its ability to understand the structure of your content.When you publish or edit a document, if you have not manually uploaded or specified a thumbnail, but the document content contains images, the system will automatically 'patrol' your main text.the first imageSet it as the cover image of the document. This image not only represents the document but will also be processed according to the rules you set up to generate the final thumbnail.
This means that as long as your article is accompanied by images, you no longer need to worry about thumbnails.The system will automatically complete this task, saving you a lot of time and energy, allowing you to focus more on the content creation itself.
精细化管理：Custom thumbnail processing strategy
The power of Anqi CMS is not just about automatic extraction.It also provides a series of refined thumbnail processing options to ensure that the automatically generated thumbnails perfectly match the design style and performance requirements of your website.Content Settings”中找到：
Thumbnail processing method：You can choose different processing methods according to the design requirements：
- Scale proportionally by the longest sideThis method preserves all the content of the image, scales it proportionally to the longest side, ensuring that the image does not distort.
- Scale proportionally by the longest side with padding：If you need a fixed-size thumbnail but also want to display the full image content, the system will fill the insufficient parts with white (or any other specified color) after scaling.
- [en] : Crop to the shortest edge.When you need strictly unified thumbnail sizes, the system will crop out the specified size from the central area of the image, which may result in the loss of some edge content. Choose the processing method reasonably, which can ensure that the thumbnail is both beautiful and unified in different positions.
Thumbnail size：You can set specific width and height values to make the system process all automatically extracted or manually uploaded thumbnails into a uniform size.This is crucial for the layout and visual consistency of the web page, and it also helps to reduce image size and improve loading speed.
Default ThumbnailIf your document content does not contain any images, and you have not manually uploaded thumbnails, the system will not allow your page to be 'bare'.You can upload a "default thumbnail" on the backend, which will be used as a fallback display for all content that does not specify a thumbnail.This helps maintain the overall visual integrity of the website.
Automatically compress large images and specify width：To further optimize website performance, AnQi CMS supports automatically compressing large images uploaded to a specified width.This can effectively reduce the size of image files, speed up page loading, and is especially beneficial for mobile user experience and SEO.
Enable WebP image formatEnglish: WebP is a modern image format that can significantly reduce the size of image files while maintaining image quality.You can enable this feature in the content settings to automatically convert newly uploaded images to WebP format.Batch regenerate thumbnailsTool, convenient for you to convert existing images to WebP format and optimize the images on the entire site.
Through these flexible configurations, you can allow the Anqi CMS to automatically extract the main image while also cropping, scaling, compressing, and even converting formats according to your set standards, ensuring that the thumbnail presented to the user is both beautiful and efficient.
Display thumbnails in the template
After the settings and content publishing are completed in the background, you still need to call these thumbnails in the front-end template to display them. Anqi CMS provides concise template tags to accomplish this task.
In the document details page, you can directly usearchiveDetailThe tag to get the thumbnail of the current document:
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
Herename="Thumb"This refers to the thumbnail path after backend processing. If you want to get the original first image (unscalable, uncropped, etc.), you can usename="Logo".
In the document list page, you canarchiveListloop through multiple documents by tag, and display the thumbnail of each document in the loop:
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
<h3>{{ item.Title }}</h3>
</a>
{% endfor %}
{% endarchiveList %}
Through these simple tags, you can easily present the automatically extracted and processed thumbnails in various corners of the website, whether it's an overview on the list page or a display on the detail page, it can have a unified and professional visual effect.
This series of functions of Anqi CMS, from intelligent extraction to refined processing, to convenient template calls, collectively constitute a highly efficient and automated thumbnail management solution.It not only liberates the hands of website operators, but also ensures the professional presentation and excellent performance of the website content.
Common Questions (FAQ)
1. If my document content does not contain any images and no manual thumbnails are uploaded, how will Anqí CMS handle it?
If the document content does not contain any extractable images, and you have not manually specified a thumbnail, Anqi CMS will use the "default thumbnail" preset in your "content settings" backend as the thumbnail display for this document.This can prevent the appearance of blank images or style disarrangements, maintaining the overall visual consistency of the website.
2. English extraction of thumbnail size or cropping method does not meet my design requirements, how can I adjust?
You can find it in the "Content Settings" of the "Security CMS" backend.Thumbnail size" and "Thumbnail processing method
3. I have modified the thumbnail size settings in the background, but the thumbnails of the existing old documents on the website have not changed. What should I do?
When you modify the thumbnail processing rules in the "Content Settings", these rules usually only take effect on newly uploaded or newly generated images. For the thumbnails of existing old documents on the website, you can use the "Content Settings" page at the bottom to "}]Batch regenerate thumbnailsEnglish function. This tool helps you batch process and update all existing document thumbnails based on the latest settings, ensuring consistent images across the entire site.