When the visual style of the website needs a complete overhaul, or to adapt to continuously changing device display sizes, we often need to adjust the size of image thumbnails.AnQiCMS (AnQiCMS) fully understands this and provides a convenient and efficient solution for such needs.How to batch regenerate thumbnails for all content in response to adjustments in the display dimensions of the front-end, in order to ensure the aesthetics and loading efficiency of the website, is a concern for many operators.
Why do we need to regenerate thumbnails?
The thumbnail plays a crucial role in website operation.They are not only the first impression that attracts users to click, but also the key factors affecting page loading speed and overall user experience.When your website is redesigned, or to adapt to responsive design for different screens (such as desktop, tablet, mobile), the original thumbnail size may no longer be applicable.Images that are too large will slow down loading speed and affect SEO; images that are too small may be blurry and harm the user experience.By regenerating thumbnails with appropriate frontend display dimensions, we can effectively improve the loading efficiency and image quality of the website, and ensure a consistent and high-quality visual experience on various devices.AnQi CMS features a flexible content model and multi-template support, which allows content to be displayed in various forms. Images, as an important part of the content, also need to adapt to different sizes.
The thumbnail processing mechanism of Anqi CMS
The Anqi CMS comes with a comprehensive image processing mechanism, designed to help users efficiently manage image resources on the website.In the 'Content Settings', you can find options such as 'Thumbnail Processing Method' and 'Thumbnail Size', which determine how the system automatically generates and processes thumbnails of images.
Currently, Anqi CMS provides three thumbnail processing methods:
- Scale proportionally by the longest edge:This method will display all sides of the image completely, and according to the actual aspect ratio of the image, fix the width or height of one side, and scale the other side proportionally.
- Pad by the longest edge:This processing method will fix the width and height of the image, and display it centered. If the image is not enough to fill the specified size, the excess part will be filled with white.
- Crop by the shortest edge:This method will center-crop the image, displaying the shortest edge completely, and the longest edge will be cropped to match the length of the shortest edge.
Moreover, you can also set a "default thumbnail", which the system will automatically use when no thumbnail is specified for the content.These fine settings give the Anqi CMS high flexibility in image management.
Preparation for adjusting the thumbnail size
Before batch generation, it is necessary to specify the new frontend display size and make corresponding configurations in the Anqi CMS backend.
- Go to content settings:Log in to the AnQi CMS backend, find 'Global Settings' in the left navigation bar, and then click 'Content Settings'.
- Adjust the thumbnail size:On the "Content Settings" page, find the "Thumbnail Size" option. Enter the new width and height according to your frontend design requirements, for example
300x200 - Select thumbnail processing method (optional):If you have new requirements for the cropping or scaling of thumbnails, you can select them in 'Thumbnail Processing Options' to ensure the image appears with the **desired effect.
After these adjustments are made, the AQ CMS knows the dimensions and processing rules you want for the new thumbnail.
Regenerate thumbnails for all content in bulk
After setting up the new dimensions, the next step is to regenerate the thumbnails in bulk. Anqi CMS provides a very convenient one-click generation feature:
At the bottom of the "Content Settings" page, you will see a name called "Batch regenerate thumbnailsThe 's button. Click this button, and the system will start to batch generate thumbnails for all the images uploaded to your website, based on the latest thumbnail size and processing method you just set.
This process is automated, and there is no need for you to manually handle one by one, which saves a lot of time and effort. Especially for websites with a large amount of content, this feature is particularly useful.
Attention Points and **Practice
When performing batch regeneration of thumbnails, there are some important items to pay attention to in order to ensure the process goes smoothly and achieves the expected effect:
- Data backup:Before performing any operation that may affect the entire site's data, it is strongly recommended that you back up the website data completely using the "Resource Storage and Backup Management" feature of AnQi CMS.Although regenerating thumbnails usually does not affect the original image, an extra backup can always provide additional security.
- Clearing front-end cache:After regenerating the thumbnail, to ensure that visitors can immediately see the new size of the image, you may need to clear the cache on the website front end (including browser cache and CDN cache if your website uses a CDN service).
- Check the front-end template:If you have only changed the thumbnail size, but the image tags (such as
item.Thumb/category.LogoThe usage of （etc.）has not changed, and new thumbnails are usually displayed automatically.But if your frontend display logic needs to be adjusted according to new dimensions (such as CSS styles, image container sizes), you may need to check and update your template files to ensure that the images can perfectly adapt to the new layout. - Performance considerations:For websites with a very large number of images, batch re-generating thumbnails may be a time-consuming and resource-intensive process.Suggest choosing to perform this operation during low traffic hours on the website (such as late at night or early in the morning) to minimize the impact on user access experience as much as possible.
- do not affect the original image:Batch regenerate thumbnails will only generate new thumbnail files based on the new settings, and will not make any changes to the original image files already uploaded to your website. You can operate with confidence.
By following the above steps and注意事项, you can easily and efficiently regenerate all content thumbnails in the Anqi CMS, ensuring that your website is always presented to users in a **state**.
Frequently Asked Questions (FAQ)
Q1: Will regenerating thumbnails affect my original image?A1: No.The batch regenerate thumbnail feature of Anqi CMS will only generate new thumbnail files based on the new size and processing method you define in the 'Content Settings'.The original image files uploaded to your website will remain unchanged and will not be affected.
Q2: I have regenerated the thumbnails, but the size of the image displayed on the website has not changed. Why is that?A2: The most common reason for this situation is a cache issue.Please try clearing your browser cache, and if your website uses CDN services, you also need to manually refresh the CDN cache.Additionally, please confirm that the code referencing the thumbnail in your frontend template is correct, for example, whether you have directly specified the old size, or if the CSS style still limits the display size of the image.Ensure the template is dynamically reading the thumbnail path and size generated by the Safe CMS.
Q3: Can I manually upload images of different sizes instead of using the thumbnail feature of AnQi CMS?A3: Yes, you can choose not to use the automatic thumbnail generation feature of AnQi CMS.When editing content, directly upload the pre-processed images of different sizes.However, to avoid chaos in image management and the repetition of manual work, we usually recommend that you fully utilize the automated thumbnail feature of Anqi CMS, which can better unify the management of images and improve efficiency.If you have very special and strict pixel requirements for image size on the front end, you can also upload the original large image and then use CSS to crop or scale it for display on the front end.