How to process thumbnails and display images of different sizes in AnQiCMS templates?

In AnQiCMS, managing website content, image processing is undoubtedly a key element to enhance user experience and page loading speed.An website that can intelligently present thumbnails of appropriate size based on different display scenarios can not only greatly improve the page response speed, but also make the visual layout more coordinated and beautiful.This CMS provides a powerful and flexible image thumbnail processing mechanism, which can be easily implemented whether through unified settings in the background or on-demand calls in the front-end template.

Back-end content settings: Define the 'basic rules' for thumbnail processing

To start the thumbnail processing of the image, we first need to make some global settings in the AnQiCMS backend.These settings will serve as the "basic rules" for the system to automatically generate and process image thumbnails.

You can navigate toBackend settingsthen selectContent Settings. On this page, you will find several options closely related to image processing.

The most core of which isThumbnail processing method。AnQiCMS provides three fine image processing strategies to meet different design needs:

  1. Scale proportionally by the longest side：Select this option, the system will ensure that the longest side (width or height) of the image matches the size you set after scaling, while maintaining the original aspect ratio of the image and preventing distortion.The advantage of this method is that the image content is displayed completely without cropping any part, but the disadvantage is that the generated thumbnail may not strictly conform to the exact width and height you set.
  2. Scale proportionally by the longest side with padding：If you need to strictly fix the size of image thumbnails (for example, all thumbnails are 200x200 pixels) but do not want to crop the image, 'Pad to longest side' is an ideal choice.The system will first resize the image proportionally based on the longest side to fit completely within the specified size range, then fill the surrounding insufficient parts of the image with white (or transparent) background to make the thumbnail reach the exact specified size.
  3. [en] : Crop to the shortest edge.

NextThumbnail processing methodisThumbnail sizeThe settings. The width and height set here will be used as the default size for automatically generating thumbnails. For example, if you directly call the document'sThumbThe field is not specified with size, the system will display the thumbnail according to the default size configured here.

Moreover, in case the document or content does not include any images, the system also supports setting oneDefault Thumbnail. When a content does not have its own thumbnail, this default image will be automatically filled to ensure that the page display does not appear blank.

When you adjustThumbnail processing methodorThumbnail sizeThese global settings do not need to worry that the previously uploaded images will not take effect. AnQiCMS provides a convenientBatch regenerate thumbnailsFunction, one-click operation can regenerate thumbnails of all uploaded images according to the new settings, ensuring consistency of image display throughout the site.

Template Integration: How to flexibly call different sized images on the front end

After the background settings have configured the image processing rules, the next step is to flexibly use these processed images in the front-end template.AnQiCMS template engine supports Django template syntax, combined with built-in tags and filters, making image calls very convenient.

In AnQiCMS templates, many content tags such asarchiveDetail(Document Details),archiveList(Document List),categoryDetail[en] (category details),pageDetail(Single-page Details) are provided directlyLogo(usually refers to the original image or large image) andThumb(thumbnail) field for us to call. When you use it directly{{item.Thumb}}or{{archive.Thumb}}the system will automatically according to the backgroundContent SettingsUsing the default thumbnail size and processing method configured in the settings to display images.

However, in actual website design, we often need to display images of different sizes in different scenarios.For example, the article list may require thumbnails of 150x100, while related recommendations may require images of 80x60.thumbThe filter comes in handy.

thumbThe filter is a powerful tool provided by AnQiCMS, which allows you to dynamically specify the width and height of images in the template, even if these dimensions are not preset in the background. Its basic usage is very intuitive: {{ 图片地址|thumb:"宽度x高度" }}.

For example, supposeitem.LogoThis is the cover image of the article, you want to display a thumbnail of 200x150 pixels on the list page:.

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

If you only need a fixed width while allowing the height to scale proportionally, you can set the height to:0:

{# 显示宽度为300px，高度按比例缩放的缩略图 #}
<img src="{{ item.Logo|thumb:'300x0' }}" alt="{{ item.Title }}" />

The opposite, only fix the height while allowing the width to scale proportionally, then set the width to0:

{# 显示高度为180px，宽度按比例缩放的缩略图 #}
<img src="{{ item.Logo|thumb:'0x180' }}" alt="{{ item.Title }}" />

This flexibility allows you to generate any thumbnail you need without uploading multiple images of different sizes.AnQiCMS will automatically generate and cache the thumbnail of a specific size on the first request, and subsequent visits will directly read from the cache, greatly improving efficiency.

For a group of images contained in a document, category, or single page (ImagesField retrieval), we can also apply it to each picture in the loop:thumbFilter to achieve a unified display effect:

{% archiveDetail archiveImages with name="Images" %}
{% for img in archiveImages %}
    {# 为组图中的每一张图片生成120x90的缩略图 #}
    <img src="{{ img|thumb:'120x90' }}" alt="图片描述" />
{% endfor %}
{% endarchiveDetail %}

[en] Practical Tips

When dealing with image processing and template calls, there are some suggestions that can help you further optimize website performance and user experience:

  • Maintain consistency: AlthoughthumbThe filter is very flexible, but for consistency in overall design, it is recommended that you set uniform image sizes for similar modules (such as all article lists).
  • Balances responsive design: When usingthumbThe filter can be combined with CSS responsive layout to ensure that images display well on different devices.
  • Optimize the original image：Although AnQiCMS will process thumbnails, the quality and file size of the original uploaded image are still very important.Suggest to compress and optimize the original image before uploading, to avoid uploading overly large original files.
  • UtilizealtProperty: Whether it is the original image or the thumbnail, don't forget to add<img>Label addaltProperties, this not only helps SEO, but also provides a friendly text prompt when images fail to load.

Through the above method, AnQiCMS enables website operators and template developers to efficiently and flexibly manage and display website images, providing users with a smoother and more beautiful browsing experience.

Common Questions and Answers (FAQ)