Does the `thumb` filter in the Anqi CMS support specifying the width and height of thumbnails, or only obtaining the cropped URL?

When using the Anqi CMS for website content management, we often need to handle images, especially thumbnails for articles or products. At this time,thumbThe filter comes into play. It can help us easily generate and obtain the thumbnail address from a complete image address. However, many friends might be curious about, thisthumbDoes the filter support specifying the width and height of the thumbnail directly when used? Or does it just return a cropped image URL?

thumbHow the filter works

In the Anqi CMSthumbThe filter is designed to be very concise and efficient, its main function is to return a thumbnail path after the system processes the original image path you provide. For example, if you have an original image addresshttp://yourdomain.com/uploads/original.jpgThrough{{ item.Logo|thumb }}This usage will return something similarhttp://yourdomain.com/uploads/thumb_original.jpgOr a URL with specific size parameters.

But the key is,thumbThe filter itself does not directly support specifying the width and height parameters for thumbnails in the template.This is designed specifically by AnQi CMS to achieve a more centralized and efficient image management strategy.

Unified management of thumbnail size and processing method

If you want to adjust the size, cropping method, and other settings of thumbnails on the website, you need to log in to the Anqi CMS backend.All thumbnail generation rules are configured in the "Content Settings" in the background.

  1. Enter background settings:Log in to the AnQi CMS background management interface.
  2. Navigate to content settings:Find 'Background Settings' in the left menu and click 'Content Settings'.
  3. Adjust the thumbnail configuration:On this page, you will see several key options to control the generation of thumbnails:
    • Thumbnail processing method:Here you can choose different image processing strategies, such as 'Proportional scaling by the longest side' (maintains image ratio but may have blank areas or imprecise dimensions), 'Fill by the longest side' (ensures fixed width and height, with insufficient parts filled with background color), or 'Crop by the shortest side' (center-crop to fill fixed width and height, which may result in the loss of edge content).Choose the way that best suits your website layout and image display needs.
    • Thumbnail size: This is where you set the uniform width and height for all thumbnails. For example, you can set it to200x150Pixel. Once set, the system will strictly process the thumbnail according to this size when generating thumbnails.
    • Default thumbnail:Even if no thumbnail is uploaded, you can specify a default image to display instead, which helps maintain the visual consistency of the website.

This global setting method brings many benefits:

  • Unified site:Ensures consistency in size and style of all thumbnails on the site, enhancing user experience.
  • Simplify template development:The developer does not need to set the size repeatedly at each image call, just focus on the display of the image content.
  • Performance optimization:Image processing is performed on the server side, which can better utilize the cache mechanism, reduce the burden on front-end rendering, and help improve the website loading speed.
  • Operation efficiency:When you need to adjust the thumbnail style, just modify it once in the background, and the entire site will update automatically, greatly improving operational efficiency.

thumbThe actual application of the filter

When you actually use it in the templatethumbThe filter will return a thumbnail URL that meets the requirements based on the rules you have configured in the "Content Settings" on the backend. For example, if you have set the thumbnail size in the backend.200x150Pixel and select "Crop to shortest side":

  • If your main article image (item.Logo) is800x600pixels, then{{ item.Logo|thumb }}the returned will be a200x150The URL of the thumbnail, which is pixelated and cropped.
  • Similarly, if you are calling the predefined thumbnail field of the articleitem.ThumbThis field is the thumbnail URL pre-generated by the background when the article is published, based on the image you upload and the global settings.

The following are some templates inthumbHere are some examples of filter usage:

{# 获取文章的Logo图片，并使用thumb过滤器生成缩略图 #}
{% archiveDetail archiveItem with name="Logo" %}
<img src="{{ archiveItem|thumb }}" alt="文章标题缩略图" />

{# 如果你想直接获取文章的预设缩略图，可以直接调用item.Thumb，它已经是处理好的缩略图地址了 #}
{% archiveDetail archiveThumb with name="Thumb" %}
<img src="{{ archiveThumb }}" alt="文章预设缩略图" />

{# 对于其他图片字段，比如Banner列表中的图片，也可以使用thumb过滤器 #}
{% bannerList banners %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo|thumb}}" alt="{{item.Alt}}" />
    </a>
    {% endfor %}
{% endbannerList %}

Therefore,thumbThe filter indeed only retrieves the cropped and processed URL, as it does not accept additional width and height parameters, as these are already predefined in the background.Its function is to convert the original image address into a thumbnail address that conforms to the backend settings, so that your images can be presented in**status**in different scenarios.

Summary

In general, what about the security CMS?thumbFilter is a powerful and convenient tool that achieves the automatic generation and management of thumbnails through unified background configuration.This design philosophy not only simplifies template development and enhances website performance, but also ensures the professionalism and consistency of content display, allowing us to focus more on content creation itself.

Common Questions (FAQ)

1. WhythumbFilter does not support specifying width and height directly in the template?The design philosophy of AnQi CMS is to achieve unified management and optimization of image resources.Through centralized configuration of thumbnail size and processing method in the background 'Content Settings', it can ensure the consistency of image display throughout the site, simplify the complexity of the frontend template, and be conducive to image caching and performance optimization on the server side.If customizing sizes frequently in the template leads to management chaos and performance degradation.

2. If I have not set the "Thumbnail Size" in the background,thumbwhat will the filter return?According to experience, if the thumbnail size is not explicitly set in the background, the system usually has a default image processing mechanism (for example, it may return the original image link, or resize to a predefined default small size). However, to ensure display quality and performance, it is strongly recommended to set the appropriate thumbnail size and processing method in the 'Content Settings' according to the website requirements.