How to configure and display thumbnails with different processing methods (such as cropping, scaling)?

Drive AnQi CMS thumbnail: fine-tuning configuration and flexible display, creating visual impact

In website operation, images are undoubtedly the key elements that attract users and enhance the quality of content.While thumbnails, as the first visual point of website content, their display effect directly affects users' desire to click and the overall beauty of the page.AnQi CMS knows this and provides us with flexible thumbnail configuration and display capabilities, helping us easily manage and present high-quality image content.

Core configuration: thumbnail management in the background content settings

The thumbnail configuration of AnQi CMS is mainly located in the "Content Settings" module of the backend.To get here, we just need to enter the background management interface, find the "Background Settings" in the left menu, and then click "Content Settings."}Here, we will see a series of options related to image processing, which together constitute the generation logic of the website thumbnail.

Among the most critical are the 'thumbnail processing method' and 'thumbnail size' options.

Understand the different thumbnail processing methods.

The AnQi CMS provides three different thumbnail processing methods to meet various design and display needs:

1. Scale proportionally to the longest sideThis method aims to preserve the original content of the image, avoiding any cropping.The system will find the longest side of the image (either width or height) based on the thumbnail size we set and scale it proportionally from that basis.The thumbnail generated will have its longest side equal to the size we set, and the other side will be adjusted proportionally.

   • Applicable scenariosWhen the integrity of the image is crucial and no part should be cropped, for example, product close-ups, art work display, etc.This method ensures that the image content is not missing, but in some layouts, different proportions of images may lead to visual misalignment or blank spaces.

2. Fill the longest side: If we have strict size requirements for thumbnails, hoping that all thumbnails will present a uniform aspect ratio, and at the same time not want to crop the image content, then 'filling with whitespace on the longest side' is the ideal choice.The system will first resize the image proportionally along the longest side to fit the specified size, then fill the insufficient part of the image (usually the shorter side) with white or other specified color until the preset thumbnail size is reached.

   • Applicable scenariosVery suitable for grid layouts, card display, and other scenarios that require strict uniform dimensions.For example, news lists, product albums, etc., can ensure that all thumbnails are visually uniform, enhancing the professionalism of the website.

3. Trim according to the shortest edge：“Trimming to the shortest edge” is a more direct approach, which ensures that the thumbnail will ultimately present the size and ratio we set.The system will first center the image, then crop it based on the shorter edge of the image to remove the excess part.

   • Applicable scenariosWhen we need a unified image size and the main information of the image is concentrated in the central area, this method is very effective.For example, portraits, cover images, and others can quickly generate thumbnails that meet design requirements, highlighting the visual focus.It should be noted that if the key information of the picture is located at the edge, it may be lost in the cropping.

Set thumbnail size

After selecting the appropriate method, the setting of "thumbnail size" is also crucial.Here you usually need to enter a width value and a height value, for example, '200x150'.This size will guide the system on how to generate the final thumbnail.Setting the size reasonably can effectively reduce the file size of images, speed up page loading, and improve user experience.Suggest determining a size based on the actual design requirements of the website and the image display area.

Other related configuration items

In addition to the above core settings, there are some options related to image processing that are worth paying attention to:

• Default thumbnailWe can upload an image as the default thumbnail. When the document or content does not upload its own thumbnail, the system will automatically use this default image to replace it, to avoid the embarrassment of blank pages or missing images.
• batch regenerate thumbnailsWhen the thumbnail configuration of the website changes (for example, the processing method or size is modified), you can use this feature to batch regenerate the thumbnails of all uploaded content with one click to ensure the consistency of the display of images throughout the site.
• Whether to automatically compress large images: Enable this feature and set 'Auto-compress to specified width', which can automatically compress images when the user uploads images that are too large, helping to control the image storage space and loading speed of the website.
• Whether to enable Webp image formatConvert images to WebP format automatically, which can significantly reduce image size while maintaining high image quality, further optimizing website performance.

Flexibly use: Thumbnail display in the template

After configuring the thumbnail generation rules on the backend, the next step is to call and display these thumbnails in the front-end template.The Anqi CMS template language is concise and efficient, calling thumbnails is very convenient.

Generally speaking, when we go througharchiveList(Document list),categoryList(Category list),pageList(Single-page list) and other tags to obtain content data, eachitem(Whether it is a document, category, or single page) it will contain oneThumbfield that directly points to the thumbnail URL generated after the system processes the background settings.

For example, when displaying a document list:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                {% if item.Thumb %}
                    <img alt="{{item.Title}}" src="{{item.Thumb}}">
                {% endif %}
            </a>
        </li>
    {% endfor %}
{% endarchiveList %}

And on the document detail page, we can also directly access through:archiveDetailthe tag to get the thumbnail of the current document:

<div>
    {% archiveDetail with name="Thumb" %}
</div>

Or use a variable to receive and display it:

{% archiveDetail archiveThumb with name="Thumb" %}
<img src="{{archiveThumb}}" alt="文档缩略图"/>

For category or single-page thumbnail calls, the logic is similar:

{# 分类缩略图 #}
{% categoryDetail categoryThumb with name="Thumb" %}
<img src="{{categoryThumb}}" alt="分类缩略图" />

{# 单页缩略图 #}
{% pageDetail pageThumb with name="Thumb" %}
<img src="{{pageThumb}}" alt="单页缩略图" />

Moreover, Anqi CMS also providesthumbA filter that can be applied to any image URL in the template to use the system-defined thumbnail processing rules. This means that even if you have a nonThumbThe field's image URL, which can also be processed uniformly with this filter. For example:

{% bannerList banners %}
    {% for item in banners %}
        <a href="{{item.Link}}" target="_blank">
            <img src="{{item.Logo|thumb}}" alt="{{item.Alt}}" /> {# 对Banner图片的URL应用缩略图处理 #}
            <h5>{{item.Title}}</h5>
        </a>
    {% endfor %}
{% endbannerList %}

By these flexible calling methods, we can ensure that all images on the website, whether content thumbnails or other image resources, are presented to users in a unified and optimized manner.

Use Tips and Optimization Suggestions

• Responsive Design: In addition to backend settings, use front-end CSS with images,max-width: 100%; height: auto;and other properties to ensure that thumbnails display well on different devices.
• Balancing quality and performance: Although AnQi CMS provides automatic compression and WebP conversion features, it is still recommended to use high-quality but appropriately sized images when uploading original images, as this is the basis for optimizing website loading speed.
• SEO optimizationIn<img>Tagged,altThe attribute is indispensable. It not only helps search engines understand the content of the image, but also provides text descriptions when the image cannot be loaded, enhancing user experience and website accessibility.

By the above configuration and call, we can easily manage and display thumbnails of different processing methods in Anqi CMS, making the website's image content more professional, beautiful, and efficient.

Common questions (