So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How to get the thumbnail version of the image according to the image address using the `thumb` filter in the Anqi CMS template?

Calendar 👁️ 80

In website content management, the effective use of images is crucial for improving user experience and page loading speed. AnQiCMS (AnQiCMS) is well-versed in this, providing powerful image processing features, includingthumbThe filter is a tool that helps us easily obtain the thumbnail version of images.

Why are thumbnails so important?

Imagine if all the images on your website loaded in their original size in high definition, the page would become so heavy!Users will have to wait longer to see the full content, which undoubtedly will affect their patience and the bounce rate of the website.

  1. Optimize loading speedUsing smaller thumbnail files can significantly reduce the total file size of the page, thereby speeding up the loading speed of the web page and improving the perceived performance of the user.
  2. Improve user experience: A fast-loading page gives users a smooth feeling, thumbnails can also provide intuitive visual guidance on list pages and article previews, improving the readability and attractiveness of the content.
  3. Beneficial for search engine optimization (SEO): Search engines are increasingly emphasizing page loading speed and user experience.Faster loading speed and a better user experience help improve the ranking of the website in search results.Moreover, using thumbnails reasonably can help search engines better understand the content of the image.

Perfect solution provided by Anqi CMS in image processing.When we upload images, the system will automatically process the images according to the backend configuration, including generating thumbnails of different sizes.These configurations are mainly focused in the "Content Settings" of the management backend.Here, you can flexibly define the "processing method" of the thumbnail (such as scaling proportionally by the longest edge, cropping by the shortest edge, etc.) and the thumbnail size.thumbThe filter provides basic image processing support.

thumbThe wonder of filters

In the template design of AnQi CMS, we often encounter such a scenario: we have obtained the original address of the image, but we want to display the corresponding thumbnail version on the page. At this time,thumbThe filter can be put to use.

thumbThe working principle of the filter is very intuitive: it receives the original URL of an image as input, and then automatically returns the URL of the thumbnail version of the image based on the thumbnail rules preset in the "Content Settings" of the Anqi CMS backend.This means that you do not need to manually concatenate the thumbnail path, the system will automatically complete this conversion process.

Its basic usage syntax is very concise, just pass the image variable through the pipe character|Connected tothumbfilter:

{{ 图片变量|thumb }}

For example, ifitem.LogoIs the cover image address of your article, and if you want to display its thumbnail on the list page, you can use it like this:

<img src="{{ item.Logo|thumb }}" alt="{{ item.Title }}"/>

Actual application scenarios and examples

When building a template,thumbThe filter can be applied to image addresses obtained from various data tags. For example, when displaying document lists, category lists, single-page lists, or friend links, if these items contain original image addresses such asLogoOr you can use any custom image fieldthumbto get the thumbnail with a filter.

Scenario one: Display the article cover thumbnail on the article list page

Assuming you have gone througharchiveListThe tag retrieved a series of article data, and each article'sLogoThe field stores the address of the article cover large image. When displaying in a loop, we can use thumbnails for faster page loading:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            {% if item.Logo %} {# 检查是否存在封面图 #}
            <img src="{{ item.Logo|thumb }}" alt="{{item.Title}}"> {# 使用thumb过滤器获取缩略图 #}
            {% endif %}
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
        </a>
    </div>
    {% endfor %}
{% endarchiveList %}

Scene two: Display the logo thumbnail of the friend link in the sidebar

If your friend link (throughlinkListRetrieve) it includes the logo image, and you want to display it in the sidebar in a small size:

{% linkList friendLinks %}
    {% if friendLinks %}
    <div class="sidebar-links">
        <h4>友情链接</h4>
        <ul>
        {% for item in friendLinks %}
            <li>
                <a href="{{item.Link}}" target="_blank">
                    {% if item.Logo %}
                    <img src="{{ item.Logo|thumb }}" alt="{{item.Title}}"> {# 假设友情链接也有Logo字段 #}
                    {% endif %}
                    <span>{{item.Title}}</span>
                </a>
            </li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}
{% endlinkList %}

As you can see,thumbThe filter greatly simplifies the thumbnail processing logic in the template, allowing us to focus more on content presentation.

Points to note

While usingthumbA few points to note when using the filter:

  1. Background configuration is fundamental.:thumbThe filter depends on the configuration of the "Content Settings" in the AnQi CMS backend regarding thumbnails. If these settings are incorrect, or if the thumbnail generation feature is not enabled at all, thenthumbThe filter may only return the original image address or a non-existent image path. Make sure to check and ensure that the backend configuration meets your requirements.
  2. The input must be an image URL: EnterthumbThe variable of the filter must be a valid image URL string. If the input is not an image URL or is empty, the behavior of the filter may not be as expected.
  3. Processed URL:thumbThe thumbnail URL returned by the filter is the one processed by the system, usually with some suffixes or prefixes added to the original image path (such as_thumbOr size information), but this is transparent to the template user, we just need to know that it can get the correct thumbnail address.

In general,thumbThe filter is a very useful tool in Anqi CMS template, which encapsulates the complex logic of image thumbnail generation and path conversion, allowing template developers to implement image optimization in the simplest way, thereby bringing better performance and user experience to the website.

Frequently Asked Questions (FAQ)

Q1: Why did I use{{ 图片地址|thumb }}After that, is the large image still displayed on the page or is the image not displayed?A1: This is usually because the thumbnail-related configuration in the "Content Settings" of the Anqi CMS backend is not set correctly or is not enabled.Please check and make sure that you have configured the 'Thumbnail Size' and 'Thumbnail Processing Method' in the 'Content Settings', and that the related image generation service is running normally.

Q2:item.Thumbanditem.Logo|thumbWhat is the difference? Which one should I use?A2:item.ThumbThis usually refers to the thumbnail value of an article or category, which is specifically uploaded or automatically extracted and processed by the system when the content is published, and it is already a thumbnail URL.item.Logo|thumbThis isitem.LogoThis is the original image URL used for the main or cover imagethumbThe filter dynamically generates or retrieves the thumbnail URL corresponding to it. If you already have a dedicated thumbnail field (such asitem.Thumb), use it first; if you only have the original large image field (such asitem.LogoBut if you need to display its thumbnail version, then use{{ item.Logo|thumb }}is the most convenient way.

Q3:thumbWhat image formats do the filters support for thumbnail generation? Does it support WebP?A3:thumbThe filter can handle common image formats supported by the Anqi CMS system (such as JPG, PNG, GIF).As to whether thumbnails in WebP format are supported, it depends on whether you have checked and enabled the 'Whether to start Webp image format' option in the background 'Content Settings'.If enabled, the system will convert the generated thumbnails to WebP format (if the browser supports), thereby further optimizing the image volume.

Related articles

How does the `stringformat` filter customize the formatted output of any variable like Golang's `fmt.Sprintf()`?

In content operation, the way content is presented often determines the first impression and reading experience of users.Sometimes, simple variable output cannot meet our needs for fine-grained data formatting display, such as retaining fixed decimal places for numbers or adding specific text before output.AnQi CMS provides powerful content rendering capabilities for template developers and content operators, and the `stringformat` filter is a key tool for achieving refined output.It is like the `fmt.Sprintf()` function in Go language, which can format the output of any variable according to custom specifications

2025-11-08

How `split` and `make_list` filters split a string into an array by a specified delimiter or character?

In Anqi CMS template development, flexibly handling string data is an indispensable skill for building dynamic pages.Sometimes, we need to split a long string into a data list using a specified character or string as a delimiter (which is what we commonly call an array);At other times, we may need to process each character of the string independently.AnQi CMS provides two very practical filters: `split` and `make_list`, which can help us easily meet these needs.###

2025-11-08

How to slice a string or array elements within a specified range using the `slice` filter?

The AnQiCMS template engine provides rich filters, giving you great flexibility in displaying content.Among them, the `slice` filter is a very practical tool that can help you accurately extract elements within a specified range of strings or arrays, whether you want to display an article summary, limit the number of images, or handle other data segments, it can be very useful.### The working principle of the `slice` filter The syntax of the `slice` filter is concise and clear: `{{ obj|slice:"from:to" }}`

2025-11-08

How to search and replace specific keywords in the `replace` filter of the Anqi CMS template?

In the daily content management and template design of AnQi CMS, we often encounter scenarios where we need to search and replace specific content in strings.Whether it is to unify brand names, filter sensitive words, or adjust the display format of some text, manually modifying a large amount of content is undoubtedly cumbersome and inefficient.Fortunately, AnQi CMS provides a very practical template filter——`replace`, which can help us easily implement these string operations.### `replace` filter

2025-11-08

How do the `trim`, `trimLeft`, and `trimRight` filters remove spaces or specific characters from the beginning or end of a string?

In website operation and content management, we often encounter the need for string processing, especially in data entry, content display, or API interaction.For example, the user may have mistakenly entered multiple spaces before and after the text box, or some data may have been sourced with unnecessary specific characters.These seemingly minor issues may affect the layout and aesthetics of the content, even causing functional abnormalities.The AnQi CMS template engine provides a series of powerful filters to help us easily deal with these string cleaning tasks.Today, let's get to know the three very practical filters: `trim`

2025-11-08

How to handle truncation and add an ellipsis when truncating text with `truncatechars` and `truncatewords` filters, including HTML content?

In the increasingly fragmented information consumption era, the way websites present content directly affects user experience.Whether it is the abstract of an article list, the preview of product introduction, or various information stream cards, we need to convey the core information within a limited space while maintaining the page's neatness and uniformity of layout.This introduces the need for text truncation. AnQiCMS, as a fully functional content management system, understands this well and provides us with a powerful text truncation filter, especially its intelligent processing capabilities for HTML content, making content operations more relaxed.

2025-11-08

How to safely truncate text with HTML tags using `truncatechars_html` and `truncatewords_html` filters to prevent structure damage?

In website content operation, we often need to display the summary or part of the content in different scenarios, such as on the list page, search results, or related recommendations.This is when you need to truncate the content.If the content is plain text, a simple character or word cutter can handle the task well.However, when the content is rich in HTML tags, the problem becomes complex: directly cutting may cause the HTML tags to be truncated, thereby destroying the page structure, causing display errors, and even affecting the user experience.

2025-11-08

What are the differences between the `urlencode` and `iriencode` filters in URL parameter encoding, and which scenarios are they applicable to?

In website operation, the construction and processing of URL (Uniform Resource Locator) is a fundamental and critical task.It is crucial to properly encode URLs when dynamically generating links, handling user input as parameters, as it ensures the validity of the links, prevents garbled text, and potential security issues.AnQiCMS provides the `urlencode` and `iriencode` filters to help us better manage special characters in URLs.Although they are all used for encoding, their application scenarios and processing methods are different.

2025-11-08