When the visual style of a website needs a complete overhaul, or to adapt to the ever-changing display sizes of devices, we often need to adjust the size of the thumbnail images.AnQiCMS (AnQiCMS) 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 front-end display size to ensure the aesthetic beauty and loading efficiency of the website, which is a concern for many operators.

Why do you need to regenerate thumbnails?

The thumbnail plays a crucial role in website operations.They are not only the first impression that attracts users to click, but also the key factors that affect the page loading speed and the 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 can slow down loading speed and affect SEO; too small images may be blurry and harm the user experience.By regenerating thumbnails with appropriate frontend display sizes, we can effectively improve the loading efficiency and image quality of the website, and ensure consistent and high-quality visual experiences on various devices.The Anqi CMS has a flexible content model and multi-template support, allowing content to be displayed in various forms. Images, as an important part of the content, also need to keep up with the adaptability of size.

Anqi CMS thumbnail processing mechanism

The AnQi CMS is built-in with a complete image processing mechanism, aiming to help users efficiently manage the image resources on the website.In the "Content Settings", you can find options such as "Thumbnail Processing Method" and "Thumbnail Size", among others, which determine how the system automatically generates and processes image thumbnails.

Currently, Anqi CMS provides three thumbnail processing methods:

  • Scale proportionally to the longest side:This method will display all sides of the image completely, and according to the actual ratio of the image, fix the width or height of one side, and scale the other side proportionally.
  • Pad to the longest edge:This method fixes the width and height of the image, displaying it centered. If the image is not enough to fill the specified size, the extra part will be filled with white.
  • Trim to the shortest edge:This method will crop the image to center, showing the shortest edge completely, and the longest edge will be cropped to match the length of the shortest edge.

In addition, you can also set a 'default thumbnail', which the system will automatically use when no thumbnail is specified for the content.These fine settings enable Anqi CMS to have a high degree of flexibility in image management.

Preparation for adjusting the thumbnail size.

Before generating in bulk, it is first necessary to specify the new frontend display size and configure it in the Anqi CMS backend.

  1. Enter the content settings:Log in to the AnQi CMS backend, find 'Global Settings' in the left navigation bar, and then click 'Content Settings'.
  2. Adjust thumbnail size: In the 'Content Settings' page, find the 'Thumbnail Size' item. Enter the new width and height according to your frontend design requirements, for example300x200Indicates width 300 pixels, height 200 pixels. If your thumbnail requirements only need a fixed width or height, the other side will be scaled proportionally, and you can decide based on the specific image tag used in the frontend template.
  3. Select thumbnail processing method (optional):If you have new requirements for the cropping or scaling of thumbnails, you can select it in the 'Thumbnail Processing Method' to ensure that the image appears in **effect.**

After making these adjustments, Anqi CMS has known the size and processing rules you want for the new thumbnail you want to generate.

Regenerate the thumbnails of all content in bulk.

After configuring the new size, 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 field named "batch regenerate thumbnailsThe button. Click this button, and the system will start to batch generate thumbnails for all the images uploaded to your website according to the latest thumbnail size and processing method you have just set.

This process is automated, 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 practical.

Cautionary notes and **practice

When performing batch re-generation of thumbnails, there are some important items to note to ensure the process goes smoothly and achieves the expected results:

  1. 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" function of Anqin CMS.Although regenerating thumbnails usually does not affect the original image, an additional backup always provides extra protection.
  2. Clear the front-end cache:After regenerating the thumbnail, to ensure that visitors can immediately see the new size image, you may need to clear the cache on the website's front end (including browser cache and CDN cache if your website uses CDN services).
  3. Check the front-end template:If you have only changed the thumbnail size, but the image tag in the front-end template (such asitem.Thumb/category.LogoThe usage of （ etc. remains unchanged, and new thumbnails are usually displayed automatically.But if your front-end display logic needs to adjust according to the new size (for example, CSS styles, image container size), you may need to check and update your template files to ensure that the image can perfectly adapt to the new layout.
  4. Performance consideration: For websites with a large number of images, batch re-generating thumbnails may be a time-consuming and resource-intensive process.Suggest choosing a time when website traffic is low (such as late at night or early in the morning) to perform this operation, in order to minimize the impact on user access experience as much as possible.
  5. does not affect the original image:Batch regenerate thumbnails will only generate new thumbnail files based on the new settings, and will not cause any changes to the original image files already uploaded to your website. You can operate with confidence.

By following these steps and注意事项, you can easily and efficiently regenerate all content thumbnails in Anqi CMS in bulk, ensuring that your website is always presented to users in **status.**

Frequently Asked Questions (FAQ)

Q1: Will regenerating thumbnails affect my original image?A1: Will not. The batch re-generation of thumbnails in AnQi CMS will only regenerate 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 displayed image size on the website has not changed, why is that?A2: The most common reason for encountering this situation is a caching issue.Please try to clear your browser cache, and if your website uses a CDN service, you also need to manually refresh the CDN cache.Additionally, please confirm that the code you are using in your frontend template to reference the thumbnail is correct, for example, whether you have directly specified the old size, or if the CSS style is still limiting the display size of the image.Make sure the template is dynamically reading the thumbnail path and size generated by AnQi CMS.

Q3: If I do not want to use the thumbnail function of Anqi CMS and want to upload images of different sizes manually, is that possible?A3: Yes, you can choose not to use the automatic thumbnail generation function of AnQi CMS.When editing content, directly upload the pre-processed images of different sizes you have prepared.But to avoid chaos in image management and repetitive manual work, we usually suggest that you fully utilize the automated thumbnail feature of Anqi CMS, which can better unify the management of images and improve efficiency.If your front-end has very special and strict pixel requirements for image size, you can also upload the original large image and then use CSS on the front-end to crop or scale for display.