How to apply the `thumb` filter to the image URL in the AnQiCMS template?

In website content operation, images play a crucial role, not only attracting users' attention but also effectively conveying information.However, the original large image without optimization often becomes a bottleneck for website loading speed, affecting user experience and even search engine rankings.AnQiCMS fully understands this and has provided a simple yet powerful tool for content operators to solve this problem - that isthumbFilter.

Then,thumbHow is the filter applied to the image URL in the AnQiCMS template?In simple terms, it is a tool specifically designed to handle image paths, which helps us quickly convert original image links into optimized thumbnail links.This means you do not need to manually crop and upload images in multiple sizes, AnQiCMS will automatically generate or select thumbnails of the appropriate size based on your backend configuration, and provide the access path.

UsethumbThe benefits of the filter are evident. Firstly, it can significantly improve the loading speed of web pages.When a page needs to display a large number of images, loading smaller thumbnails can greatly reduce the amount of data transfer, thereby allowing users to see the page content faster.Secondly, this directly improved the user experience, reduced waiting time, and decreased the bounce rate.Again, website loading speed is one of the important considerations for search engine optimization (SEO), a faster website means a better user experience rating, which indirectly helps your website gain better visibility in search results.It is most important that it greatly simplifies the workflow for image management, allowing content publishers to focus more on content creation itself rather than on tedious technical details.

Apply in AnQiCMS templatethumbThe filter is very intuitive. Its basic syntax is to place it after any image URL variable, using a pipe symbol|Connect it. For example, if you are looping through an article list, each article usually has a cover image (possibly throughitem.Logooritem.Thumbfield to get), then you can apply it like this:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            {# 原始图片链接可能是 item.Logo，通过 thumb 过滤器获取缩略图链接 #}
            <img src="{{item.Logo|thumb}}" alt="{{item.Title}}">
            <h5>{{item.Title}}</h5>
        </a>
    </li>
    {% endfor %}
{% endarchiveList %}

here,item.LogoIs the original cover image link of the article, after|thumbAfter filtering, it will output a URL pointing to a thumbnail version. Similarly, if you directly obtain a banner image URL from a page and want to display its thumbnail, you can do it like this:

{% bannerList banners %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo|thumb}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

You may be curious how the size and processing method of these thumbnails are determined?AnQiCMS in the background "Content Management" module, go to "Content Settings", and provides very flexible configuration options.You can set the 'thumbnail processing method' (such as proportional scaling by the longest side, cropping by the shortest side, etc.), 'thumbnail size' (specify pixel width and height), and even enable advanced features such as 'auto-compress large images' and 'Webp image format'.These settings determinethumbHow does the filter generate or select images in actual work. If you need to adjust the website's image display strategy later, you just need to modify these configurations in the background, and then use the 'Batch regenerate thumbnails' feature to allow all throughthumbThe images referenced by the filter have all been updated to new sizes and styles, eliminating the need to manually replace each image link, greatly enhancing operational efficiency.

In short, AnQiCMS'sthumbThe filter is a highly integrated, easy-to-operate, and powerful image optimization tool.Using it wisely can not only make your website visually refined, but also significantly improve performance and SEO, thereby providing users with a smoother and more pleasant browsing experience.

Frequently Asked Questions (FAQ)

Q1: Why did I usethumbFilter, but the image size looks unchanged?

A1: If you find that you have usedthumbThe image size after the filter has not shrunk as expected, please first check the "Content Management" -> "Content Settings" page on the AnQiCMS backend.Here are key configurations such as 'thumbnail size' and 'thumbnail processing method'.Make sure you have set the appropriate thumbnail size (for example, width and height) and selected the thumbnail processing method that meets your needs.Moreover, if you modify these settings, you may need to click the 'Batch regenerate thumbnail images' button to let the system reprocess the uploaded images to see the effect.

Q2:thumbCan the filter handle all image URLs? For example, external link images?

A2:thumbThe filter mainly targets image resources uploaded to or managed by the AnQiCMS system.For external link images (i.e., directly referencing images from other websites), the AnQiCMS system usually loads the original image by default.If you want AnQiCMS to handle external images, you can enable the option 'Download remote images' in the 'Content Settings'.This, when the content contains external images, the system will try to download them to the local and manage them, after thatthumbThe filter can take effect.

Q3:thumbDoes the filter support generating thumbnails of different sizes for the template to choose from?

A3:thumbThe filter itself primarily generates a standard thumbnail version based on the "Content Settings" uniformly configured "thumbnail size" and "thumbnail processing method". If your template needs to display pictures of various different sizes (such as small-sized thumbnails on article list pages and medium-sized thumbnails on article detail pages), AnQiCMS currently providesLogoandThumbTwo fields,ThumbThe field is usually a link to an optimized thumbnail. For more complex multiple size requirements, it may be necessary to develop a second version or use the AnQiCMS image storage interface, with the assistance of external tools or plugins, to manage and output images in multiple sizes.