The website's front-end interface has been completely renewed, you may find that the old thumbnail images do not fit well in the new layout, either the size is not right or the display effect is not good.Don't worry, AnQiCMS (AnQiCMS) provides you with a convenient and efficient solution to help you batch regenerate thumbnails and easily adapt to the new front-end display size requirements.
Why do you need to regenerate thumbnails?
The visual presentation of the website is crucial for user experience.With the changes in design trends, the popularity of responsive layouts, or the widespread application of high-resolution screens, we may need to adjust the display size and cropping method of front-end images (especially thumbnails).If you continue to use thumbnails of old dimensions, it may cause image stretching, deformation, blur, improper cropping, and even affect page loading speed due to large file size, thereby damaging the user experience and SEO effect.AnQi CMS knows this point well, therefore it has built-in batch processing of thumbnails, allowing you to modify them one by one without manual operation, saving a lot of time and effort.
Prepare for mass regeneration of thumbnails
Before performing any batch operations, we always recommend that you back up your data, including website files and databases.Although the operation of Anqi CMS is relatively safe, an extra layer of protection is always good.
Next, clarify the specific requirements of the new frontend layout for thumbnails. This may include:
- New dimensions (width and height)For example, from a square thumbnail to a wide-screen ratio, or a specific module requires a larger or smaller size.
- New cropping or scaling methodIs it necessary to maintain the integrity of the image by scaling proportionally, or do you need to crop precisely to fill a fixed area?
- Image format optimizationDo you need to convert the image to WebP format to improve loading speed?
After understanding these specific requirements, we can proceed to configure the Anqi CMS backend.
Adjust the thumbnail settings of AnQi CMS
All core settings related to thumbnails are concentrated in the "Global Settings" in the background.
First, please log in to the AnQi CMS backend, click on the "Backend Settings
Thumbnail Processing MethodHere is the key to how the thumbnail is processed based on the size you set. Anqi CMS provides three flexible methods that you can choose from according to your specific front-end design needs:
- Scale proportionally to the longest sideThis method ensures that the image maintains its original aspect ratio during scaling, and the image does not distort.It will scale proportionally based on the longer side of the width or height you set.If the aspect ratio of the original image does not match the target size, the thumbnail may be blank or not fully fill the area on the shorter side.
- Fill the longest sideIf you want the thumbnail to display strictly according to the set width and height without distorting the image, this method is very suitable.The system will resize the image proportionally to fit within the target size, and the insufficient part will be filled with white (or other default color) to center the image in the specified area.
- Trim according to the shortest edge: Choose this method when you need the thumbnail to fill a fixed-size area accurately and are willing to accept some of the edge content being cropped.The system will resize the image based on the shortest edge for proportional scaling, then crop from the center point to achieve the exact width and height you set.
Thumbnail sizeHere, you can directly input the new width and height required by the front-end.For example, if your new frontend requires thumbnails to be 300 pixels wide and 200 pixels tall, you will set the values here to 300 and 200 respectively.Please note that this setting will affect all document, category, and single page thumbnails.
Whether to automatically compress large imagesandAutomatically compress to a specified widthThese options are not directly related to the generation of thumbnails, but they affect the storage of the original large image, indirectly affecting the quality and size of the thumbnails.If auto-compression of large images is enabled and a width is set, the original image will be compressed first before processing.This helps control the overall image storage space of the website, but if the thumbnail size is set larger than the compressed large image, it may affect the clarity.
Whether to enable Webp image formatThis is an image optimization option, enabling it will convert all uploaded images to WebP format.The WebP format usually provides smaller file sizes than JPG or PNG while maintaining visual quality, which is very helpful for speeding up website loading.Although it does not directly affect the size and cropping of thumbnails, when used in conjunction with bulk thumbnail regeneration, it can bring better image performance to your website.
Carefully adjust these settings and confirm that they meet your new frontend display requirements before proceeding to the next step.
Execute batch regeneration of thumbnails
At the bottom of the "Content Settings" page, you will find a button named "batch regenerate thumbnails".
This button is the core of solving our problems.When you click it, Anqi CMS will start a background task, traverse all the uploaded image resources on your website, and regenerate all the thumbnails according to the configuration of the thumbnail processing method and thumbnail size that you have just modified.
For websites with a large number of images, this process may take some time, depending on your server performance and the total number of images.You do not need to stay on this page and wait, the system will complete the work silently in the background.
Verify the effect of the new thumbnail.
After the batch generation is complete, the most important thing is to verify the effect.
- Clear the cacheFirst, go back to the Anqi CMS backend homepage, click the "Update Cache" button at the bottom of the left navigation bar to ensure that the website displays the latest data.
- Check the front-end page：Open your website's front end, focus on checking different types of pages (such as article lists, product detail pages, category pages, single pages, etc.), and see if the thumbnails are displayed normally according to the new size and processing method.
- Multi-device testingIf your website is responsive design, make sure to test it on different devices (PC, tablet, mobile) and browsers to ensure that thumbnails can be presented perfectly in all scenarios.
- Detail inspection: Zoom in to check if the image is clear, if the edges are properly cropped, and if there is any unnecessary whitespace or stretching.
Continuous optimization and management tips
- Upload high-quality original imagesEven though the system will automatically handle and compress, a higher-quality original image will result in better thumbnail effects.
- Using the default thumbnailIn the "Content Settings", you can set a "default thumbnail".If some content does not upload a dedicated thumbnail, the system will automatically use the default image instead, ensuring the consistency of the page's visual, and avoiding blank placeholders.
- Regular reviewWith the growth of website content and potential design adjustments in the future, it is a good habit to regularly review and optimize the image strategy.
By using this convenient feature provided by Anqi CMS, you can easily cope with the thumbnail adaptation challenges brought by changes in front-end design, ensuring that your website always presents users with **visual effects.**
Frequently Asked Questions (FAQ)
1. Why didn't the front end of my website immediately show the changes after regenerating the thumbnail?This is usually due to website or browser caching.In AnQi CMS backend, you need to click "Update Cache" to clear the system cache.At the same time, it is also recommended that you clear your browser cache (press Ctrl+F5 or Command+Shift+R) or access the website in incognito mode to ensure that the latest image resources are loaded.
2. How should I choose the appropriate thumbnail size?Choose thumbnail size based on your frontend design draft or actual display requirements.Generally, you need to measure the actual pixel width and height occupied by the thumbnail in the front-end page.thumbThe filter can be flexibly called with different thumbnail sizes in the template), but the size set in the background is the basic size.It is a good practice to set a 'mainstream' or 'maximum' display size and combine it with 'thumbnail processing methods' to adapt to smaller display areas.
3. What are the differences between the three thumbnail processing methods: 'Scale to fit the longest side', 'Fill to the longest side', and 'Crop to the shortest side', and how should I choose?
- Scale proportionally to the longest sideThe image will be displayed in full, without cropping, but if the original image ratio does not match the target size, there may be blank areas on the other side of the thumbnail or it may not be completely filled.It is suitable for high content integrity of images and the front-end layout can adapt to images of non-fixed dimensions.
- Fill the longest sideThe image is displayed completely without cropping and strictly conforms to the fixed size you set.The area that does not match will be filled with white (or transparent).Suitable for situations where you need fixed-size images but do not want to lose any part of the image content, such as in product displays, to maintain product integrity.
- Trim according to the shortest edge: The image will strictly fill the fixed size you set, but may cut off part of the image edge content.Suitable for scenes that require strict fixed size and proportion, and where the central content of the image is the most important, such as the cover images of news lists, which are often cropped to highlight the subject.
Choose which way depends on your visual design requirements and the characteristics of the image content. It is recommended that you actually adjust the settings after