In content operation, images are an important element to attract readers, and standardized, beautiful thumbnails are even more critical to the visual consistency and loading speed of the website.AnQiCMS fully considered this point and provided us with flexible thumbnail customization features.If you want to adjust the thumbnail size and display ratio of AnQiCMS automatically generated thumbnails to present your website content with a more professional visual effect, then this article will provide you with detailed instructions.
Unified website visual: Custom thumbnail settings
AnQiCMS thumbnail settings feature is concentrated in the background."Content Settings"page.Here, we can globally configure the image processing method of the website content, which includes thumbnail size, generation ratio, and some other auxiliary functions.By these settings, you can ensure that the image display style of the entire website remains consistent, whether it is in the article list, product display, or other content modules, it can present a unified and professional appearance.
First, please log in to the AnQiCMS backend and then navigate to the menu on the left“Background Settings”and click on"Content Settings"the option. After entering this page, you will see a name called“Thumbnail size”Setting item, this is the core of adjusting the thumbnail size.
1. Set the fixed size of the thumbnail.
In“Thumbnail size”This column, you can freely set the width and height of the thumbnail according to the needs of the website front-end layout, for example, you can set it to200x200(square) or300x180(Rectangle).The system will strictly generate thumbnails based on the two values you enter.This means that no matter the size of the original image you upload, after processing by AnQiCMS, the final thumbnail will be unified to the width and height you set.
2. Select the intelligent thumbnail processing method
Setting the size may not be enough, as different proportions of the original images may deform or crop incorrectly when adapting to a fixed size. AnQiCMS provides three intelligent forms of adjustment.“Thumbnail processing method”Help us better handle various image ratios:
Scale proportionally to the longest sideChoose this method when AnQiCMS will resize the original image to the thumbnail size you set, based on the longest side of the original image.The image will be displayed completely without any cropping.If the scaled image does not completely fill the target size in one direction (width or height), there will be blank spaces on the other side, but the image itself will not deform.This is suitable when you want the image content to be fully displayed and do not mind the blank filling around the thumbnail.
Fill the longest sideThis processing method is similar to 'Scaling by the longest side', the image will also be scaled proportionally and centered.The difference lies in that when the scaled image does not fill the target thumbnail size, the system will use a white background (usually white) to fill the blank area around the image, making the final thumbnail strictly meet the width and height you set.This method ensures the consistency of the thumbnail size while avoiding the loss of image content, and is suitable for occasions where a uniform background color is required.
Trim according to the shortest edgeIf you are looking for a strict thumbnail size and compactness without any blank space, 'Crop to Shortest Side' would be the ideal choice.The system will use the shortest side of the original image as a reference for center cropping to ensure that the thumbnail completely fills the size you set without distortion.This method may cause some edge content of the longest side of the original image to be cropped off, but it can ensure that the thumbnail looks more full in visual terms.
3. Set default thumbnails and batch update
In addition to the above methods, there is also one on the page:"Default thumbnail"The option.If you do not upload a specific thumbnail for a project when publishing content, AnQiCMS will automatically use the default image you set here to replace the display, which is very helpful for maintaining the visual integrity of the website when images are missing.
After adjusting all sizes and processing methods, a very critical step is to click“Batch regenerate thumbnails”Button.This feature allows you to regenerate the thumbnails of all the images uploaded to your website according to the latest dimensions and processing settings.Especially when you have modified the thumbnail size or ratio, you must use this feature, otherwise the previous content may still display the old thumbnail.
Summary
By flexible configuration of the "Thumbnail Size" and "Thumbnail Processing Method" in the AnQiCMS backend "Content Settings", we can easily standardize the website thumbnails.AnQiCMS can provide corresponding solutions for the pursuit of the integrity of image content, strict uniformity of size, and compactness in appearance.Make good use of these features, which will greatly enhance the overall aesthetics and user experience of your website.
Frequently Asked Questions (FAQ)
1. I have modified the thumbnail settings in the background, why doesn't the thumbnail on the website front-end change?
This is usually because you have modified the settings without triggering the system to regenerate the existing thumbnails. Be sure to click on the "Content Settings" page.“Batch regenerate thumbnails”Button.This operation will reprocess all thumbnail images uploaded to the website according to your latest configuration. After the update is complete, clear the browser cache and visit again, and you will see the new effects.
2. Does AnQiCMS support setting different thumbnail size and ratio for different content models (such as articles, products)?
AnQiCMS's "Content Settings" thumbnail size and processing method is a global setting that applies to the thumbnail generation of all content models. Under the current version, if you need to display images of different sizes or ratios for different content models, a common practice is to first generate a generic thumbnail size through global settings, and then, in the front-end template, use CSS or JavaScript to adapt the thumbnail for specific content models (for example, by using CSS or JavaScript to adapt the thumbnail for specific content models (such asobject-fitProperty trimming or padding, or directly callingitem.Images(Group image) oritem.Logo(Cover first image) and other tags, then the image display is handled by the front-end.
3. What is the difference between 'Auto-compress large image' and 'Thumbnail size'?
The settings of 'Auto-compress large image' and 'Auto-compress to specified width' are for youUpload the original large imageThe optimization performed.When you upload a very large image, if this feature is enabled, the system will compress the width of the original large image to the specified pixels when saving it, in order to save storage space and speed up page loading.Extract and generate thumbnail from the original imageThe configuration performed at that time. In short, the former handles the size of the original image, and the latter handles the generation rules of the "small picture" used for display.