How to use the `thumb` filter to get a thumbnail image in AnQiCMS?

In a content management system, image thumbnails play a crucial role.They can not only accelerate page loading speed and optimize user experience, but also maintain visual consistency in various layouts, especially in list pages, recommendation positions, and other scenarios, which is particularly important.thumbThe filter is a powerful tool to implement this function.

Understand the AnQiCMS image processing mechanism

Further understandthumbBefore the filter, we first need to know how AnQiCMS handles images.When we upload images to the system or insert images into the content, AnQiCMS will process these images according to the backend configuration.

  1. Automatically extract thumbnailsIf the document content contains images and we have not manually uploaded thumbnail images, the system will automatically extract the first image in the content as a thumbnail.
  2. Thumbnail size and processing methodthumbThe filter finally generates the style of the thumbnail.
  3. Default thumbnail: We can also set a 'default thumbnail', which the system will use to replace when there is no image or the image processing fails.

Understanding this background knowledge helps us better understandthumbThe principle of operation of the filter.

thumbThe core usage of the filter.

thumbThe filter is a practical tool in the AnQiCMS template engine, its function is to receive the complete path (URL) of an image file, and then return the thumbnail path (URL) of the image processed by the AnQiCMS background configuration.

The basic usage is very intuitive, you just need to pass the variable containing the image path through a pipe|pass tothumbfilter:

{{ 图片路径变量 | thumb }}

For example, if you are in a loop,item.LogoRepresented the cover original image path of the article or product, we can get its thumbnail like this:

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

here,item.LogoIt will first get the original image address, then|thumbThe filter will generate or return the thumbnail path of the corresponding size based on the thumbnail size and processing method defined in the background "Content Settings".The browser will eventually load the image from this thumbnail path instead of the original large image, thus optimizing the loading speed.

thumbThe actual application scenarios of the filter

thumbThe filter is very flexible in AnQiCMS template creation and can be applied to various scenarios that require displaying thumbnails.

Display thumbnails on the content list page.

Whether it is an article list, product list, or other custom model content list, we usually need to display a beautiful thumbnail. Suppose we are usingarchiveListTag loop outputs document list:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{ item.Link }}">
            <h5>{{ item.Title }}</h5>
            {% if item.Logo %} {# 检查是否存在封面原图 #}
            <img alt="{{ item.Title }}" src="{{ item.Logo | thumb }}">
            {% endif %}
            <p>{{ item.Description }}</p>
        </a>
    </li>
    {% endfor %}
{% endarchiveList %}

Here, item.LogoIt usually stores the original uploaded image path, through|thumbThe filter ensures that the thumbnails displayed on the list page match the background configuration.

Retrieve thumbnail in document detail page

Although the detail page mainly displays the content, sometimes we may need to display the current document's thumbnail again in a sidebar or related recommendation area.

{% archiveDetail archive with name="Id" %} {# 假设这里获取当前文档的archive对象 #}
<div class="document-thumbnail">
    {% if archive.Logo %}
    <img src="{{ archive.Logo | thumb }}" alt="{{ archive.Title }}">
    {% else %}
    <img src="{% system with name="SiteLogo" %}" alt="Default Image"> {# 使用系统默认Logo作为备用 #}
    {% endif %}
</div>

Pictures applied to categories, single pages, or tags

AnQiCMS not only provides a thumbnail feature for documents, but categories, single pages, and tags may also have their own pictures (such ascategoryDetailofLogo.pageDetailofLogofield).thumbThe filter also applies to these scenarios, ensuring that all places requiring thumbnails are processed according to a unified standard.

For example, to get the thumbnail of a category:

{% categoryDetail categoryLogo with name="Logo" %}
{% if categoryLogo %}
<img src="{{ categoryLogo | thumb }}" alt="{% categoryDetail with name="Title" %}">
{% endif %}

Advanced tips and注意事项

  • Background configuration takes priority:thumbThe thumbnail size and cropping method generated by the filter is completely dependent on the configuration in the 'Content Settings' of the AnQiCMS backend.If the thumbnail does not display as expected, first check these background settings.
  • Not 'real-time generation':thumbThe filter provides a processed image URL in the template.AnQiCMS will generate these thumbnail files and store them when the image is uploaded or on the first request, rather than processing the images in real-time every time the page is loaded.This means that if you modify the thumbnail settings in the background, you may need to use the background's 'Batch Regenerate Thumbnails' feature to update the thumbnail versions of old images.
  • The source of the image path:thumbFilters are usually applied to paths pointing to the original large image. For example,item.LogoIt is often the original large image. While likeitem.Thumborcategory.ThumbThese fields are often directly stored in AnQiCMS with the thumbnail paths generated according to the backend settings. In this case, it is applied again|thumbThe filter may not bring any additional effect, or it may try to generate again, depending on the internal implementation of AnQiCMS. It is usually recommended to use directlyitem.Thumborcategory.ThumbThe value. When we need to process thumbnails for a non-\"Thumb\" field (such asitem.Logo) thumbnails of images,|thumbthe filter can only be of value.
  • how to handle the case when an image does not exist: In usethumbWhen filtering, be sure to consider the possibility that the image may not exist. Through{% if 变量 %}Make a judgment, or set the "default thumbnail" in the background, which can effectively prevent placeholder images from appearing on the page.

By mastering the use ofthumbFilter, we can easily implement efficient and beautiful image display on the AnQiCMS site, greatly enhancing the professionalism and user experience of the website.

Frequently Asked Questions (FAQ)

**Q1:item.Logoanditem.ThumbIn