Does the `thumb` filter support adding custom parameters to the generated thumbnails, such as lazy-load image loaders?

In content operation, images play a crucial role, as they can attract readers and effectively convey information.To enhance website performance and user experience, it is particularly important to manage and display images properly, especially thumbnails.thumbfilter.

Many friends wonder when using AnQiCMS for template developmentthumbDoes the filter support adding custom parameters to the generated thumbnails, such as the commonly used lazy-load attribute for images, or directly controlling the size of the thumbnails.

thumbThe core function and parameter support of the filter

When we view the template tag document of AnQiCMS, we can findthumbFor example, the filter (such as inarchiveDetail/categoryDetailThe main responsibility of the tag in the label is to return the thumbnail URL based on the original image address. Its usage is usually like this:{{ item.Logo|thumb }}This filter is concise and efficient, focusing on providing a processed thumbnail link so that it can be<img>in the tag.

Delve into the design philosophy and existing documentation of AnQiCMS, and we can understand,thumbThe filter itself is a pure 'value' filter. This means it is designed to directly obtain the thumbnail path that the system has already generated or preprocessed, andDoes not directly support passing custom parameters when callingFor examplewidth/heightTo generate thumbnails of different sizes in real time, or addlazy/data-srcAnd other HTML attributes.

How AnQiCMS manages thumbnail generation

Then, ifthumbThe filter does not accept parameters directly, how are the thumbnail size and processing method of the website determined?In fact, AnQiCMS provides a unified thumbnail processing mechanism in the "Content Settings" section of the back end.Here, you can set the thumbnail size (for example, width and height), choose different processing methods (such as scaling proportionally by the longest side, filling by the longest side, or cropping by the shortest side), and even set a default thumbnail to handle documents that have not uploaded images.When we upload images, the system will automatically generate or crop thumbnails according to these global settings.thumbThe filter returns the URL of these thumbnails that have been uniformly configured and processed in the background.

The implementation strategy of image lazy loading (Lazy-Load)

The image lazy loading feature, which is very important for website performance optimization, how does AnQiCMS support it? The document indeed mentions image lazy loading, but it is important to note that this is mainly reflected inarchiveDetailTag rendering articles or product contentContentField. For images inserted in rich text editors, the system can process them based onlazy="定义的src名"such parameters to handle, andsrcproperties todata-srcetc., to support lazy loading.

However, forthumbthe thumbnail URL returned by the filter, as well as images likeLogo/Images(gallery) and other image fields, becausethumbthe filter itself does not accept this type of HTML attribute parameter, we need totemplate levelmanually process and combine with a front-end JavaScript lazy loading library to implement.

This usually means you need:

1. By{{ item.Thumb }}(or{{ item.Logo }}etc.) to get the thumbnail URL.
2. In your HTML template, manually construct<img>tag, and assign the obtained URL todata-src(or other attributes required by your lazy loading library), and you can also givesrcSet a placeholder image.
3. Make sure you have introduced and initialized a JavaScript lazy loading library (such as LazyLoad.js, vanilla-lazyload, etc.) to scan and process elements withdata-srcThe picture of the attribute.

Here is a simple template code example showing how to use AnQiCMS tothumbImplement lazy loading of thumbnails returned by the filter:

{# 假设我们正在循环显示文章列表，item是每篇文章的数据 #}
{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
    <div class="article-card">
        {% if item.Thumb %}
        <a href="{{ item.Link }}">
            {# 在这里，我们将item.Thumb的值赋给data-src，并使用一个placeholder.svg作为初始src #}
            <img class="lazy-load-image" data-src="{{ item.Thumb }}" src="/public/static/images/placeholder.svg" alt="{{ item.Title }}">
        </a>
        {% endif %}
        <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
        <p>{{ item.Description|truncatechars:100 }}</p>
    </div>
    {% endfor %}
{% endarchiveList %}

{# 请确保您的网站已引入并初始化了相应的JavaScript懒加载库 #}
{# 例如，使用一个简化版的伪代码说明： #}
{# <script>
    document.addEventListener("DOMContentLoaded", function() {
        var lazyImages = [].slice.call(document.querySelectorAll("img.lazy-load-image"));
        if ("IntersectionObserver" in window) {
            let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        let lazyImage = entry.target;
                        lazyImage.src = lazyImage.dataset.src;
                        lazyImage.classList.remove("lazy-load-image");
                        lazyImageObserver.unobserve(lazyImage);
                    }
                });
            });
            lazyImages.forEach(function(lazyImage) {
                lazyImageObserver.observe(lazyImage);
            });
        }
    });
</script> #}

In summary, AnQiCMS'sthumbThe filter design is simple and clear, focusing on providing thumbnail URLs configured on the backend.It does not directly accept custom parameters to control the generation of thumbnails or to add HTML attributes.thumbFilters and other scenarios that directly return image URLs require us to flexibly use template tags, in