In website operation, images are a key element to attract users and enrich content. However, large image files often slow down page loading speed, affecting user experience and search engine optimization. Anqi CMS is well aware of this and therefore provides an extremely convenient and efficient solution.thumb
Core Function Analysis:thumbThe working principle of the filter
This namedthumbThe filter, is a powerful tool built into the Safe CMS template engine.Its core function is to automatically generate and return a thumbnail URL of the image corresponding to the original image URL you obtain on the website by simply applying this filter.
For example, if your original image URL ishttps://yourdomain.com/uploads/2023/full_size_image.jpgThroughthumbAfter the filter processing, you might get a similarhttps://yourdomain.com/uploads/2023/full_size_image_thumb.jpgThumbnail URL.The advantages of doing this are obvious: it avoids bandwidth waste and loading delay caused by directly loading the original large image, ensuring that the image can be presented quickly on various devices and network environments, greatly enhancing the smoothness of users browsing the website.
Whether it is the cover image of the article (usually through)archiveDetailorarchiveListthe tags you getitem.Thumboritem.LogoField), category thumbnail (throughcategoryDetailThe one obtainedcategory.ThumbField), or other images uploaded via the backend, as long as the original URL of the image can be obtainedthumbFilters can be used everywhere. When used in templates, its syntax is concise and clear, usually written as{{ original_image_url|thumb }}.
The driving force behind the scene: thumbnail generation strategy and configuration
Of course,thumbThe intelligence of the filter does not come from nowhere, it has a set of precise image processing strategies behind it, which can be flexibly configured in the "Content Settings" of the Anqi CMS backend.
In the "Content Settings", you can find the option "Thumbnail Processing Method", the system provides three mainstream scaling modes:
- Scale proportionally by the longest side
- Scale proportionally by the longest side with paddingIf you need fixed-size thumbnails without cropping the image content, this method is very suitable.It will resize the image proportionally and center it, filling the insufficient part with white (or any other preset color) to obtain a thumbnail of a fixed size.
- [en] : Crop to the shortest edge.When you need a strictly fixed-size thumbnail and do not mind cropping off some edge content, you can choose this method.The image will be cropped to center, ensuring the shortest edge reaches the specified size.
In addition to the method, you can also precisely set the 'thumbnail size'.Properly setting the size can further optimize the image volume, accelerating page rendering.For example, if your list page only requires thumbnails with a width of 200 pixels, the system will generate and provide images of this size based on your configuration, rather than directly cropping or scaling the original large image.
Moreover, the system also supports setting a "default thumbnail" to ensure that a placeholder image is displayed when certain content does not have an uploaded image, maintaining the consistency of the website layout.When your image processing strategy (such as size or processing method) changes, you can use the 'Batch regenerate thumbnails' feature to update all site thumbnails with one click, saving the trouble of a lot of manual operations.thumbThe filter offers great flexibility and efficiency, allowing the website to ensure visual effects while also considering performance.The AutoCMS even provides features such as 'Whether to enable Webp image format' and 'Whether to automatically compress large images', further enhancing the image optimization capabilities.
Practice: Efficiently Use in TemplatesthumbFilter
In actual template development, usingthumbThe filter is very intuitive. Suppose you are looping through a website's Banner image list and want them to be displayed in thumbnail form, you can write the template code like this:
{% bannerList banners %}
{% for item in banners %}
<a href="{{item.Link}}" target="_blank">
<img src="{{ item.Logo|thumb }}" alt="{{item.Alt}}" />
<h5>{{item.Title}}</h5>
</a>
{% endfor %}
{% endbannerList %}
In this example,item.LogoObtained is the original URL of the Banner image. By appending|thumb，The system will automatically retrieve or generate the thumbnail URL of the image while rendering the page and assign it to<img>TagssrcProperties. In this way, when users access the page, the browser will load smaller and faster thumbnails instead of the original large image.
This example demonstratesthumbHow does the filter seamlessly integrate into the template.Whether it is an article list, product display, or any scenario that requires optimizing image loading speed, you can apply it in a similar way.It greatly simplifies the image management and optimization process, allowing content creators to focus on the content itself and not worry about image size and format issues.
Concluding remarks
thumbThe filter is a powerful and practical feature provided by Safe CMS in content operation and website performance optimization.It simplifies complex image processing into a simple template tag, allowing us to focus on content creation while ensuring the website is always presented in **status to visitors, effectively enhancing user experience and the professionalism of the website.Through the flexible configuration options on the backend, we can adjust the thumbnail generation rules according to the specific needs of the website, achieving refined image management, making the website content beautiful while also having excellent loading performance.
Common Questions
Q1:thumbWhere is the thumbnail generated by the filter specifically stored? Will they occupy a large amount of server space?The CMS usually stores the generated thumbnails in a subdirectory of the original image path, or adds a specific identifier to the filename (for example,_thumb），to distinguish the original image.These thumbnails are generated on demand according to the size and processing method configured on the backend.Since they are optimized small-sized images, they usually will not significantly increase the server storage space, and can significantly reduce bandwidth consumption, which is a positive optimization for the overall resource usage of the website.
**Q2: If I modify the "thumbnail size" setting on the backend, the image on the frontend page will immediately update to the new size