How to use the `thumb` filter to load smaller thumbnail sizes on mobile devices?

In today's mobile-first era, website loading speed is crucial for user experience and search engine rankings.Images are an important part of web content, and their size directly affects page loading speed.Especially on mobile devices, smaller image sizes mean faster loading times, less data consumption, and thus a better user experience.thumbFilter, helps us easily load smaller thumbnail images on mobile devices.

AnQi CMS' intelligent thumbnail mechanism

A safe CMS understands the importance of image optimization, and its background is built-in with powerful image processing functions.In the "Global Settings

You can flexibly set the 'thumbnail processing method' and 'thumbnail size' according to your actual needs.For example, you can choose to "crop by the shortest side" or "resize by the longest side proportionally", and set an appropriate default width and height.These settings will determine the strategy and final size used by the system when generating thumbnails.The system will automatically generate the corresponding thumbnail versions when you upload images, greatly reducing the burden of manual image processing.

UnderstandingthumbFilter

thumbThe filter is a convenient tool provided by the Anqi CMS template engine, which is used to obtain the thumbnail URL corresponding to the specified image address based on the thumbnail rules configured in the "Content Settings" backend.

Its basic usage is very intuitive:{{ 图片URL|thumb }}.When you use this filter in the template, the system will intelligently search or generate the thumbnail version of the image configured in the background and return its URL.thumbThe filter will automatically provide the thumbnail address that best fits the current settings.

It is worth noting that,thumbThe filter itself does not accept size parameters.It will always refer to the global thumbnail size and processing method defined in the "Content Settings".Therefore, the key to implementing small thumbnail images on mobile devices lies in the coordination of backend configuration and frontend templates.

Optimization strategies for mobile devices

To utilizethumbThe filter loads smaller thumbnail sizes on mobile devices, we can combine the multi-site management and template mechanism of Anqi CMS to formulate a strategy:

1. Set uniformly, responsive adaptation:

This is the simplest and most direct way.You can set the thumbnail size to a moderately small size in the "Content Settings" (for example, width 300px).This size can meet the loading requirements of mobile devices, and can also be stretched or scaled appropriately on the PC end through CSS without looking too blurry.

In the template, whether it is a desktop or mobile end, it is used uniformly{{ item.Thumb }}or{{ item.Logo|thumb }}Call the thumbnail URL.The front-end uses CSS media queries to control the maximum width or height of images at different screen sizes, making them adaptable to display.This method has the advantage of low management costs, a set of thumbnail sizes and a set of CSS rules can cover all devices.

2. Independent mobile site, fine-grained configuration:

The Anqi CMS supports the "PC + mobile end independent site" mode, which means you can set up independent sites for PC and mobile ends separately.In this mode, each site has its own independent backend configuration.

You can use this feature to configure a separate set of "content settings" for the mobile site.For example, the PC site can be configured to generate a thumbnail with a width of 800px, while the mobile site is configured to generate a thumbnail with a width of 300px.{{ item.Thumb }}or{{ item.Logo|thumb }}The thumbnail with a smaller size under the mobile site configuration will be automatically loaded.

This method can achieve the most thorough image optimization, ensuring that mobile devices always load the smallest and most suitable image resources.However, it requires you to configure an additional mobile site in multi-site management and maintain its independent settings.

thumbThe actual application of the filter

No matter which strategy you choose, use it in the template.thumbFilters to call thumbnails are very convenient. Here are some common application scenarios examples: