In website content operation, images play a crucial role, especially thumbnails, which are often the first impression visitors have of the content.A suitable thumbnail can not only attract clicks, but also enhance the visual appeal and professionalism of the entire page.AnQi CMS knows this and provides us with flexible thumbnail processing functions.
Sometimes, we may not want to change the fixed display size of thumbnails - for example, our website design requires all thumbnail images on list pages to be 120x120 pixels, but we find that some images are stretched or cropped in a way that is not satisfactory.Now, our need is not to change the size, but to adjust the system to how the original image is 'stuffed' into this fixed thumbnail size frame.
How can you adjust the cropping or scaling of the thumbnail without changing its predetermined size?AnQi CMS provides very intuitive settings to help us achieve this goal.
Position the thumbnail processing settings
First, we need to log in to the Anqi CMS backend management interface. Find and click on it in the left menu.“Background Settings”and then select"Content Settings"Here is a collection of various global configurations related to the website content, including the thumbnail processing options we are concerned about.
Specify the thumbnail size.
In the "Content Settings" page, you will see a name called“Thumbnail size”The option.Here, the unified width and height of your website thumbnails are usually set, for example, '200x150'.Remember, this time our goal is to keep the size unchanged, just adjust the way the image fits into this size frame.So, we don't need to change the value here.
Adjust the thumbnail processing method
The real core lies in“Thumbnail processing method”This option. Anqi CMS provides three mainstream and practical processing methods here, each with its unique performance effect:
Scale proportionally to the longest sideThis is the most 'gentle' scaling method. The system scales the original image proportionally based on the longest side until that side matches the longest side of the thumbnail frame. The advantage of this isThe image content will be retained in full, it will not be cropped.However, the缺点is also very obvious, if the aspect ratio of the original image is not consistent with the thumbnail frame, then there may be blank space on one side (width or height) of the thumbnail.For example, a 16:9 wide-screen image placed into a 1:1 square thumbnail frame may have blank spaces at the top and bottom.
Fill the longest sideIf you want the image to be displayed completely, while maintaining a fixed thumbnail size, and not having any uncertain blank space, then 'Fill to the longest edge' would be the ideal choice. The system will first resize the image proportionally to the longest edge, ensuring that the image is displayed completely within the thumbnail frame, and then fill the excess part of the thumbnail frame (usually the edges) withSolid white blockFilling. In this way, you can ensure that the image is complete and obtain a fixed size, visually neat thumbnail.
Trim according to the shortest edgeIf you pursue visual consistency and neatness for thumbnails and are not bothered by sacrificing part of the image content at the edges, then 'crop by the shortest side' comes in handy.The system will use the shortest edge of the original image as a reference, scaling it proportionally until that edge matches the shortest edge of the thumbnail frame.Centered croppingMake sure the thumbnail frame is completely filled with the image, leaving no blank space.This method is most commonly used in scenarios where a strict unified visual style is required for product lists, avatars, etc.It ensures that all thumbnails are perfectly filled to the specified size, but may crop some of the original image edges.
Make the changes take effect: batch regenerate thumbnails.
After selecting your favorite thumbnail processing method, an important step is to make these settings effective for your websitethe existing imageseffective. At the bottom of the "Content Settings" page, you will find a“Batch regenerate thumbnails”function.
Click this button, Anqi CMS will regenerate thumbnails for all uploaded images on the website according to your latest settings.This process may take some time, depending on the number of images on your website.After the operation is complete, you will visit the website front end again and find that the thumbnails have been displayed according to the new cropping or scaling rules.For new images uploaded thereafter, the system will also automatically process them according to the current settings.
Summary
By using the "Thumbnail Processing Method" option in the "Content Settings" of AnQi CMS, we can flexibly control the image adaptation strategy without modifying the thumbnail size.No matter whether you want to display images completely, fill the background, or uniformly crop, it can be easily achieved, making the visual presentation of the website more accurate and professional.
Frequently Asked Questions (FAQ)
Q1: Why did the pictures on the website not change after I modified the thumbnail processing method?A1: After changing the thumbnail processing method, you need to perform the 'batch regenerate thumbnails' operation on the uploaded images, the new settings will take effect on them.For new images uploaded later, the system will automatically apply the new processing method.
Q2: Can I set different thumbnail processing methods for different types of content (such as articles and products)?A2: The thumbnail processing method in the "Content Settings" is a unified setting across the entire site.This means it will be applied to all scenarios requiring thumbnail generation (such as article thumbnails, product thumbnails, etc.).If you need to display different styles for different content, you can consider uploading images with different styles, or performing more complex customization at the template level.
Q3: If I want to display the thumbnail centered while maintaining the size and cropping away the excess to fill the entire area, which method should I choose?A3: In this case, you should chooseCut according to the shortest sideIt ensures that the thumbnail completely fills the specified size, while also centering the original image and cropping off the excess content around the edges.