This article will introduce how to configure automatic thumbnail generation in AnQiCMS, and provide some practical tips to help you make full use of this feature.
Easily configure: Let AnQiCMS intelligently handle your images
AnQiCMS' image auto thumbnail feature is concentrated in the 'Content Settings' section of the backend. Just a few steps, and you can let the system automatically complete the tedious image processing work.
Go to content settings:First, log in to your AnQiCMS backend management interface.Find "Backend Settings" in the left navigation bar, click to expand, and then select "Content Settings".Here aggregates all the important configuration items related to the website content, including image processing strategies.
Understand key options:On the "Content Settings" page, you will see a series of options related to image processing. These options together 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 can effectively avoid users uploading large images, thereby saving server storage space and improving page loading speed.If your website does not need to display oversized images in original size, it is strongly recommended to enable this feature.
Compress automatically to specified widthWhen you enable 'Whether to automatically compress large images', this option will appear accordingly, used to set the maximum width of the image after compression.The default width of the system is usually 800 pixels.You can adjust this value according to the actual design and image display requirements of the website.Please note that compressing large images will only be judged and processed based on the image width, and the height will be automatically adjusted in proportion.
Thumbnail processing methodAnQiCMS provides three flexible thumbnail generation methods to meet different visual effects and layout requirements: English
- Scale proportionally by the longest edge:This method will maintain the original aspect ratio of the image, resize the image to the specified size, ensuring that the image is displayed completely.The width or height of the thumbnail will be fixed to the set value, and the other side will be automatically adjusted in proportion.
- Pad by the longest edge:If you want the thumbnail image to have a fixed size (such as square), but do not want to crop any content, you can choose this method.The image will be centered, and the insufficient part will be filled with white.
- Crop by the shortest edge:This method ensures that the thumbnail fills the entire specified size area, but may crop off part of the image edges.The image will be cropped to be centered, with the shortest side fully displayed, and the longest side will be cropped to match the length of the shortest side.
You can choose the most suitable processing method according to the image display style and requirements of the website.
Thumbnail sizeHere, you can set the specific size of the thumbnails generated by the system (for example:
200x150）。This 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 and effectively reduce the file size of the image, thereby speeding up 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 with the same quality.Turn on this feature, AnQiCMS will automatically convert the JPG, PNG and other images you upload to WebP format when processing.This is very helpful for further optimizing website performance and storage space.Please note that this setting only affects new images uploaded after it is turned on. If you want to convert old images 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 call this default image for display to ensure the consistency and integrity of the website image display, and to avoid the occurrence of blank or missing images.
Batch regenerate thumbnailsThis is a very practical maintenance function.If you have adjusted the thumbnail size or processing method above but want these changes to also apply to the images already uploaded, you can use the 'Batch Regenerate Thumbnails' feature.Clicking will cause the system to reprocess all images according to the new settings and generate new thumbnails, saving the trouble of manual processing.
实际应用：如何在页面中调用自动生成的缩略图？
AnQiCMS after completing the image auto-processing, will provide thumbnail calls in a very convenient way.In your template file, you can directly use specific tags to display these images.
For thumbnails uploaded in the background "Add Document", "Document Category", or "Page Management", the system will store their address in the correspondingThumbField in. For example, when outputting the article list in a loop:
{% 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 also provides a generalthumbFilter, even if the image is not uploaded through the document or category thumbnail field, as long as it is an image hosted within the system, it can be generated and called using its original URL. This is very useful when you need to dynamically handle any image links in templates:
<img src="{{ '/uploads/2023/example.jpg'|thumb }}" alt="一张图片">
Through these simple and powerful configuration and call methods, AnQiCMS makes the image management and optimization of the website unprecedentedly easy.
Summary
The automatic thumbnail generation feature of AnQiCMS is an indispensable tool for website content operation and performance optimization.It can not only help you automatically process images, saving time and effort of manual operation, but also effectively improve the loading speed and user experience of the website.Through flexible configuration of compression options, thumbnail size, and processing methods, you can create visually appealing and efficient content that suits the characteristics and needs of your website, laying a solid foundation for its success.
Common Questions (FAQ)
Q1: How do I not see the thumbnail effect of the image I uploaded, and the page is still displaying the original image?
A1:This situation may have several reasons.Firstly, please check if you have enabled 'Whether to automatically compress large images' and correctly set the 'Thumbnail size' in 'Content Settings'.其次，if your images were uploaded before changing the settings, you may need to use the "batch regenerate thumbnails" feature to update the old images.