In AnQi CMS template, how to automatically get the thumbnail version of a dynamically generated image URL (such as `{{item.Logo}}`) through the `thumb` filter?

In website content operation, images are an indispensable element for improving user experience and conveying information.However, how to ensure image quality while considering the loading speed and layout beauty of the website, especially when there are a large number of images and dynamic generation of sources, has become a challenge faced by many operators.AnQiCMS as an efficient and flexible content management system provides us with an elegant solution, including the handling of dynamic image URLs and automatically obtaining thumbnailsthumbfilter.

Why do we need thumbnails?

We all know that large image files can significantly increase the loading time of web pages, which not only affects user experience but also is不利 for search engine optimization (SEO).A website that can respond quickly often retains more visitors.The introduction of the thumbnail is to solve this problem.It allows us to use smaller, faster-loading image versions in places that need to display multiple images on list pages, sidebars, etc., and only load the original large image when the user clicks to view details.In addition, uniform thumbnail specifications can also make the page layout more tidy and professional.

How does AnQiCMS intelligently handle image resources?

AnQiCMS considers image processing very carefully.In the "Content Settings" in the background, we can find detailed configuration items about the "thumbnail processing method" and "thumbnail size".The system supports various scaling methods, such as uniform scaling by the longest side, padding by the longest side, or trimming by the shortest side, and can also customize the uniform size of thumbnails.This means that no matter the size of the original image we upload, AnQiCMS can automatically generate thumbnail versions that match the website's style.

In the template, AnQiCMS usually provides us withitem.Logo(Original image URL) anditem.Thumb(System-generated thumbnail URL) such field. But sometimes, we may only obtain the original image URL, or we want to process a thumbnail for any image URL, at this timethumbThe filter comes into play.

thumbThe magic of the filter

In the AnQiCMS template system, we usually use syntax similar to the Django template engine. It comes with many practical filters (filters),thumbOne of them.thumbThe main function of the filter is to receive a complete image URL as input, then automatically return the thumbnail version URL of the corresponding image based on the thumbnail rules configured in the background "Content Settings".This greatly simplifies the template code, avoiding the cumbersome operation of manually concatenating thumbnail path.

Its core advantage lies in:

• Dynamic adaptability:No matter whether the image URL comes 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:The thumbnail generation rules, size, etc. can be uniformly configured in the AnQiCMS backend. The template code only needs to pay attention to the call of the picture and does not need to be modified to adapt to the changes of the backend rules.
• Performance optimization:Make sure the front-end page always loads images of the appropriate size to enhance website performance.

How to use in the templatethumbFilter?

UsethumbThe filter is very simple and intuitive, just apply it after the variable containing the image URL and use|separated by symbols.

Assuming we are iterating over a list of articles,item.Logofield contains the original URL of the cover image of the article. We want to display thumbnails of these images 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 code above,{{ item.Logo|thumb }}The conversion from the original image URL to the thumbnail URL is complete.

Similarly, if we upload a Banner image in the page configuration when displaying a single page detail, and its URL is stored in a variable (for examplepageBannerIn this way, we can also handle it:

{% 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, regardless of the source of the image is:item.LogoWhether it is an element in the array, or other dynamic variables, as long as their value is a picture URL string,thumbThe filter can convert it into the thumbnail link we expect.

Configuration behind the scenes: Thumbnail management center

thumbThe filter works normally due to the powerful image management function of AnQiCMS backend. You can find the thumbnail configuration options in "Backend Settings" -> "Content Settings":

• Thumbnail processing method:Choose whether to scale proportionally, pad, or crop. This determines the thumbnail generation strategy.
• Thumbnail size:Set uniform width and height. For example, set to 200x150 pixels, all throughthumbImages processed by the filter will attempt to generate this size thumbnail.
• Default thumbnail: When certain 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 version of all uploaded images to ensure the site's style is unified.

These are the settings.thumbThe foundation of filter behavior, reasonably setting them will help you better optimize website images and improve overall operational efficiency.

In summary, AnQiCMS'sthumbThe filter is a very practical tool, it extracts the generation and management of image thumbnails from the template code, allowing template developers to focus on content display, while website administrators can flexibly adjust the image strategy through the backend.Make good use of this feature, and your website will achieve significant improvements in visual effects and loading performance.

Frequently Asked Questions (FAQ)

1. Why did I usethumbFilter, but the size of the displayed image on the front end has not changed?

This usually has several reasons. First, please check if the thumbnail size is configured in the AnQiCMS backend "Content Settings", if not set, the system may not generate thumbnails of a specific size.Secondly, browser caching may cause image updates to be不及时, 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 passing through the filter, 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 you willthumbWhen the filter is applied to an original image URL, AnQiCMS will attempt to locate or generate the corresponding thumbnail according to its backend configuration. If the image URL points to an external website or a local image not managed by AnQiCMS,thumbThe filter may not work or may only return the original URL. By default, AnQiCMS will intelligently download remote images in the article content to the local and manage them (if the background option 'Download remote images' is enabled), so thatthumbThe filter can process it.

Can I use different thumbnail sizes for different images? For example, article lists and article detail pages need different sizes of thumbnails.

thumbThe filter itself does not accept size parameters, it will uniformly apply the global thumbnail processing method and size defined in the background 'Content Settings'. If you need to display thumbnails of different sizes at different locations, consider the following methods:

• Backend multi-field support:If your content model supports multiple image fields (such asitem.LogoSmallanditem.LogoLarge), you can differentiate them during upload and in the template