In website content operation, thumbnails play a crucial role.It is not only the first visual entry point for articles, products, and other content, but also directly affects the click-through rate, and is also a key factor in the layout aesthetics of list pages, recommended positions, and the like.However, many times when we publish content, we may forget to upload thumbnails, or we may want the system to handle it automatically for efficiency.How does AnQiCMS intelligently generate thumbnails for our content without manual upload of thumbnails?
AnQiCMS has designed a considerate mechanism to solve this problem.When you publish an article, product, or single page, if no image is manually uploaded in the 'Document Image' or 'Thumbnail' section, AnQiCMS will not leave your content blank or missing on the frontend.It will first check your article or page'sContent body section.
If your content contains images, AnQiCMS will extract them fromAutomatically extract the first detected imageAs a thumbnail of the content. This means that as long as you insert an image while editing the content, even if you forget to upload an image to the dedicated thumbnail field, the system can intelligently generate a thumbnail for it, ensuring the completeness and visual appeal of the content display.
This design greatly improves the efficiency of content publishing and avoids poor page display due to the failure to transmit thumbnails.However, AnQiCMS's intelligent extraction is not static, and it also provides a rich set of backend settings options, allowing you to fine-tune and optimize the automatically extracted thumbnails according to your actual needs.
In the AnQiCMS backend, you can go to the 'Backend Settings' under the 'Content Settings' page to find multiple configurations related to thumbnails. This is the core area where you control the thumbnail display:
Firstly“Thumbnail processing method”. AnQiCMS provides three mainstream processing methods to meet different design styles and display needs:
- Scale proportionally to the longest sideThis way ensures that the image is displayed completely without any cropping.The system will resize the longest side of the original image to the specified size based on the thumbnail settings, while proportionally adjusting the other side to ensure the image fits completely.If the thumbnail area is square and the original image is rectangular, there may be white space.
- Fill the longest sideIf you want the thumbnail to be displayed in a fixed size (such as square) without cropping the image, 'pad to the longest side' is a good choice.The system will resize the original image to fit within the target size, and then fill the insufficient part with white (or other preset color) to reach the fixed size.
- Trim according to the shortest edgeWhen you place more emphasis on visual uniformity, such as when all thumbnails on the list page must be strict squares and fill the entire area, "cropping to the shortest side" will be very practical.The system will first resize the shortest side of the original image to the specified size, then crop the longest side from the center outward to achieve the desired size, which may result in the edges of the image being cut off.
Then is“Thumbnail size”The settings. You can customize the width and height of the thumbnails according to the design requirements of the website front-end, for example, set it to "200x150".The system will process the thumbnail automatically or generate it based on the size you set here.Setting the size reasonably can effectively reduce the file size of images, speed up page loading, and improve user experience.
Moreover, if you want to have a visual element in extreme cases (for example, when both the content text and thumbnail fields do not have images), AnQiCMS also provides"Default thumbnail"The option. You can upload a universal default image for the website, which will be used as a fallback thumbnail when no images can be extracted from the content.
It is worth noting that if you adjust the thumbnail processing method or size later and want these changes to be applied to the content that has already been published, you can use“Batch regenerate thumbnails”Function. This way, the system will reprocess the thumbnails already existing on the entire site according to the latest settings, ensuring consistency in style.
In summary, AnQiCMS showcases high flexibility and intelligence in thumbnail management.It can automatically solve the "trouble" of users forgetting to upload thumbnails, and also allows users to have complete control over the style and appearance of thumbnails through detailed backend settings.This undoubtedly provides great convenience for content operators, allowing them to focus more on the creation of content itself and not worry too much about technical details.
Frequently Asked Questions (FAQ)
How will AnQiCMS handle thumbnails if the article content does not have any images?If the content text does not contain any images, nor does it have a manually uploaded thumbnail, AnQiCMS will try to use the default thumbnail you have configured in the 'Content Settings'.If there is no default thumbnail set, then the thumbnail position will not display any image.
What does the thumbnail extract 'the first image' refer to? Does it only recognize the images in the article editor?The first image refers to the first valid image encountered by the system while parsing the content text.This usually includes the images you upload or insert into the content using the editor.AnQiCMS will prioritize the selection from these images.
Did the thumbnail size setting in the background adjust, and will the thumbnail of the old article be updated immediately?After changing the thumbnail processing method or size in the “Content Settings”, these settings will only take effect for subsequent newly uploaded images or images processed through the “Batch Regenerate Thumbnails” feature.For existing thumbnails, you need to manually click the "Batch regenerate thumbnails" button, and the system will then reprocess all old article thumbnails according to the new settings.