When using AnQiCMS for website content operation, image management and optimization is a key factor in improving user experience, accelerating page loading speed, and enhancing SEO performance.In particular, during template development, we often encounter the need to obtain addresses of thumbnails of different sizes.Auto CMS is provided with a straightforward approach to handle these issues, thanks to its concise and efficient design philosophy.
Today we will delve into how to cleverly use built-in filters in AnQiCMS templates to obtain different thumbnail image addresses of the uploaded images.
The journey of the image in AnQiCMS: from upload to display
In AnQiCMS, whether it is through document management, category management, or image resource library upload, the system will process the images according to a set of predefined rules.When we upload an original image, AnQiCMS will intelligently generate one or more thumbnail versions to meet the various display needs of the website front-end.
Behind this 'intelligent generation', AnQiCMS backend is indispensableContent Settings. You can find the template design in the background后台设置-内容设置Found in缩略图处理方式and缩略图尺寸English options.Here, you can define the default width, height, and cropping mode (such as aspect ratio scaling by the longest side, cropping by the shortest side, etc.) of the thumbnails generated by the system.thumbFilter returns the specific size and appearance of the thumbnail when called.
For example, if your website needs to display a 50x50 pixel thumbnail in a small card and a 200x200 pixel image in the detail page, what you need to understand is,thumbThe filter will return by defaulta set ofYou have configured the standard thumbnail size in the "Content Settings" on the backend. If it is indeed necessary to generate multiple fixed-size thumbnails on the server side (for example, both 50x50 and 200x200), AnQiCMS'sthumbThe filter does not support directly passing size parameters to dynamically generate.It will provide the "standard thumbnail" you configured in the background.However, this does not mean that we cannot implement different sizes on the front end, but rather through CSS for flexible control.
UnveilingthumbFilter: How to get thumbnail address
AnQiCMS's template engine supports syntax similar to Django, among which Filters are powerful tools for processing variable output. To get the thumbnail address of the uploaded image, we need to usethumbFilter.
Its basic usage is very concise: simply use the image field as a variable, and pass it through the pipe operator|Connectthumbthe filter.
{{ 图片地址 | thumb }}
Let's take a look at its application in several common scenarios:
1. Obtain the cover thumbnail of a document, category, or single page
In the document detail page, category list, or single page content, we often call its cover image (usuallyLogoorThumbField). These fields themselves store the original image address, throughthumbFilter, we can easily obtain the thumbnail address after processing.
{# 获取当前文档的封面首图缩略图 #}
<img src="{{ archive.Logo | thumb }}" alt="{{ archive.Title }}" />
{# 获取当前分类的缩略图 #}
<img src="{{ category.Thumb | thumb }}" alt="{{ category.Title }}" />
{# 获取某个单页的封面缩略图 #}
{% pageDetail pageLogo with name="Logo" id="1" %}
<img src="{{ pageLogo | thumb }}" alt="单页标题" />
2. Process each image in the group
Some content models support group images (such asImagesfield), it will return an array of image URLs. At this time, we need to combineforLoop through each image and applythumbFilter.
{# 假设 archive.Images 是一个图片地址数组 #}
<div class="gallery">
{% for imgUrl in archive.Images %}
<img src="{{ imgUrl | thumb }}" alt="图片描述" />
{% endfor %}
</div>
3. Get the thumbnail images of other modules (such as Banner)
Banner also usually has an image field (such asitem.Logo), you can also usethumbFilter.
{% bannerList banners %}
{% for item in banners %}
<a href="{{item.Link}}" target="_blank">
<img src="{{ item.Logo | thumb }}" alt="{{item.Alt}}" />
</a>
{% endfor %}
{% endbannerList %}
Understanding the Practice of 'Different Sizes'
As mentioned earlier,thumbThe thumbnail address of the filter output, its specific size is configured uniformly in the "Content Settings" on the backend. If your requirement is to display the same image with different "visual sizes" at different positions on the frontend, the most recommended and flexible way isCombine CSS stylesto control.
For example, you can set the image in CSS