In daily content operation, images are undoubtedly the first element to attract visitors, and thumbnails play a crucial role in list display, article overview, and other aspects.AnQiCMS provides a very flexible image processing mechanism in this aspect, allowing us to manage image resources with precision.

However, during the use of AnQiCMS, there is a setting item that often confuses everyone: if we leave the thumbnail size blank in the background content settings, then when we usethumbHow will it perform when calling the image with a filter?Today, let's delve into this issue in depth and hope to help you better understand and utilize the image processing function of AnQiCMS.

Understand the thumbnail mechanism of AnQiCMS

Let's review how AnQiCMS handles thumbnails.In AnQiCMS backend, the path is "Backend Settings" → "Content Settings", where you will find a series of options related to image processing.These options are designed to help us optimize the images, improve the loading speed and visual effects of the website.

Among them, there are two key settings fields, 'Thumbnail Processing Method' and 'Thumbnail Size'.“Thumbnail processing method” defines the specific behavior of images when scaling, cropping, or padding, such as whether to scale proportionally by the longest edge or to crop centered by the shortest edge.200x150. These settings are used to inform the system of the way and size you want thumbnails to appear on the frontend page.

In the front-end template, we usually use{{ item.Logo|thumb }}or{{ archive.Thumb|thumb }}such code to call the thumbnail, here the|thumbThis is the thumbnail filter provided by AnQiCMS, which processes the original image according to the "content settings" on the backend and then returns the path of the processed thumbnail.

In-depth discussion: When the 'thumbnail size' is empty

Then, back to our original question: If the 'thumbnail size' setting is emptythumbWill the filter still process the image?

According to the design logic of AnQiCMS and the general behavior of most CMS, when the "thumbnail size" is set to empty,thumbThe filter willIt will not perform any cropping or resizing on the image. It will return directlyThe complete path of the original image.

What does this mean?In simple terms, the size of the original image you upload is how large a picture the front-end page will attempt to load.If your original image is very large, such as several megabytes, and has a high resolution, the page loading speed will be severely affected, thereby reducing the user experience, and even possibly affecting the search engine ranking of the website.The system may still apply other settings, such as WebP format conversion or watermarks, but the core function of size optimization will not take effect.

To some extent, this can be considered as an instruction to 'skip' dimension handling.The system does not have clear size instructions, so it chooses not to intervene in size, and directly provides the original resources.This may be useful in some special scenarios, such as when you want to control the size and responsive behavior of images entirely with frontend CSS or JavaScript, or when you want to ensure that images are displayed at their highest original quality without any compression on the backend.But in most cases, for performance considerations, we still set a specific size for thumbnails.

Actual operation suggestions

To ensure website performance and a good user experience, it is strongly recommended that you always set an appropriate size for thumbnails in the background, for example300x200or400x300Select an appropriate 'thumbnail processing method'.This can not only effectively reduce the size of image files and accelerate the page loading speed, but also unify the visual style of the website, making the image display more regular and beautiful.

If you really need to display the original size image in a specific scenario, then you can consider using{{ item.Logo }}or{{ archive.Logo }}to get the original image path instead of|thumbFilter. This allows you to clearly distinguish between images that need size optimization and those that do not on the template level.

Additionally, AnQiCMS backend also has a setting for "default thumbnail". If an article or content does not have an uploaded thumbnail,thumbThe filter will automatically use this default image as a substitute, but this is different from leaving the 'thumbnail size' blank; the default thumbnail itself will also be processed according to the size settings.

Finally, don't forget to use the 'Batch regenerate thumbnails' feature after you have adjusted the thumbnail size or processing method.This feature will traverse all the images on your website and regenerate their thumbnail versions according to the latest settings, ensuring that all images are optimized to the new size.

In short, AnQiCMS'sthumbFilter is a powerful image processing tool, but its behavior is highly dependent on the backend configuration.Make sure to set the thumbnail size clearly and reasonably, which is an important part of ensuring the efficient operation of the website and the beautiful display of content, as well as showing responsibility for user experience and website performance.

Common Questions (FAQ)

  1. |thumbFilters and using directly{{ item.Logo }}What is the difference? |thumbThe filter is designed by AnQiCMS for image optimization, it will process the original image according to the 'Thumbnail processing method' and 'Thumbnail size' you configure in the 'Content Settings' backend (such as cropping, scaling, converting to WebP format, adding watermarks, etc.), and then return the path of the processed thumbnail.{{ item.Logo }}(or}{{ archive.Logo }}If you do not upload a thumbnail when publishing an article,

  2. If you do not upload a thumbnail when publishing an article,thumbWhat will the filter display?If the article itself does not upload a thumbnail, AnQiCMS will first check whether you have configured the "default thumbnail" in "Background Settings" → "Content Settings". If it is set,|thumbThe filter will return the path of this default thumbnail (and also process it according to the size settings). If no default thumbnail is set,|thumbThe filter usually returns an empty string or a system-built placeholder image path, depending on how the template handles null values.

  3. I modified the "thumbnail size" setting on the back end, but the old image size on the front-end page did not change. What is the reason?When you modify the image processing settings such as 'Thumbnail size', AnQiCMS will not automatically update all existing images immediately.This is because image processing is a resource-consuming operation, and the system usually does not execute it in real time.You need to manually go to 'Background Settings' → 'Content Settings', find and click the 'Batch Regenerate Thumbnails' feature.Performing this action will cause the system to reprocess all images according to the latest settings and generate new thumbnail versions.Additionally, the browser cache may also cause you to see old images, clearing the browser cache usually solves this problem.