What thumbnail processing methods does AnQiCMS support, and how to set them to optimize the display effect?

In website operation, image content plays a crucial role, especially exquisite thumbnails can quickly attract users' attention and enhance the visual appeal and click-through rate of the page.AnQiCMS (AnQiCMS) provides flexible and diverse features in image processing, especially for the generation and optimization of thumbnails, aiming to help websites achieve **display effects.**

We will delve into the thumbnail processing methods supported by AnQiCMS, as well as how to make your website images come alive through reasonable settings.

The core mechanism of AnQiCMS thumbnail processing

First, it is crucial to understand how AnQiCMS retrieves and generates thumbnails. AnQiCMS provides multiple ways to retrieve thumbnails for content management:

1. Automatically extract:When you publish an article or product, if the content includes images and you have not manually uploaded a thumbnail, AnQiCMS will automatically identify and extract the first image in the content as the thumbnail for the document.This feature greatly simplifies the process of content publishing.
2. Manual upload:For articles, products, categories, single pages, and other modules, AnQiCMS allows you to directly upload or select an image from the image library as a thumbnail.This way provides higher flexibility, allowing you to prepare exclusive thumbnails for specific content.
3. Default thumbnail: Considering that some content may not have a suitable image, or in order to maintain the consistency of the overall style of the website, AnQiCMS allows you to set a default thumbnail.When a piece of content does not specify a thumbnail, the system will automatically use this default image to display.

These mechanisms ensure that every location on the website that requires a thumbnail has an image displayed, and it is also very convenient to manage.

Understand deeply the thumbnail processing method of AnQiCMS

AnQiCMS provides three main thumbnail processing modes in the background, which determine how the original image is cropped or scaled to fit the preset thumbnail size.Understanding the difference can help you make a **choice based on your actual needs."Content Settings"Configure in

1. Scale proportionally to the longest side

   • Working principle:The system will resize the original image according to its aspect ratio to the specified size, ensuring that the longest side of the original image completely fits the target size while the other side is proportionally reduced.This method features that the image is not cropped, and the content is complete.
   • Optimization effect:Retains all the content of the image, no information loss from cropping.
   • Application scenarios:Suitable for images where content integrity is very important and cannot be cropped, such as advertisements with text, product full-view images, and so on.However, it should be noted that the processed image may not completely match the thumbnail size set on the short side, which may cause blank space or uneven dimensions.

2. Fill the longest side

   • Working principle:On the basis of "scaling by the longest sideThe image will be centered in the padded area.
   • Optimization effect:This method ensures that the thumbnail will display at the size you set, while maintaining the integrity of the image content.
   • Application scenarios:Suitable for occasions that require strict uniform thumbnail size while not cropping the image content, such as product lists, text-image lists, etc., which can make the page layout more uniform.

3. Trim according to the shortest edge

   • Working principle:The system will crop from the center area of the original image based on the preset thumbnail size, ensuring that the shortest edge completely adapts to the target size and cuts off the excess part from the center.
   • Optimization effect:This thumbnail generated in this way can perfectly fill the size you set and usually can highlight the main content of the picture (if the subject is in the center).
   • Application scenarios:Suitable for scenarios where the main content of the image needs to be highlighted and the thumbnail size needs to be strictly consistent, such as news lists, portraits, cover images, etc.But note that if the main subject of the image is not centered, it may lead to the loss of important content due to cropping.

Guide to optimizing display settings

Make full use of the AnQiCMS thumbnail feature and ensure that the website content is presented in **status, you can follow the following steps:

1. Access content settings:Log in to the AnQiCMS backend and navigate to“Background Settings”and then select"Content Settings". All the core configurations related to thumbnails are here.

2. Choose the appropriate thumbnail processing method:Choose one of the three processing methods carefully, based on the overall design style and characteristics of your website's images.

   • If your image contains a lot of information and you need to display it completely, you can choose to 'scale proportionally to the longest side'.
   • If you need your thumbnail sizes to be absolutely uniform on your page layout but do not want to crop the images, you can choose 'pad to the longest side'.
   • If the main subject of your image stands out, you need to keep the thumbnail in a fixed ratio and can accept partial cropping. Choosing '裁剪最短边' would be a good option.

3. Set the thumbnail size:In the "Content Settings", you can specify the specific“Thumbnail size”(width and height).

   • To meet the front-end requirements:This size should match or be close to the actual thumbnail position size called in your website front-end template.The size being too large will increase the image file size, affecting loading speed; too small a size may result in blurred or distorted images.
   • Responsive considerations:If your website is responsive design, you can set a moderate size and then control its display on different devices through CSS.

4. Using the default thumbnail:Upload a default thumbnail that matches the style of your website. This not only helps avoid certain content from appearing hollow due to the lack of images but also ensures the visual consistency of the website.

5. Batch regenerate thumbnails:After you change the thumbnail processing method or size, AnQiCMS provides“Batch regenerate thumbnails”的功能。Be sure to use this feature to ensure that all uploaded images are generated with new settings to meet the required thumbnail specifications, and to synchronize the effects across the entire site.

6. Additional image optimization:In addition to thumbnail processing, AnQiCMS also provides other useful image optimization options in the "Content Settings":

   • Whether to automatically compress large images:Turn on this option to automatically compress oversized images uploaded, reducing storage space and loading time. You can specify 'Auto-compress to a specified width', for example, set to 800 pixels.
   • Do you want to enable Webp image format:WebP is a modern image format that provides smaller file sizes and higher image quality compared to JPEG and PNG.After enabling this feature, newly uploaded images will be automatically converted to WebP format, and existing images can also be batch converted using the provided WebP conversion tool.

Call the thumbnail in the front-end template

After configuring the background settings, it is very simple to call thumbnails in the AnQiCMS front-end template. Whether it is articles, products, categories, or single pages, their data objects all contain the corresponding thumbnail fields, usuallyThumborLogo.

For example, in a list of articles, you can call the thumbnail like this:

<img src="{{item.Thumb}}" alt="{{item.Title}}" />

HereitemRepresents each article object in the loop,item.ThumbIt is the thumbnail address generated by AnQiCMS based on your backend settings. The calling method is similar for categories and single pages.

By means of these detailed thumbnail processing methods and optimization strategies, AnQiCMS aims to help you easily manage website images, achieve more professional, more beautiful, and faster loading of website content display, thereby improving user experience and the overall operation efficiency of the website.

Common questions