How does Anqi CMS resize and process article thumbnails to adapt to different display needs?

In website content operation, images, especially thumbnails, play a crucial role.They are not only the first line of defense to attract user clicks, but also the key to adapt to different devices and layouts.An efficient website content management system should provide flexible thumbnail processing mechanisms.AnQiCMS (AnQiCMS) considers this aspect thoroughly, providing a series of powerful functions to help us easily manage and optimize article thumbnails to meet various display needs.

Source of thumbnails and intelligent generation

In the Auto CMS, the acquisition of article thumbnails is very flexible.In most cases, we can manually upload or select an image from an existing image library when publishing an article as a thumbnail.

  • Automatically extracted:If the document content contains images, the system will automatically extract the first image within the document and use it as the thumbnail for the article.
  • Default thumbnail:In addition, 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 in the content, the system will automatically use this default thumbnail for display, ensuring the beauty and consistency of the website pages.

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

Core Function: Background configuration and intelligent processing

The thumbnail processing capability of AnQi CMS is mainly concentrated in the 'Content Settings'.Enter the backend, find the 'Content Settings' option under 'Global Settings', and you will see all the configurations related to images and thumbnails.

  1. Image automatic 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 pursue the ultimate image loading performance, Anqi CMS also supports converting uploadedjpg/pngEnglish picture automatically convertedWebpFormat.WebpFormat can significantly reduce file size while maintaining image quality, especially effective for large images.Enable this feature and all new uploaded images will be automatically converted.WebpFormat.

  3. Thumbnail processing method: adapts to various display scenariosThis is the core of the thumbnail processing of AnQi CMS. To meet different design requirements, the system provides three refined processing methods:

    • Proportional scaling by the longest side:

      • Principle:This method will display the entire content of the image without any cropping.The system will scale the image based on the longest side, adjusting it to fit one side of the specified size while the other side is proportionally scaled.
      • Application scenario:Suitable for those who need to fully display image content and do not have high accuracy requirements for the final size.For example, some news illustrations, as long as the width or height is fixed, a slight float on the other side is also acceptable.

    • Fill to the longest side:

      • Principle:If you need to strictly fix the width and height of the thumbnail without cropping the image content, this method is very useful.The system will center the image display 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 the full content of the image.

    • Crop to the shortest side:

      • Principle:This method aims to ensure that thumbnails can perfectly fill the specified area, even if it means sacrificing part of the image's edge content.The system will center-crop based on the shortest edge of the image, ensuring that the thumbnail size matches the set value.
      • Application scenario:Applicable to scenes that require cover effects, card layouts, and full coverage of the entire area with images, where the main content of the images is centered. For example, article covers, carousel images, etc.

  4. Custom thumbnail size: Precisely control the display effectAfter selecting the above processing method, we still need to set the specific "thumbnail size" (width and height).Here you can accurately set the thumbnail pixel size according to the design requirements of the frontend template.Reasonable size settings can not only optimize the visual effect but also effectively reduce the size of the image, thereby enhancing 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一键reprocess all the 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 of each includes a field for the thumbnail,item.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 generate thumbnails for non-article thumbnail fields (such as images stored in a custom field), you can also take advantage of the powerful filtering features of Aigle 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

The AnQi CMS provides a full-link solution for processing article thumbnails, from image source to backend intelligent processing, and to frontend flexible invocation. Through intuitive backend configuration, we can easily achieve automatic image compression,WebpFormat conversion, and choose the appropriate cropping and processing methods according to different display requirements.These features collectively ensure that the website presents clear, beautiful, and fast-loading image effects on different devices and layouts, making them a powerful assistant for content operators to enhance user experience and website performance.

Common Questions (FAQ)

1. Why doesn't the image look changed on the front end after I modified the thumbnail size and processing method in the background?This is usually caused by browser cache or system cache.Suggest that you clear the browser cache after modifying the configuration and go to the "Update Cache" feature in the "Anqi CMS" backend to manually clear the system cache once.{{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?The content is affected by the settings of 'Whether to automatically compress large images' and 'Whether to start 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.item.ThumbThe settings will take effect without directly affecting the display style of images in the article content.

3. I uploaded an image with an unconventional aspect ratio (e.g., elongated), which thumbnail processing method should be chosen for the best effect?This depends on your specific display requirements:

  • Scale proportionally by the longest side：If you wish for the image content to be complete and unaltered, but are willing to accept thumbnail sizes that are not fixed in width or height, this is the **choice.
  • Scale proportionally by the longest side with paddingIf you need to fix the aspect ratio of the thumbnail and do not want to crop the content, but can accept that there are blank areas filled around the image, select this option.
  • [en] : Crop to the shortest edge.