How to configure AnQiCMS to automatically generate thumbnails for uploaded images?

In website operation, high-quality images can significantly improve user experience and content attractiveness.However, the original large image not only occupies valuable server space, but also slows down the website loading speed, affecting SEO performance.AnQiCMS as an efficient content management system has fully considered this point, providing users with a flexible and powerful automatic thumbnail generation function for images.By configuring it reasonably, you can enable the system to intelligently handle uploaded images, automatically generate thumbnails that meet the needs of your website, and achieve a balance in the visual presentation and performance optimization of the website content.

This article will provide a detailed introduction on how to configure the automatic thumbnail generation for images in AnQiCMS, and offer some practical tips to help you fully utilize this feature.

Set up easily: Let AnQiCMS intelligently process your images

The AnQiCMS automatic thumbnail feature is located in the "Content Settings" backend. Just a few steps, and you can let the system automatically complete the繁琐繁琐的图片处理 work.

1. Enter the content settings:First, log in to your AnQiCMS backend management interface.Find "Background Settings" in the left navigation bar, click to expand and select "Content Settings".Here is a gathering of all important configuration items related to the website content, including image processing strategies.

2. Understand key options:On the "Content Settings" page, you will see a series of options related to image processing. These options collectively determine how AnQiCMS generates, optimizes, and manages your image resources.

   • Whether to automatically compress large imagesThis option is the core switch to control whether AnQiCMS compresses the size of uploaded images.Enable this feature to effectively prevent users from uploading large images, thereby saving server storage space and improving page loading speed.If your website does not need to display original-size oversized images, it is strongly recommended to enable this feature.

   • Automatically compress to a specified widthWhen you enable the 'Auto-compress large images' option, this option will appear accordingly, used to set the maximum width of the image after compression.The default width is usually 800 pixels. You can adjust this value according to the actual design and image display needs of the website.Please note that compressing the large image will only judge and process it based on the width, and the height will be automatically adjusted in proportion.

   • Thumbnail Processing MethodAnQiCMS offers three flexible thumbnail generation methods to adapt to different visual effects and layout needs:

     • Scale proportionally to the longest side:This method maintains the original aspect ratio of the image, scales the image to the specified size, ensuring the image is displayed completely.The thumbnail width or height will be fixed to the set value, and the other side will adjust automatically in proportion.
     • Pad to the longest edge:If you want the thumbnail image to have a fixed size (such as square), and do not want to cut off any content, you can choose this method.The image will be centered, and the unused part will be filled with white.
     • Trim to the shortest edge:This method ensures that the thumbnail fills the entire specified size area, but may crop the edges of the image.The image will be cropped to center, with the shortest side fully displayed, and the longest side cropped to match the shortest side.

     You can choose the most suitable processing method based on the style and requirements of the website images.

   • Thumbnail sizeHere, you can set the specific dimensions for the system to generate thumbnails (for example:200x150This size will directly affect the thumbnail size displayed on the page.It is crucial to set an appropriate size, which can ensure the clarity of the image, effectively reduce the size of the image file, and accelerate the rendering speed of the page.

   • Whether to enable Webp image formatWebP is a modern image format developed by Google, which has smaller file sizes than JPEG and PNG formats at the same quality.After enabling this feature, AnQiCMS will automatically convert the JPG, PNG, and other images you upload to WebP format.This is very helpful for further optimizing website performance and storage space.Please note that this setting only takes effect for new images uploaded after it is turned on, and if old images need to be converted to WebP, you can use the "Webp conversion tool" provided by the system.

   • Default thumbnailThis option allows you to upload a default image as a backup for the thumbnail.When the document or content does not upload a dedicated thumbnail, the system will automatically display this default image to ensure the consistency and integrity of the website images, avoiding the appearance of blank or missing images.

   • batch regenerate thumbnailsThis is a very practical maintenance feature. If you adjust the thumbnail size or processing method mentioned above, but also want these changes to apply to the images uploaded earlier, you can use the 'Batch regenerate thumbnails' feature.Clicking will cause the system to process all images according to the new settings and generate new thumbnails, saving the trouble of manual processing.

How to call automatically generated thumbnails on a page?

AnQiCMS after completing the automatic image processing, will provide a very convenient way to call the thumbnail.In your template file, you can directly use specific tags to display these images.

For thumbnails uploaded in the background for "Add Document", "Document Category", or "Page Management", the system will store their addresses in the correspondingThumbin the field. For example, when looping to output the article list:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}"> {# 这里直接调用了缩略图 #}
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
        </a>
    {% endfor %}
{% endarchiveList %}

In addition, AnQiCMS provides a generalthumbThe filter, even if the image is not uploaded through the document or category thumbnail field, can generate and call a thumbnail through its original URL if it is an image hosted within the system. This is very useful when you need to dynamically handle any image link in the template:

<img src="{{ '/uploads/2023/example.jpg'|thumb }}" alt="一张图片">

By these simple yet powerful configuration and calling methods, AnQiCMS makes the management and optimization of website images easier than ever before.

Summary

The AnQiCMS automatic thumbnail generation feature is an indispensable tool for website content operation and performance optimization.It can not only help you automatically process images, save time and effort in manual operations, but also effectively improve the loading speed and user experience of the website.By flexibly configuring compression options, thumbnail size, and processing methods, you can create visually appealing and efficient content that meets the characteristics and needs of the website, laying a solid foundation for the success of the website.

Frequently Asked Questions (FAQ)

Q1: How did I not see the thumbnail effect of the image I uploaded, and it is still displaying the original image on the page?

A1:There may be several reasons for this situation. First, please check if you have enabled "Auto-compress large images" and set the "Thumbnail size" correctly in your "Content Settings".Secondly, if your image was uploaded before changing the settings, you may need to use the 'Batch regenerate thumbnails' feature to update the old images.Finally, do not forget to call the thumbnail field correctly in your website template (for example, `{{item