How to control the generation method and size of image thumbnails in AnQiCMS to optimize display effects?

AnQiCMS provides a powerful and flexible image processing mechanism in website content management, among which the generation method and size control of image thumbnails are key links to optimize the display effect of the website, enhance user experience, and accelerate page loading speed.Through the various built-in functions of the system, we can easily manage thumbnails in fine detail, ensuring that website images are presented in a **state in different scenarios.

Image Thumbnail: An Important Aspect of Website Optimization

The images on the website are not just visual elements, but also carriers of content communication and user experience.A clear, appropriately sized thumbnail that loads quickly, effectively attracts user attention, improves page click-through rates, and is beneficial for search engine optimization (SEO).AnQiCMS has fully considered these needs and provided a complete thumbnail processing solution.

AnQiCMS Core Mechanism of Image Processing

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

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

Fine-tuning control: Detailed explanation of backend 'Content Settings'

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

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

   • Scale proportionally to the longest side:This method maintains the original aspect ratio of the image, ensuring that the image content is displayed completely, while also scaling the longest side to the specified size.The other side adjusts automatically in proportion. Suitable for scenarios that require the full display of the main image subject and do not mind the slightly varying size of the thumbnail.
   • Pad to the longest edge:This method will fix the width and height of the thumbnail to the specified size, and fill the insufficient part with white (or the specified color) to center the image after proportional scaling.This is very useful for scenarios that require strict uniform thumbnail sizes (such as product list cards) and do not want to crop the image content.
   • Trim to the shortest edge:This method will crop the image to be centered, with the shortest side fully displayed, and the longest side will be cropped to match the length of the shortest side.This means that the edge content of the image may be cropped. Suitable for those who need strictly fixed dimensions and the main content of the image is concentrated in the middle.
   • Tips:Choose which processing method to use, based on the website's frontend design style and the specific image content.

2. Thumbnail size:The next processing method allows us to set the specific dimensions (width x height) of the thumbnail. For example, it can be set to300x200Pixel. Properly setting the size can significantly reduce the file size of images, and speed up page loading.It is recommended to determine one or several commonly used sizes based on the actual display requirements of the website and the front-end design.

3. Automatically compress the large image to a specified width:To further optimize performance, AnQiCMS allows you to enable the "Auto-compress Large Images" feature.Once enabled, the system will automatically compress images that are too large to the specified width, such as the default 800 pixels.This is very helpful in avoiding the situation where the page loads slowly due to users uploading large images, and it can also save server storage space.

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

5. Default thumbnail: If some content is not specified or a thumbnail is not generated, the system can use a preset 'default thumbnail' for display.This can effectively avoid blank or abnormal display on the page due to missing images, maintaining the consistency of the website's visual style.

6. Batch regenerate thumbnails:After you modify the thumbnail size or processing method, the images you have uploaded will not be automatically updated.AnQiCMS thoughtfully provides the 'Batch Regenerate Thumbnails' feature.Just click, and the system will reprocess all historical images according to the latest settings to ensure uniform display effects throughout the site.

Content editing: Specify a dedicated thumbnail for the content

In AnQiCMS's content publishing and management interface, for example, in "publish document", "document classification", and "page management", you can upload independent "document images" (i.e., thumbnails), "category 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 "About Us", "Contact Us" and other single-page sections, 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 image display

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

• LogowithThumbField:
  • {{item.Logo}}Cover image or original large image is usually called.
  • {{item.Thumb}}Thumbnail generated according to backend settings is called. These fields are inarchiveDetail(Document Details),categoryDetail(Category Details),pageDetailSingle page details(