How to get different thumbnail image addresses by using a filter in AnQiCMS template?

When using AnQiCMS for website content management, image management and optimization is a key factor in improving user experience, accelerating page loading speed, and enhancing SEO performance.Especially in the process of template development, we often encounter the need to obtain addresses of different size thumbnails.The AnQi CMS offers an intuitive way to deal with these issues with its concise and efficient design concept.

Today we will delve deeply into how to cleverly use built-in filters in the AnQiCMS template to obtain different thumbnail addresses for the images we upload.

The journey of the image in AnQiCMS: from upload to display

In AnQiCMS, whether through document management, category management, or uploading images to the image resource library, 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' is离不开AnQiCMS back-endContent settings. You can access the back-end of后台设置-u003e内容设置.缩略图处理方式and缩略图尺寸Options. Here you can define the default width, height, and cropping mode of the system-generated thumbnails (for example, scaling proportionally by the longest side, cropping by the shortest side, etc.).These settings determinethumbThe specific size and appearance of the thumbnail returned when the filter is called.

For example, if your website needs to display a 50x50 pixel thumbnail in a small card and a 200x200 pixel image on the detail page, you need to understand that,thumbThe filter will return by defaulta set ofYou have configured the standard thumbnail size in the background "Content Settings". If it is indeed necessary to generate multiple fixed-size thumbnails on the server side (for example, 50x50 and 200x200 at the same time), AnQiCMS'sthumbThe filter does not support passing size parameters directly to dynamically generate.It will provide the standard thumbnail you have configured in the background.However, this does not mean that we cannot implement different sizes of display on the front end, more through flexible control of CSS.

RevelationthumbFilter: How to get thumbnail address

AnQiCMS's template engine supports syntax similar to Django, where 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: just use the image field as a variable and pass through the pipe|连接thumbthe filter.

{{ 图片地址 | thumb }}

Let's see its application in several common scenarios:

1. Get the cover thumbnail of a document, category, or single page

On the document detail page, category list, or single page content, we often call its cover image (usuallyLogoorThumbfield). These fields themselves may 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 a group image

Some content models support group images (for exampleImagesfield), it will return an array of image URLs. At this point, we need to combineforLoop to traverse each image and apply to each imagethumbfilter.

{# 假设 archive.Images 是一个图片地址数组 #}
<div class="gallery">
    {% for imgUrl in archive.Images %}
        <img src="{{ imgUrl | thumb }}" alt="图片描述" />
    {% endfor %}
</div>

3. Get the thumbnail 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 %}

Understand the practice of "different sizes"

As mentioned previously,thumbThe thumbnail address of the filter output, whose specific size is统一 configured in the background "Content Settings". If your requirement is to display the same image with different "visual sizes" at different positions on the front end, the most recommended and flexible way isCombine with CSS stylesto control.

For example, you can set images in CSS