How does Anqi CMS automatically extract the first image of the document content as a thumbnail for display?

In website content operations, carefully selecting and setting thumbnails for each article or product page is a time-consuming and important task.An eye-catching thumbnail can significantly increase click-through rate, optimize user experience, and be beneficial for SEO performance.However, facing an overwhelming amount of content, manually uploading and adjusting thumbnails will undoubtedly become a huge burden.A security CMS deeply understands this, and therefore provides a set of intelligent and flexible solutions that automatically transform the first image of the document content into a thumbnail, greatly simplifying the operation process.

Intelligent Extraction: How can Anqi CMS automatically capture the first picture?

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 'scan' your text.It will recognize and extract the occurrences in the textthe first imageSet it as the cover image of the document. This cover image not only represents the document but will also be processed according to the rules you set 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 effort, allowing you to focus more on the content creation itself.

Fine management: Custom thumbnail processing strategy

The strength of AnQi CMS is not just 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.These settings can be accessed in the background "Content settingsFound in:

1. Thumbnail Processing Method: You can choose different processing methods according to design requirements:

   • Scale proportionally to the longest sideThis method preserves all the content of the image, scales it proportionally to the longest side, ensuring that the image does not deform.
   • Fill the longest sideIf you need a fixed-size thumbnail but also want to show the entire image, the system will fill the insufficient part with white (or other specified color) after scaling.
   • Trim according to the shortest edge: When you need strictly uniform thumbnail sizes, the system will crop the specified size from the center of the image, which may result in the loss of some edge content. Choose a reasonable processing method to ensure that thumbnails are displayed beautifully and uniformly at different positions.

2. Thumbnail sizeYou 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 website page, and also helps to reduce image size and improve loading speed.

3. Default thumbnailIf your document content has no 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 displayed as a fallback for all content that does not specify a thumbnail.This helps maintain the overall visual integrity of the website.

4. Automatically compress large images and specify widthTo further optimize website performance, Anqi CMS supports automatically compressing large uploaded images to a specified width.This can effectively reduce the size of image files, speed up page loading, and is particularly beneficial for mobile user experience and SEO.

5. Enabled WebP image formatThe WebP is a modern image format that can greatly reduce the file size of images while maintaining image quality.You can enable this feature in the content settings to automatically convert new uploaded images to WebP format.For the images that have been uploaded, the system also provides the "batch regenerate thumbnailsTool, convenient for you to uniformly convert existing images to WebP format and optimize the images on the entire site.

By these flexible configurations, you can allow the Anqi CMS to automatically extract the main image while cropping, scaling, compressing, and even converting the format according to the standards you set, ensuring that the thumbnail presented to the user is both beautiful and efficient.

Display thumbnail in template

After completing the settings and content release 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 complete this task.

On 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"It refers to the thumbnail path after backend settings processing. If you want to get the original first image (未经缩放、裁剪等处理的), you can usename="Logo".

On the document list page, you canarchiveListloop through multiple documents by tag and display a thumbnail of each document:

{% 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 %}

With these simple tags, you can easily display the automatically extracted and processed thumbnails at various corners of the website, whether it is 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 an 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.

Frequently Asked Questions (FAQ)

1. How will AnQi CMS handle it if my document content does not contain any images and no thumbnail has been manually uploaded?

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 the background "Content Settings" as the thumbnail display for the document.This can prevent the appearance of blank images or style errors, maintaining the overall visual consistency of the website.

2. The automatically extracted thumbnail size or cropping method does not meet my design requirements, how can I adjust?

You can find in the Anqi CMS backend.Content settings”in, find the “Thumbnail sizeAndThumbnail Processing MethodThese options. Here, you can set the required thumbnail width and height according to the specific needs of your website design, and choose processing methods such as 'scale proportionally to the longest edge', 'fill to the longest edge', or 'crop to the shortest edge'.After adjustment, the newly published document will generate thumbnails according to the new rules.

3. I have modified the thumbnail size setting in the background, but the old thumbnail of the existing documents on the website has not changed. What should I do?

After you modify the thumbnail processing rules in the "Content Settings", these rules usually only take effect for newly uploaded or generated images. For the existing old document thumbnails on the website, you can use the "Content Settings" page at the bottom tobatch regenerate thumbnails”Function. This tool helps you to batch process and update the thumbnails of all existing documents according to the latest settings, ensuring that the images on the entire site are consistent.