In AnQiCMS, the unified display effect of images is crucial for the overall aesthetics and user experience of the website, especially for thumbnails.Whether it is an article list, product display, or category page, maintaining consistent size and style of thumbnails can make the website look more professional and easier to navigate.AnQiCMS provides flexible configuration options, allowing us to easily achieve this goal.

定位缩略图设置：内容设置是关键

To start configuring thumbnails, we need to log in to the AnQiCMS backend management interface.Find "System Settings" in the left navigation bar, then click to enter the "Content Settings" page.Here is a collection of all image processing options related to the website content, including the thumbnail processing methods we are concerned about.

核心配置：选择最适合你的缩略图处理方式

In the "Content Settings" page, you will see the item "Thumbnail Processing Method". AnQiCMS provides three main thumbnail processing methods, each with its unique application scenarios and visual effects:

  1. Scale proportionally by the longest sideThis method will resize the image based on the set thumbnail size.The longest side(whether width or height) to the specified size, whilemaintaining the original aspect ratio of the imageAnother side is automatically scaled proportionally.

    • Visual Effects：The image content will be displayed in full without any cropping.If the aspect ratio of the original image and the target thumbnail size is not consistent, the thumbnail may leave blank areas on the shorter side to fit the container.
    • Applicable scenariosWhen you want to ensure that all content of the image is displayed completely without any cropping loss, this is the ideal choice.For example, in a photo gallery, it is better to have white space around thumbnails than to crop off important parts.

  2. Scale proportionally by the longest side with paddingIf you have strict requirements for thefinal display size.and hope that the image content is always complete and centered, then 'pad to the longest side' is a good choice.The system will first scale the image proportionally by its longest edge to make it completely fit the target size, then fill the blank area around the image with a preset color (usually white) to ensure the final thumbnail reaches the exact size set.

    • Visual Effects：All thumbnails will be strictly maintained at the size you set (e.g., 200x200 pixels), with the image content centered. Any insufficient edge parts will be filled.
    • Applicable scenarios：Suitable for scenarios requiring highly unified layouts, such as product list pages on e-commerce websites, where all product images are required to be displayed as perfect squares. Even if the original image is not square, it can maintain visual consistency through padding.

  3. [en] : Crop to the shortest edge.This method aims to make the thumbnailperfectly fillthe size you set, andno blank edges will appearThe system will resize the image based on the shortest edge to the target size, then crop from the center area of the image to ensure that the thumbnail completely covers the set size.

    • Visual EffectsAll thumbnails will strictly comply with the set aspect ratio and size, and the image content will be cropped to ensure no blank areas. This means that the edges of the original image may be cut off.
    • Applicable scenariosWhen you are most concerned about the visual filling and compactness of the thumbnail size and can accept part of the image edges being cropped.For example, in a news list or blog recommendation, a unified rectangular thumbnail is more visually striking than one with blank spaces.

辅助配置：尺寸与默认图

Select the appropriate handling method and then specify the specific "thumbnail size".Here you can set the width and height of the thumbnail, for example, set it to "200x150" pixels.This size is the basis for generating thumbnail images by the system.Reasonable size settings can not only meet the design requirements but also effectively reduce the image size and improve the page loading speed.

Moreover, the setting of 'Default Thumbnail' is also very useful.If the document does not upload a dedicated thumbnail at the time of publication, AnQiCMS will automatically use the default image set here as a substitute, ensuring that all content has a visual placeholder and avoiding the embarrassment of missing images.

In the "Content Settings", there are options such as "Whether to automatically compress large images" and "Automatically compress to a specified width".These features can further optimize the image loading speed, it is recommended to consider them together.For example, enabling automatic compression of large images and setting a reasonable width (such as 800 pixels) can significantly reduce the file size of the image without affecting the visual quality.

统一效果：批量重新生成缩略图

When you modify the thumbnail processing method or size, the old images already uploaded will not be updated immediately according to the new rules.To make these old images also apply the new settings, you need to click the "Batch regenerate thumbnails" button.This is a very practical feature, it will traverse all the uploaded images on your website and regenerate their thumbnail versions according to the latest thumbnail settings.After completing this operation, your website's frontend will display a unified thumbnail effect.The newly uploaded image will automatically follow the latest configuration.

前端调用：如何在模板中展示缩略图

In AnQiCMS templates, calling thumbnails is very flexible. For example, you can use it in article lists or detail pages.{{item.Thumb}}to directly get the thumbnail address, or through{{item.Logo}}Get the large image or main image. If you want to create thumbnails for any image URL in the template, you can also use{{image_url|thumb}}Filter. These tags and filters combined with the backend settings ensure the consistency and optimization of the front-end images.

Through these steps, you can finely configure the thumbnail processing method in AnQiCMS. Whether you choose to display the entire image, perfectly fill, or center the blank, it can ensure that the website images have a unified, beautiful, and efficient display effect on the front end.

Common Questions (FAQ)

1. If I change the thumbnail settings, will the old image be updated automatically?Will not update automatically.You need to go to the "System Settings" -> "Content Settings" page, find the "Batch Regenerate Thumbnails" feature and click to execute.So, the system will regenerate all thumbnails of the uploaded images based on your latest configuration.

2. Can I use different thumbnail sizes on different pages (such as article lists and product details)?AnQiCMS backend's 'Content Settings' 'Thumbnail Size' is a global setting that applies to all thumbnails generated through the system.If you need to display thumbnails of different sizes on specific pages, consider adjusting the image display size through CSS in the frontend template, or using an image cropping service (if AnQiCMS provides one), or preparing different size images in advance for use by different templates.For specific scenarios, you can also customize fields for content models in the background and upload images of different sizes.

3. Besides thumbnails, what other image optimization features does AnQiCMS provide in English?Yes, AnQiCMS also provides multiple image optimization features, all of which can be configured in "Content Settings". For example:

  • Whether to download remote images：You can choose to download external link images to local, convenient for unified management and acceleration.
  • whether to enable Webp image format：After enabled, uploaded JPG, PNG images will be automatically converted to a smaller WebP format, reducing storage space and accelerating loading speed.
  • whether to automatically compress large images：Automatically compresses large images uploaded and allows setting the maximum width after compression, further optimizing website performance.