How to configure the thumbnail processing method of AnQiCMS to ensure the unified display effect of images on the front end?

In AnQiCMS, the unified display effect of images is crucial for the overall aesthetics and user experience of the website, especially for thumbnails.Whether it is an article list, product display, or category page, maintaining the consistent size and style of thumbnails can make the website look more professional and easier to browse.AnQiCMS provides flexible configuration options, allowing us to easily achieve this goal.

Position thumbnail settings: Content settings are key

To start configuring the thumbnail, we need to log in to the AnQiCMS admin interface.Find "System Settings" in the left navigation bar and click to enter the "Content Settings" page.Here is a collection of all image processing options related to the website content, including the thumbnail processing method we are concerned about.

Core configuration: choose the most suitable thumbnail processing method for you

On the "Content Settings" page, you will see the item "Thumbnail Processing Method". AnQiCMS provides three main thumbnail processing methods, each with its unique application scenarios and visual effects:

1. Scale proportionally to the longest sideThis method will resize the image based on the set thumbnail size,longest sidewhether it is width or height, andmaintain the original aspect ratio of the imageOn the other side, it scales automatically proportionally.

   • Visual effects: The image content will be displayed completely without any cropping. If the aspect ratio of the original image is not consistent with the size of the target thumbnail, the thumbnail may leave blank areas on the shorter sides to fit the container.
   • Applicable scenariosWhen you want all the content of the image to be fully presented without any cropping loss, this is the ideal choice.For example, in a photo gallery, even if there is blank space around the thumbnails, it is better than cropping off important parts.

2. Fill the longest sideIf you have strict requirements for thefinal display size.And hope that the image content is always complete and centered, then 'fill to the longest edge' is a good choice.The system will first resize the image proportionally along the longest side to fit the target size, then fill the blank area around the image with a preset color (usually white) to make the final thumbnail reach the exact size specified.

   • Visual effects: All thumbnails will strictly maintain the size you set (e.g., 200x200 pixels), with the image content centered and the insufficient edge parts filled in.
   • Applicable scenarios：A layout suitable for scenarios requiring high consistency, such as the product list page of an e-commerce website, where all product images are required to be displayed in a perfect square, even if the original image is not square, it can maintain visual consistency through padding.

3. Trim according to the shortest edgeThis method aims to make thumbnailsPerfectly fillThe size you set, andNo blank edges will appear. The system will resize the image based on the shortest side to the target size, then crop from the center area of the image to ensure that the thumbnail completely covers the set size.

   • Visual effects: All thumbnails will strictly conform to the set aspect ratio and size, and the image content will be cropped to ensure there are no blank areas. This means that the edge parts of the original image may be cut off.
   • Applicable scenariosWhen you are most concerned with the visual filling and compactness of thumbnail size and can accept part of the image edge content being cropped.For example, a uniform rectangular thumbnail in a news list or blog recommendation is more visually impactful than one with blank spaces.

Auxiliary Configuration: Size and Default Image

After selecting the processing method, you need to specify the specific thumbnail size.You can set the width and height of the thumbnail, for example, set it to '200x150' pixels.This size is the basis for generating thumbnail images by the system. A reasonable size setting can not only meet the design requirements but also effectively reduce the image volume and improve the page loading speed.

In addition, the setting of the 'default thumbnail' is also very useful. If no exclusive thumbnail is uploaded when the document is published, AnQiCMS will automatically use the default image set here as a substitute, ensuring that all content has a visual placeholder and avoiding the embarrassment of missing images.

In the 'Content Settings', there are options such as 'Whether to automatically compress large images' and 'Automatically compress to a specified width'.These features can further optimize the image loading speed, it is recommended to consider them together.For example, enable automatic compression of large images and set a reasonable width (such as 800 pixels) to significantly reduce the file size of the image without affecting visual quality.

Uniform Effect: Batch regenerate thumbnails

After you modify the thumbnail processing method or size, the old images that have already been uploaded will not be updated immediately according to the new rules.In order to apply the new settings to these old images, you need to click the 'Batch regenerate thumbnails' button.This is a very practical feature, it will traverse all the uploaded images on your website and regenerate their thumbnail versions according to the latest thumbnail settings.After completing this operation, your website front-end can display uniform thumbnail display effects.The newly uploaded image will automatically follow the latest configuration.

Front-end Call: How to display thumbnails in the template

It is very flexible to call thumbnails in AnQiCMS templates. For example, you can use them in article lists or detail pages.{{item.Thumb}}to directly get the thumbnail address, or through{{item.Logo}}Get the large image or main image. You can also use it to create thumbnails for any image address in the template.{{image_url|thumb}}Filter. These tags and filters combined with the backend settings ensure the consistency and optimization of front-end images.

By following these steps, you can finely configure the thumbnail processing method in AnQiCMS, whether you choose to display in full, perfectly fill, or center with padding, it can ensure that the website images have a unified, beautiful, and efficient display effect on the front end.

Frequently Asked Questions (FAQ)

1. Will the old image be automatically updated if I change the thumbnail settings?It will not update automatically. You need to go to the "System Settings" -> "Content Settings" page, find the "Batch Regenerate Thumbnails" feature and click to execute.This way, the system will reprocess all thumbnails of the uploaded images based on your latest configuration.

2. Can I use different thumbnail sizes on different pages (such as article lists and product details)?AnQiCMS backend's 'Content Settings' includes 'Thumbnail Size', which is a global setting applied to all thumbnails generated by the system.If you need to display thumbnails of different sizes on a specific page, you can consider adjusting the image display size in the frontend template using CSS, or using an image cropping service (if AnQiCMS provides one), or preparing different sized images in advance for use in different templates.For specific scenarios, you can also customize fields for the content model in the background, upload images of different sizes.

3. In addition to thumbnails, what image optimization features does AnQiCMS provide?Yes, AnQiCMS also provides multiple image optimization features, all of which can be configured in the "Content Settings". For example:

• Whether to download remote images: You can choose to download external link images to local, for convenient unified management and acceleration.
• Whether to enable Webp image format: After enabling, uploaded JPG, PNG images will be automatically converted to a smaller WebP format, reducing storage space and speeding up loading speed.
• Whether to automatically compress large images: Automatically compress large images uploaded and can set the maximum width after compression to further optimize website performance.