AnQiCMS provides a powerful and flexible image processing mechanism in website content management, where the generation methods and size control of image thumbnails are crucial for optimizing website display effects, enhancing user experience, and accelerating page loading speed.Through the various built-in functions of the system, we can easily achieve fine management of thumbnails, ensuring that website images are presented in a **state** in different scenarios.

An image thumbnail: an important link in website optimization

The images on the website are not just visual elements, but also carriers of content delivery and user experience.Clear, moderately sized thumbnails that load quickly, effectively attract user attention, improve page click-through rate, and have a positive effect on search engine optimization (SEO).AnQiCMS fully considers these needs and provides a complete thumbnail processing solution.

The core mechanism of AnQiCMS image processing

AnQiCMS The intelligent image processing function is mainly reflected in the following aspects:

  1. Automatic extraction and generation:When you do not specify a thumbnail when publishing a document, but the article content includes images, the system will automatically extract the first image in the content as the thumbnail for the document.This design greatly simplifies the content publishing process.In addition, the system also supports automatically generating thumbnails of corresponding sizes when uploading images, based on preset rules.
  2. Background global settings:AnQiCMS provides centralized image processing configuration in the background, allowing us to uniformly manage the generation methods, size, and even enable WebP format of thumbnails, etc. These settings take effect on all site images, ensuring the consistency of image processing.
  3. Flexible invocation in the template:By using powerful template tags and filters, developers or users familiar with the template can flexibly call different forms of thumbnails on the website frontend page to meet various design needs.

Fine-grained control: Detailed explanation of 'Content Settings' on the backend

Enter the AnQiCMS admin panel, and under 'Global Settings' in the 'Content Settings', you can find all the configuration options related to image processing.This is the core area where we implement detailed thumbnail control.

  1. Thumbnail processing method:This is the key to the final presentation effect of the thumbnail. AnQiCMS provides three main thumbnail generation methods to meet different design requirements:

    • Scale proportionally by the longest edge:This method will maintain the original aspect ratio of the image, ensuring that the image content is displayed completely, while also resizing the longest side to the specified size.The other side adjusts automatically in proportion.Suitable for scenarios where a complete image subject needs to be displayed and there is no concern about the slight change in thumbnail size.
    • Pad by the longest edge:This method will make the thumbnail's width and height both fixed to the specified size, and after keeping the picture in proportion, fill the insufficient part with white (or the specified color) to center the picture display.This is very useful for scenarios that require strict uniform thumbnail size (such as product list cards) and do not want to crop the image content.
    • Crop by the shortest edge:This method will crop the image to be centered, with the shortest edge fully displayed, and the longest edge will be centered cropped to match the length of the shortest edge.This means that the content of the image edges may be cropped.Suitable for those who need strict fixed dimensions and the main content of the image is centered.
    • 温馨提示：Choose the processing method based on the website's frontend design style and the specific image content.

  2. Thumbnail size: Following the processing method, we can set the specific dimensions (width x height) of the thumbnail. For example, it can be set to300x200Pixel.Setting the size reasonably can significantly reduce the file size of the image, speeding up page loading.Suggest determining one or several commonly used sizes based on the actual display requirements of the website and the front-end design.

  3. Automatically compress large images to the specified width:To further optimize performance, AnQiCMS allows you to enable the 'Automatic Compression of Large Images' feature.Once enabled, the system will automatically compress any uploaded images that are too large to the specified width, such as the default 800 pixels.This is very helpful to avoid the situation where the page loads slowly due to users uploading large images, and it also saves server storage space.

  4. Enable WebP image format:WebP is a modern image format that, compared to traditional JPG, PNG formats, can provide smaller file sizes under the same quality.Enable this feature and new uploaded JPG, PNG images will be automatically converted to WebP format.For non-WebP image formats that have been uploaded, the system also provides a batch conversion tool to help you one-click optimize historical image resources.

  5. Default thumbnail:If some content is not specified or a thumbnail is not generated, the system can display a preset 'default thumbnail'.This can effectively avoid page blank or display anomalies caused by missing images, maintaining the visual consistency of the website.

  6. Batch regenerate thumbnails:When you modify the thumbnail size or processing method, the already uploaded images will not be automatically updated.AnQiCMS thoughtfully provides the "Batch Regenerate Thumbnails" feature.Just one click, and the system will reprocess all historical images according to the latest settings, ensuring a unified display effect for all images on the site.

Content editing: Specify a dedicated thumbnail for the content

In the content publishing and management interface of AnQiCMS, such as 'Publish Document', 'Document Classification', and 'Page Management', you can upload independent 'document images' (i.e., thumbnails), 'classification thumbnails', or 'single page thumbnails' for specific content.

  • Document Thumbnail:When publishing articles, products, and other documents, you can directly upload an image as a thumbnail. If no image is uploaded, the system will try to extract the first image from the document content.
  • Category Thumbnail:When managing document categories, you can upload a separate thumbnail for each category to display in the category list or navigation.
  • Single Page Thumbnail:For single-page pages like 'About Us' and 'Contact Us', you can also upload exclusive thumbnails.

These manually uploaded thumbnails are usually given priority over the images automatically extracted by the system, providing you with more flexible control.

Template call: Flexible display of images

In AnQiCMS template files, you can call image resources using the following tags and filters, and make use of the thumbnails generated by the system:

  • LogoWithThumbFields:
    • {{item.Logo}}[en] Usually used to call the cover image or original large image of the content.
    • {{item.Thumb}}[en] Used to call the thumbnail generated according to the backend settings. These fields inarchiveDetail(Document Details),categoryDetail[en] (category details),pageDetail[en] (single page details)