In website content operation, images are indispensable elements for improving user experience and conveying information.However, how to ensure the quality of images while considering the loading speed and layout beauty of the website, especially in the case of a large number of images and dynamic generation of sources, has become a challenge faced by many operators.thumbFilter.
Why do we need thumbnails?
我们都知道，大尺寸的图片文件会显著增加网页的加载时间，这不仅影响用户体验，也对搜索引擎优化（SEO）不利。A website that responds quickly can often retain more visitors.The introduction of the thumbnail (Thumbnail) is to solve this problem.It allows us to use smaller, faster-loading image versions on pages where multiple images need to be displayed, such as list pages, sidebars, etc., and only loads the original large image when the user clicks to view details.In addition, unified thumbnails can also make the page layout more tidy and professional.
How does AnQiCMS intelligently handle image resources?
AnQiCMS considers image processing very thoroughly.In the "Content SettingsSystem supports various scaling methods, such as proportional scaling by the longest edge, padding by the longest edge, or cropping by the shortest edge, and it can also customize the uniform size of thumbnails.This means that regardless of the size of the original image we upload, AnQiCMS can automatically generate thumbnail versions that conform to the website style according to preset rules.
In the template, AnQiCMS usually provides for usitem.Logo(Original image URL) anditem.Thumb(System-generated thumbnail URL) such field. But sometimes, we may only get the original image URL, or we want to process a thumbnail for any image URL.thumbThe filter comes into play.
thumbThe magic of the filter
In AnQiCMS template system, we usually use syntax similar to Django template engine. It comes with many practical filters (filters),thumbIt is one of them.thumbThe main function of the filter is to receive a complete image URL as input and then automatically return the thumbnail version URL of the image according to the thumbnail rules configured in the "Content Settings" on the backend.This greatly simplifies the template code and avoids the tedious operation of manually concatenating thumbnail path.
Its core advantage lies in:
- Dynamic adaptability:Whether the image URL is from an article, product, page, or any other dynamic content, as long as it is a valid image address,
thumbthe filter can handle it. - Centralized management:Thumbnail generation rules, size, and other settings can be unified configured in the AnQiCMS backend. The template code only needs to focus on the image call and does not need to be modified to adapt to the changes in backend rules.
- Performance optimization:Ensure that the front-end page always loads images of appropriate size to enhance website performance.
How to use in templatethumbFilter?
UsethumbThe filter is very simple and intuitive, just apply it after the variable containing the image URL, and|Symbols are separated by.
Assuming we are iterating over a list of articles,item.Logofield contains the original URL of the article's cover image. We want to display these images as thumbnails on the list page:
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
{# 使用thumb过滤器获取缩略图 #}
<img src="{{ item.Logo|thumb }}" alt="{{item.Title}}">
<h5>{{item.Title}}</h5>
</a>
</li>
{% empty %}
<li>
该列表没有任何内容
</li>
{% endfor %}
{% endarchiveList %}
In the above code,{{ item.Logo|thumb }}The conversion from the original image URL to the thumbnail URL is completed.
Similarly, if we upload a Banner image in the page configuration when displaying a single page detail, and its URL is stored in some variable (for examplepageBanner）中，we can also handle it like this:
{% pageDetail pageImages with name="Images" %}
{% if pageImages %}
{# 假设我们只想展示第一张Banner图的缩略图 #}
{% set pageBanner = pageImages[0] %}
<div class="page-banner" style="background-image: url('{{ pageBanner|thumb }}');">
<!-- 其他内容 -->
</div>
{% endif %}
{% endpageDetail %}
You can see, no matter the source of the image isitem.Logo, the elements in the array, or other dynamic variables, as long as their value is a picture URL string,thumbThe filter can convert them all into the thumbnail links we expect.
Behind-the-scenes configuration: Thumbnail Management Center
thumbThe filter can work normally due to the powerful image management function of AnQiCMS backend. You can find the thumbnail configuration options in "Background Settings" -> "Content Settings".
- Thumbnail processing method:Select whether to scale proportionally, pad, or crop. This determines the thumbnail generation strategy.
- Thumbnail size: Set a uniform width and height. For example, set to 200x150 pixels, all through
thumbThe images processed by the filter will all attempt to generate this size of thumbnail. - Default thumbnail:When some content does not have an uploaded image, you can specify a default image as a placeholder.
- Batch regenerate thumbnails:If you change the thumbnail size or processing method, you can use this feature to one-click update the thumbnail versions of all uploaded images, ensuring the unified style of the entire site.
These settings arethumbThe foundation of filter behavior, properly setting them will help you better optimize website images and improve overall operational efficiency.
In summary, AnQiCMS'sthumbFilter is a very practical tool, it separates the generation and management of image thumbnails from template code, allowing template developers to focus on content display, while website administrators can flexibly adjust image strategies through the backend.Use this feature wisely, and your website will see significant improvements in both visual effects and loading performance.
Common Questions (FAQ)
1. Why did I usethumbFilter, but there is no change in the image size displayed on the front end?
This usually has several reasons.Please check if the "Thumbnail Size" under "Content Settings" in AnQiCMS backend is configured. If not set, the system may not generate thumbnails of specific sizes.其次，browser cache may cause image updates to be timely, try clearing the browser cache or accessing in incognito mode.Finally, if the original image is already very small, smaller than the thumbnail size you set, then even after filtering, the image size will not increase.
2.thumbDoes the filter create thumbnail versions for all images? Even if these images are not uploaded through the AnQiCMS backend?
thumbThe filter mainly processes images uploaded through the AnQiCMS backend, as the system will record and manage these images. When youthumbThe filter is applied to an original image URL, AnQiCMS will try to find or generate the corresponding thumbnail according to its backend configuration. If the image URL points to an external website or an unmanaged local image by AnQiCMS,thumbThe filter may not work properly or may only return the original URL. In most cases, AnQiCMS will intelligently download remote images in the article content to the local and manage them (if the option 'Whether to download remote images' is turned on)thumbThe filter must process it.
Can I use different thumbnail sizes for different images? For example, the article list and article detail page need different thumbnail sizes.
thumbThe filter itself does not accept size parameters; it applies the globally defined thumbnail processing methods and sizes from the background "Content Settings". If you need to display thumbnails of different sizes in different locations, you can consider the following methods:
- Backend multi-field support:If your content model supports multiple image fields (for example
item.LogoSmallanditem.LogoLarge), you can differentiate them during upload and in the template