In modern website operation, images are not only an important part of the content, but also a key factor affecting user experience and website performance.An appropriately handled image system can significantly improve the loading speed, visual appeal, and search engine optimization effects of a website.AnQiCMS deeply understands the importance of image optimization and therefore provides various flexible thumbnail processing methods to ensure that images can achieve **effect** in various display scenarios.
AnQiCMS handles image thumbnails with three core strategies, each suitable for different display needs, helping the website present content more professionally and uniformly in English.
Firstly, is“Scale proportionally to the longest edge”.This processing method can retain the original content and proportion of the image to the greatest extent.The system will resize the longest side of the image proportionally to fit the target size, and the other side will adjust automatically according to the predefined thumbnail size.The benefit of doing this is that the image will not be cropped and there will be no blank space, ensuring the complete presentation of the image content, especially suitable for those who need to display the entire scene without deforming the image.
Secondly, is“Fill to the longest edge”.When you want all thumbnails on the website to have a strictly uniform size, for example, when you need uniform square images in a product list or card layout, this option is very useful.AnQiCMS will first scale the image proportionally to fit the longest side within the target size, and then center the image.The part of the image that is not sufficient in target size will be automatically filled with pure white (or other preset background color).Thus, no matter whether the original image is horizontal or vertical, the final thumbnail will maintain a consistent external outline, making the page layout more neat and beautiful.
Furthermore, is“Trim to shortest edge”.For those scenarios where the image content is rich but needs to highlight the core elements within a limited thumbnail space while maintaining a fixed size, the cropping feature is an ideal choice.AnQiCMS will resize the shortest side of the image to the target size while center-cropping the longest side, using the image center as the reference.This means that a part of the content at the edges of the image may be removed, but it can ensure that the visual focus of the thumbnail is concentrated and strictly conforms to the set size, which is helpful for quickly conveying key information at small sizes.
In addition to these core processing methods, AnQiCMS also provides a wealth of auxiliary functions to achieve more comprehensive image optimization. You can flexibly set it in the background according to the design requirements of the website's frontend.Thumbnail sizeEnglish translation: Precisely control the width and height of the image.It is worth mentioning that even if you do not manually upload a thumbnail for the document, AnQiCMS also has the ability to intelligently recognize and automatically extract the first image in the document content as a thumbnail.Default ThumbnailEnsure the website maintains visual integrity under all circumstances. If the website's visual strategy changes, adjustments to thumbnail size or handling may be needed, AnQiCMS provides theBatch regenerate thumbnailsThe function can complete all image updates with one click, greatly reducing the manual processing workload.
In terms of deeper image optimization, AnQiCMS allows you to chooseWhether to download remote imagesAccess the local server, which helps to unify the management of image resources and improve access speed. To further optimize image loading performance and storage space, the system also supports enablingWebP image formatThe uploaded JPG, PNG images can be automatically converted to this modern, higher compression format. At the same time,Automatic compression of large imagesThe function can scale down images that exceed the specified width to a proportional size, ensuring that high-resolution images can also be loaded quickly without sacrificing too much visual quality.
In terms of application at the template level, AnQiCMS also provides an extremely convenient calling method. Whether it is an article list, product details, category page, or a single page, as long as the relevant content contains a thumbnail, you usually can through{{ item.Thumb }}Such variables are directly called in the template. For example, when usingarchiveListtag loop to display articles, eachitemobject will contain aThumbField, pointing to the thumbnail of the article. In addition, the system also provides a powerfulthumbFilter, it can directly apply the thumbnail processing rules set in the background to any image URL, for example,{{ image_url|thumb }}This provides great flexibility and convenience for template developers.
Common Questions (FAQ)
Q: If I change the thumbnail processing method or size in the background, will the already uploaded images be updated immediately?A: Will not be updated immediately.AnQiCMS's thumbnail settings have been changed, and you need to manually click the 'Batch regenerate thumbnails' feature in the background.The system will regenerate thumbnails for all uploaded images based on the latest settings after receiving the instruction, ensuring that the website front-end displays images that comply with the new rules.
Q: Why does the thumbnail have white edges after I choose 'Pad to longest edge'? Can I change the fill color?A: “Fill to the longest edge” approach, its design purpose is to maintain the fixed size and centered display of the image. When the original image ratio does not match the target size, the system will default to using white to fill the insufficient area.Regarding whether it is possible to customize the fill color, the document does not explicitly mention that there is a direct option to modify the fill color in the background.If you have any customization needs in this aspect, you may need to override the CSS styles at the template level, or consider pre-processing the background color before uploading the image.
Q: Does AnQiCMS support setting different thumbnail processing rules and sizes for different types of content (such as articles, products)?A: In the current design of AnQiCMS, the handling method and size setting of thumbnails are global, that is, they are configured uniformly in "Content Settings". This means that the thumbnails of all content types (such as articles, products, single pages, etc.) are