In website content management, the effective use of images is crucial for improving user experience and page loading speed. AnQiCMS (AnQiCMS) is well-versed in this, providing powerful image processing features, includingthumbThe filter is a tool that helps us easily obtain the thumbnail version of images.
Why are thumbnails so important?
Imagine if all the images on your website loaded in their original size in high definition, the page would become so heavy!Users will have to wait longer to see the full content, which undoubtedly will affect their patience and the bounce rate of the website.
- Optimize loading speedUsing smaller thumbnail files can significantly reduce the total file size of the page, thereby speeding up the loading speed of the web page and improving the perceived performance of the user.
- Improve user experience: A fast-loading page gives users a smooth feeling, thumbnails can also provide intuitive visual guidance on list pages and article previews, improving the readability and attractiveness of the content.
- Beneficial for search engine optimization (SEO): Search engines are increasingly emphasizing page loading speed and user experience.Faster loading speed and a better user experience help improve the ranking of the website in search results.Moreover, using thumbnails reasonably can help search engines better understand the content of the image.
Perfect solution provided by Anqi CMS in image processing.When we upload images, the system will automatically process the images according to the backend configuration, including generating thumbnails of different sizes.These configurations are mainly focused in the "Content Settings" of the management backend.Here, you can flexibly define the "processing method" of the thumbnail (such as scaling proportionally by the longest edge, cropping by the shortest edge, etc.) and the thumbnail size.thumbThe filter provides basic image processing support.
thumbThe wonder of filters
In the template design of AnQi CMS, we often encounter such a scenario: we have obtained the original address of the image, but we want to display the corresponding thumbnail version on the page. At this time,thumbThe filter can be put to use.
thumbThe working principle of the filter is very intuitive: it receives the original URL of an image as input, and then automatically returns the URL of the thumbnail version of the image based on the thumbnail rules preset in the "Content Settings" of the Anqi CMS backend.This means that you do not need to manually concatenate the thumbnail path, the system will automatically complete this conversion process.
Its basic usage syntax is very concise, just pass the image variable through the pipe character|Connected tothumbfilter:
{{ 图片变量|thumb }}
For example, ifitem.LogoIs the cover image address of your article, and if you want to display its thumbnail on the list page, you can use it like this:
<img src="{{ item.Logo|thumb }}" alt="{{ item.Title }}"/>
Actual application scenarios and examples
When building a template,thumbThe filter can be applied to image addresses obtained from various data tags. For example, when displaying document lists, category lists, single-page lists, or friend links, if these items contain original image addresses such asLogoOr you can use any custom image fieldthumbto get the thumbnail with a filter.
Scenario one: Display the article cover thumbnail on the article list page
Assuming you have gone througharchiveListThe tag retrieved a series of article data, and each article'sLogoThe field stores the address of the article cover large image. When displaying in a loop, we can use thumbnails for faster page loading:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
{% if item.Logo %} {# 检查是否存在封面图 #}
<img src="{{ item.Logo|thumb }}" alt="{{item.Title}}"> {# 使用thumb过滤器获取缩略图 #}
{% endif %}
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
</a>
</div>
{% endfor %}
{% endarchiveList %}
Scene two: Display the logo thumbnail of the friend link in the sidebar
If your friend link (throughlinkListRetrieve) it includes the logo image, and you want to display it in the sidebar in a small size:
{% linkList friendLinks %}
{% if friendLinks %}
<div class="sidebar-links">
<h4>友情链接</h4>
<ul>
{% for item in friendLinks %}
<li>
<a href="{{item.Link}}" target="_blank">
{% if item.Logo %}
<img src="{{ item.Logo|thumb }}" alt="{{item.Title}}"> {# 假设友情链接也有Logo字段 #}
{% endif %}
<span>{{item.Title}}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endlinkList %}
As you can see,thumbThe filter greatly simplifies the thumbnail processing logic in the template, allowing us to focus more on content presentation.
Points to note
While usingthumbA few points to note when using the filter:
- Background configuration is fundamental.:
thumbThe filter depends on the configuration of the "Content Settings" in the AnQi CMS backend regarding thumbnails. If these settings are incorrect, or if the thumbnail generation feature is not enabled at all, thenthumbThe filter may only return the original image address or a non-existent image path. Make sure to check and ensure that the backend configuration meets your requirements. - The input must be an image URL: Enter
thumbThe variable of the filter must be a valid image URL string. If the input is not an image URL or is empty, the behavior of the filter may not be as expected. - Processed URL:
thumbThe thumbnail URL returned by the filter is the one processed by the system, usually with some suffixes or prefixes added to the original image path (such as_thumbOr size information), but this is transparent to the template user, we just need to know that it can get the correct thumbnail address.
In general,thumbThe filter is a very useful tool in Anqi CMS template, which encapsulates the complex logic of image thumbnail generation and path conversion, allowing template developers to implement image optimization in the simplest way, thereby bringing better performance and user experience to the website.
Frequently Asked Questions (FAQ)
Q1: Why did I use{{ 图片地址|thumb }}After that, is the large image still displayed on the page or is the image not displayed?A1: This is usually because the thumbnail-related configuration in the "Content Settings" of the Anqi CMS backend is not set correctly or is not enabled.Please check and make sure that you have configured the 'Thumbnail Size' and 'Thumbnail Processing Method' in the 'Content Settings', and that the related image generation service is running normally.
Q2:item.Thumbanditem.Logo|thumbWhat is the difference? Which one should I use?A2:item.ThumbThis usually refers to the thumbnail value of an article or category, which is specifically uploaded or automatically extracted and processed by the system when the content is published, and it is already a thumbnail URL.item.Logo|thumbThis isitem.LogoThis is the original image URL used for the main or cover imagethumbThe filter dynamically generates or retrieves the thumbnail URL corresponding to it. If you already have a dedicated thumbnail field (such asitem.Thumb), use it first; if you only have the original large image field (such asitem.LogoBut if you need to display its thumbnail version, then use{{ item.Logo|thumb }}is the most convenient way.
Q3:thumbWhat image formats do the filters support for thumbnail generation? Does it support WebP?A3:thumbThe filter can handle common image formats supported by the Anqi CMS system (such as JPG, PNG, GIF).As to whether thumbnails in WebP format are supported, it depends on whether you have checked and enabled the 'Whether to start Webp image format' option in the background 'Content Settings'.If enabled, the system will convert the generated thumbnails to WebP format (if the browser supports), thereby further optimizing the image volume.