The `thumb` filter can be used to process the image URL obtained from `categoryDetail` or `pageDetail`?

When using the AnQiCMS template, we often encounter the need to handle image links, especially for thumbnail display. The system provides multiple methods to obtain images, one common issue is aboutthumbthe filter meetscategoryDetailorpageDetailThe combination of image fields in the tag.

First, let's understand the basic logic of AnQiCMS in image processing.AQuantCMS is committed to providing efficient content management, which also includes optimizing image resources.In the background content settings, we can configure the thumbnail processing method, size, and even set a default thumbnail.This means that the system has already intelligently processed the thumbnail version of the image when uploading or generating content.

When we go throughcategoryDetailTag to get category information, or through.pageDetailWhen getting the details of a single page, these tags' data structure usually contains a field namedThumbThe field. It can be seen from the document that whether it is a category detail or a single page detail, itsThumbThis field directly returns the thumbnail address after system processing. For example, when you need to display a category thumbnail, you can call it directly like this:

<div>分类缩略图：<img style="width: 200px" src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" /></div>

Or get the thumbnail of a single page:

<div>单页缩略图大图：<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" /></div>

As you can see,ThumbThe field has provided us with a ready-made thumbnail URL, and we do not need to perform any additional thumbnail processing.This is because AnQiCMS has already pre-generated and stored these thumbnails during the content creation and management process.

Then, when should we use it?thumbWhat about the filter?

thumbfor example, a filter (such as{{ image|thumb }}The original intention of the design of ) is to handle thoseOriginal, full-size image URLIt is used to dynamically convert it into a thumbnail. It is not intended for reprocessing images that have already been thumbnail processed.Imagine if your template has a custom field storing the original large image address of the article, or if you are loopingbannerListwas obtained at that timeitem.Logo(It is usually the original image), and you want to display it as a thumbnail in some place, at this timethumbThe filter comes into play. It will dynamically generate or return a thumbnail of the corresponding size based on this original image URL.

For example, when iterating over the Banner list, if you want to shrink the Banner's Logo image:

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

Here, item.Logois the original image address, through|thumbThe filter, we got its thumbnail version.

In summary, when you are usingcategoryDetailorpageDetailtags to get images, if you get isThumbThe field is already a thumbnail URL, you can use it directly. You do not need to apply it again.thumbfilter.thumbThe filter is mainly used to handle cases where you know the original large image URL and want AnQiCMS to dynamically generate its thumbnail.Understanding these two ways of obtaining and processing image URLs can help us display images more efficiently and accurately in the AnQiCMS template, and also better utilize the system's built-in image optimization capabilities.

Frequently Asked Questions (FAQ)

1. I can directly pass thecategoryDetailorpageDetailObtainedLogofield (usually a large image) tothumbDo the filter perform thumbnail processing?Absolutely, you can.LogoThe field usually returns the original large image address (or a larger image) for categories or single pages. If you want to display it in the template in a different wayThumbThe default thumbnail size provided to displayLogocan be used to{{ categoryDetail with name="Logo" }}or{{ pageDetail with name="Logo" }}The result, then through|thumbThe filter is processed. For example:<img src="{{ categoryDetail with name='Logo' }|thumb}" />.

2.thumbIs the thumbnail size generated by the filter fixed? Can I customize it? thumbThe thumbnail size generated by the filter is determined by the "Thumbnail Size" configured in the "Content Settings" of the AnQiCMS backend.If you need thumbnails of different sizes, you can adjust these global settings in the background.But it should be noted that these settings are applied to the entire site. If you want to implement more fine-grained on-demand customization of size, you may need to consider processing multiple sizes at the time of image upload, or using custom fields to store links to different size images.

3. If I amThumbField reusingthumbwhat will happen?In most cases, applying the thumbnail URL again to an image that has already been thumbnail processedthumbFiltering is redundant. According to AnQiCMS logic,ThumbThe field is itself a thumbnail URL, re-filtering may not produce additional image size changes, or may return the same result. **Practicality is to avoid this redundant operation and use directly.Thumbfield.