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

When managing website content in AnQiCMS, image processing is undoubtedly a key factor in improving user experience and page loading speed.A website that can intelligently present thumbnails of appropriate sizes based on different display scenarios can not only greatly improve page response speed but also make the visual layout more coordinated and beautiful.The AnQi CMS provides a powerful and flexible thumbnail image processing mechanism, which can be easily realized whether through unified settings in the background or by calling it as needed 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 settingsand then selectContent settings. On this page, you will find several options closely related to image processing

The most core one isThumbnail Processing Method. AnQiCMS provides three fine image processing strategies to meet different design needs:

  1. Scale proportionally to the longest side: Choose 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. Fill the longest side: If you need to strictly fix the size of the image thumbnail (for example, all thumbnails are 200x200 pixels) and do not want to crop the image, 'pad to the longest side' is an ideal choice.The system will first resize the image proportionally based on the longest side to fit within the specified size range, and then fill the surrounding parts of the image with white (or transparent) background to make the thumbnail reach the exact size specified.
  3. Trim according to the shortest edgeThis processing method aims to obtain a thumbnail with a fixed size and a compact image.The system will first resize the image proportionally by the shortest side to match the set size, then crop from the center area of the image to achieve the exact width and height you specified.Although this may result in some of the content at the edges of the image being cropped, it ensures that all thumbnails maintain a consistent size visually, which is very suitable for grid layouts or product lists.

ThenThumbnail Processing Methodof, isThumbnail 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'sThumbA field that does not specify size, the system will display the thumbnail according to the default size configured here.

In addition, to handle cases where images are not included in the document or content, the system also supports setting oneDefault thumbnail. When a piece of 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 are made, you don't have to worry that the previously uploaded images will not take effect. AnQiCMS provides a convenientbatch regenerate thumbnailsThe function can be used with one click to regenerate the thumbnails of all uploaded images according to the new settings, ensuring consistency in the display of images across the entire site.

Template Integration: How to Flexibly Call Different Sizes of Images on the Front End

After the image processing rules are set up on the backend, the next step is to flexibly use these processed images in the front-end template.AnQiCMS's template engine supports Django template syntax, combining built-in tags and filters to make image calls very convenient.

In the AnQiCMS template, many content tags, such asarchiveDetail(Document Details),archiveList(Document list),categoryDetail(Category Details),pageDetail(Single Page Details) and others, are provided directly.Logo(usually refers to the original 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 settingsThe default thumbnail size and processing method configured to display the image.

However, in the actual design of websites, we often need to display images of different sizes in different scenarios.For example, an article list may require a thumbnail of 150x100, while related recommendations may need an image of 80x60. At this point,thumbThe filter comes in handy.

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

For example, assumeitem.LogoIt is the cover image of the article, would you like to display a 200x150 pixel thumbnail on the list page:

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

If you only need to fix the width while allowing the height to scale proportionally, you can set the height to0:

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

Conversely, if you only fix the height while allowing the width to scale proportionally, then you will set the width to0:

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

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

For document, category, or single page group images (viaImagesfield retrieval), we can also apply the filter to each image in the loopthumbto achieve a unified display effect:

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

**Practice and Suggestions

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 the consistency of the overall design, it is recommended that you set a uniform image size for similar modules (such as all article lists).
  • Responsive design is also considered.: In usethumbWhen using the filter, it can be combined with CSS responsive layout to ensure that images display well on different devices.
  • Optimize the original image: Although AnQiCMS performs thumbnail processing, the quality and file size of the uploaded original images are still very important.It is recommended to compress and optimize the original image before uploading to avoid uploading large original files.
  • Utilizealtproperty: Whether it is the original image or the thumbnail, don't forget to<img>tagsaltProperty, this not only helps SEO, but also provides friendly text hints when the image fails to load.

By using the above method, AnQiCMS allows website operators and template developers to efficiently and flexibly manage and display website images, providing users with a more smooth and beautiful browsing experience.

Frequently Asked Questions (FAQ)