Does the `thumb` filter in AnQi CMS support specifying the width and height of the thumbnail, or only fetching the cropped URL?

When using Anqin 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 helps us easily generate and obtain the thumbnail address from a complete image URL. However, many friends may be curious about thisthumbDoes the filter support specifying the width and height of thumbnails directly when in use? Or does it simply return a cropped image URL?

thumbHow does the filter work?

In AnQi CMSthumbThe filter is designed to be very simple and efficient, its main function is to return a thumbnail path after processing 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 thumbnail width and height parameters in the template.This is an enterprise CMS specifically designed to achieve a more centralized and efficient image management strategy.

Unified management of thumbnail size and processing methods

If you want to adjust the size, cropping method, and other aspects of thumbnails on the website, you need to log in to the AnQi CMS backend.All thumbnail generation rules are unified in the 'Content Settings' on the backend.

  1. Enter the backend settings:Log in to the AnQi CMS background management interface.
  2. Navigate to content settings:Find the "Background Settings" in the left menu and click the "Content Settings".
  3. Adjust the thumbnail configuration:On this page, you will see several key options to control the thumbnail generation:
    • Thumbnail processing method:You can choose different image processing strategies, such as "Zoom to the longest side proportionally" (maintain image ratio, but may have blank space or inaccurate size), "Add padding to the longest side" (ensure fixed width and height, and fill the insufficient part with background color), or "Crop to the shortest side" (center裁剪to fill the fixed width and height, may lose 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 to200x150Pixels. Once set, the system will strictly process thumbnails according to this size.
    • Default thumbnail: If the content does not upload a thumbnail, you can specify a default image to display instead, which helps maintain the visual consistency of the website.

This global configuration method brings many benefits:

  • Site-wide consistency:Ensures that all thumbnails on the website are consistent in size and style, enhancing the user experience.
  • Simplify template development:Developers do not need to set the size repeatedly at each image call, just pay attention to the display of the image content.
  • Performance optimization:Image processing is centralized on the server, which can better utilize caching mechanisms, reduce the burden of 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 the templatethumbWhen filtering, it will return a thumbnail URL that meets the requirements based on the rules you have configured in the background "Content Settings". For example, if you have set the thumbnail size to200x150pixels and select "Crop to shortest side":

  • If your article main image (item.Logois800x600pixels, then{{ item.Logo|thumb }}the returned will be a200x150pixels, and cropped thumbnail URL.
  • Similarly, if you are calling the article's preset thumbnail fielditem.ThumbThis field is the thumbnail URL generated by the background when the article is published, based on the image you upload and the global settings.

The following are some templates.thumbExample of using a filter:

{# 获取文章的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 is indeed responsible for obtaining the cropped and processed URL, it does not accept additional width and height parameters because these are already predefined in the background.It is used to convert the original image address into a thumbnail address that complies with the background settings, so that your images can be presented in a**state in different scenarios.

Summary

In general, the Anqi CMSthumbThe filter is a powerful and convenient tool that automates the generation and management of thumbnails through unified backend configuration.This design philosophy not only simplifies template development and improves website performance, but also ensures the professionalism and consistency of content display, allowing us to focus more on content creation itself.

Frequently Asked 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.By centrally configuring the 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 front-end template, and is conducive to server-side image caching and performance optimization.If customizing the size frequently in the template can lead to chaos in management and performance degradation.

2. If I have not set the 'thumbnail size' in the background,thumbwhat will the filter return?Based on experience, if the thumbnail size is not explicitly set in the backend, the system usually has a default image processing mechanism (for example, it may return the original image link or a preset 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 backend "Content Settings" according to the website requirements