How to crop and process the thumbnail size of articles in AnQi CMS to adapt to different display requirements?

In website content operation, images, especially thumbnails, play a crucial role.They are not only the first line of defense in attracting user clicks, but also the key to adapting to different device and layout formats.A high-efficient website content management system should provide flexible thumbnail processing mechanisms.AnQiCMS (AnQiCMS) considers this aspect thoroughly, providing a series of powerful features to help us easily manage and optimize article thumbnails to meet various display requirements.

Source and intelligent generation of thumbnails

In AnQi CMS, the acquisition of article thumbnails is very flexible.In most cases, we can manually upload or select a picture from the existing image library when publishing an article.But if sometimes you forget to upload, or you want the system to automate the process, Anqi CMS can also provide help:

  • Automatic extraction:If the document content contains images, the system will automatically extract the first image in the document and use it as the thumbnail for the article.
  • Default thumbnail:Moreover, we can also set a "default thumbnail" in the background.When the article does not have a manually uploaded thumbnail and does not contain any images, the system will automatically use this default thumbnail for display, ensuring the beauty and consistency of the website pages.

These mechanisms greatly alleviate the burden on content publishers, ensuring that every article has an appropriate illustration.

Core Functionality: Backend Configuration and Intelligent Processing

The thumbnail processing capability of Anqi CMS is mainly concentrated in the "Content Settings".Go to the back end, find the 'Content Settings' option under 'Global Settings', and you will see all the configurations related to images and thumbnails.

  1. Automatic image compression: optimize loading speedTo improve website loading speed and save storage space, Anqi CMS provides the function of 'Whether to automatically compress large images'.If this option is enabled, the system will automatically compress images that are too large when uploading pictures.We can customize the target width of compression, the default is 800 pixels wide.This means that even if a high-definition large image is uploaded, the system can intelligently adjust it to a size suitable for web display without manual processing.

  2. Webp format conversion: further improve efficiencyIn order to achieve the ultimate image loading performance, Anqi CMS also supports uploadingjpg/pngConvert images automaticallyWebpformat.WebpThe format can significantly reduce the file size while maintaining the quality of the image, especially effective for large images.Enable this feature and all newly uploaded images will be automatically converted.If you want to convert historical images, the system also provides a 'batch regenerate thumbnails' tool, which can convert existing images with one clickWebpformat.

  3. Thumbnail processing method: adapts to various display scenariosThis is the core of Anqi CMS for handling thumbnails. The system provides three refined processing methods for different design requirements:

    • Scale proportionally by the longest side:

      • Principle:This method will display the entire content of the image without any cropping.The system will resize the image based on the longest edge and scale it to fit one side of the specified size, while the other side will be proportionally scaled.
      • Application scenario:Suited for those who need to fully display image content and have no precise requirements for the final size.For example, some news illustrations can be acceptable as long as the width or height is fixed, and the other side is slightly floating.

    • Padding to the longest edge:

      • Principle:If you need to strictly fix the width and height of the thumbnail without cutting the image content, this method is very useful.The system will center the image and fill the insufficient part with the preset color (usually white) to reach the specified fixed size.
      • Application scenario:Suitable for galleries, product lists, and other occasions that require uniform size and neat layout while also retaining all the content of the image.

    • Trimming to the shortest edge:

      • Principle:This method is designed to ensure that the thumbnail can perfectly fill the specified area, even if it means sacrificing part of the image's edge content.The system will crop the image based on the shortest edge for centering, making the thumbnail size match the set value.
      • Application scenario:Applicable for scenarios where images need to cover the entire area, with the main content centered. For example, article covers, carousel images, etc.

  4. Custom thumbnail size: Precisely control the display effectAfter selecting the above processing method, we need to set the specific 'thumbnail size' (width and height).'Here you can accurately set the pixel size of the thumbnail according to the design requirements of the front-end template.A reasonable size setting not only optimizes the visual effect but also effectively reduces the image size and improves the page loading speed.

  5. Batch regenerate thumbnails: Easily handle adjustmentsWhen the website design changes, or we adjust the thumbnail processing method and size settings, the old thumbnails may no longer be applicable.The 'Batch regenerate thumbnails' feature provided by Anqi CMS can quickly process all images on the website according to the latest configuration, saving the trouble of a lot of manual operations.

Flexible use in templates

After configuring the background settings, it is also very convenient to call the thumbnail in the front-end template. Whether it is an article, category, or single page, the data structure all contains the thumbnail field, such asitem.Thumb.

For example, show thumbnails in the article list:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}"> {# 调用处理后的缩略图 #}
            <h5>{{item.Title}}</h5>
        </a>
    </li>
    {% endfor %}
{% endarchiveList %}

If you need to process thumbnails for non-article thumbnail fields (such as images stored in a custom field), you can also take advantage of the powerful filter function of Anqi CMS.thumbThe filter can directly create thumbnails for any image URL, for example:

<img src="{{ item.CustomImageField|thumb }}" alt="自定义图片">

This provides great flexibility, no matter the source of the image, it can be optimized through the unified thumbnail processing logic of the system.

Summary

AnQi CMS in the processing of article thumbnails not only provides a full-link solution from image source to backend intelligent processing to flexible front-end call. Through intuitive backend configuration, we can easily achieve automatic image compression,WebpFormat conversion and select the appropriate cropping and processing methods according to different display requirements.These features ensure that the website presents clear, beautiful, and fast-loading images on different devices and layouts, and are a powerful assistant for content operators to improve user experience and website performance.

Frequently Asked Questions (FAQ)

1. Why did the thumbnail size and processing method change in the background, but the image on the front page still looks the same?This is usually due to browser cache or system cache.Please clear the browser cache after modifying the configuration and manually clear the system cache once in the “Update Cache” feature of the AnQi CMS backend.If the problem still exists, please check if you have called the template correctly in your template{{item.Thumb}}Or usedthumbFilter, ensure that the image is generated through AnQiCMS's image processing mechanism.

2. Will the AnQiCMS thumbnail processing function affect the large images in the article content?It is affected by the settings of 'whether to automatically compress large images' and 'whether to enable Webp image format'.When you upload an image to the content editor, if these options are enabled, the image will also be compressed or converted to Webp format according to the rules you set.However, the 'processing method' (proportional scaling, padding, cropping) and 'thumbnail size' are specifically for the thumbnail field (such asitem.ThumbIt takes effect without directly affecting the display style of images in the article content.

3. I uploaded a non-standard ratio image (such as long and narrow), what is the best thumbnail processing method?It depends on your specific display requirements:

  • Scale proportionally to the longest sideIf you want the image content to be complete and intact, but can accept the thumbnail size to be not completely fixed in width or height, this is the **choice.
  • Fill the longest side: If you need a fixed thumbnail aspect ratio and do not want to crop the content, but can accept blank areas around the image, then select this option.
  • Trim according to the shortest edgeIf you want the thumbnail to perfectly fill the specified area, even if it cuts off part of the long strip of the picture's edge content, and the middle part can still express the main content of the picture after trimming, then choose this option.Suggest to experiment based on the actual image content and front-end design to find the most suitable balance point.