In website content operation, images play a crucial role, not only attracting users' attention but also effectively conveying information.However, the original large image without optimization often becomes a bottleneck for website loading speed, affecting user experience and even search engine rankings.thumbFilter.
So,thumbHow is the filter applied to the image URL in the AnQiCMS template?In simple terms, it is a specialized tool for handling image paths, which can help us quickly convert original image links into optimized thumbnail links.This means you do not need to manually crop and upload images in multiple sizes. AnQiCMS will automatically generate or select thumbnails of suitable sizes based on your backend configuration, and provide their access paths.
UsethumbThe benefits of the filter are self-evident.It can significantly improve the loading speed of web pages.When the page needs to display a large number of images, loading smaller thumbnails can greatly reduce the amount of data transfer, thereby allowing users to see the page content faster.Furthermore, this directly improves the user experience, reduces waiting time, and lowers the bounce rate.Moreover, website loading speed is one of the important factors in search engine optimization (SEO), a faster website means a better user experience rating, which indirectly helps your website achieve better visibility in search results.The most important thing is that it greatly simplifies the workflow of image management, allowing content publishers to focus more on content creation itself rather than the tedious technical details.
Applied in AnQiCMS templatethumbThe filter is very intuitive. Its basic syntax is to place it after any image URL variable, using a pipe symbol|Connect and it's done. For example, if you are displaying a list of articles in a loop, each article usually has a cover image (possibly obtained throughitem.Logooritem.Thumbfield), then you can apply it like this:
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
{# 原始图片链接可能是 item.Logo，通过 thumb 过滤器获取缩略图链接 #}
<img src="{{item.Logo|thumb}}" alt="{{item.Title}}">
<h5>{{item.Title}}</h5>
</a>
</li>
{% endfor %}
{% endarchiveList %}
Here,item.LogoIs the original cover image link of the article, after|thumbAfter filtering, it will output a URL pointing to a thumbnail version. Similarly, if you directly obtain a banner image URL on the page and want to display its thumbnail, you can do it this way:
{% 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 %}
You might be curious about how the size and processing of these thumbnails are determined?AnQiCMS in the background "Content Management" module, go to "Content Settings", which provides very flexible configuration options.You can set the 'thumbnail processing method' (such as proportional scaling by the longest side, cropping by the shortest side, etc.), 'thumbnail size' (specify pixel width and height), and even enable advanced features such as 'auto-compress large images' and 'Webp image format'.thumbHow does the filter generate or select images in actual work. If the image display strategy of the website needs to be adjusted later, just modify these configurations in the background, and then use the 'Batch regenerate thumbnails' feature, so that all throughthumbThe images referenced by the filter are all updated to new sizes and styles, eliminating the need to manually replace each image link, greatly enhancing operational efficiency.
In short, AnQiCMS'sthumbFilter is a high-integration, easy-to-operate, and powerful image optimization tool.Reasonably utilizing it, not only can it make your website more exquisite visually, but also can significantly enhance performance and SEO, thereby providing users with a more smooth and pleasant visit experience.
Common Questions (FAQ)
Q1: Why did I usethumbFilter, but the picture size does not seem to have changed?
A1: If you find that you have usedthumbFiltering the image does not shrink as expected, please first check the 'Content Management' -> 'Content Settings' page on the AnQiCMS backend.There are key configuration items such as 'thumbnail size' and 'thumbnail processing method'.Ensure that you have set the appropriate thumbnail size (for example, width and height) and selected the thumbnail processing method that meets your needs.In addition, if you modify these settings, you may need to click the "Batch regenerate thumbnails" button to let the system reprocess the uploaded images so that you can see the effect.
Q2:thumbCan the filter handle all image URLs? For example, external link images?
A2:thumbThe filter mainly applies to the picture resources uploaded or managed by the AnQiCMS system.For external link images (i.e., directly referencing images from other websites), the AnQiCMS system will usually load the original image by default.If you want AnQiCMS to handle external images, you can enable the 'Download remote images' option in 'Content Settings'.thumbThe filter can take effect as soon as it is applied.
Q3:thumbDoes the filter support generating multiple different sizes of thumbnails for template selection?
A3:thumbThe filter itself mainly generates a standard thumbnail version based on the unified configuration of 'Thumbnail Size' and 'Thumbnail Processing Method' in 'Content Settings'. If your template requires displaying images of different sizes (such as small thumbnails on article list pages and medium-sized thumbnails on article detail pages), the current AnQiCMS providesLogoandThumbTwo fields,ThumbThe field is usually a link to an optimized thumbnail.For more complex and various size requirements, it may be necessary to undergo secondary development or use the AnQiCMS image storage interface, with the assistance of external tools or plugins, to manage and output images in multiple sizes.