How to convert the original image address to a thumbnail address for display?

In modern website operations, images play a crucial role, not only enhancing the attractiveness of the content but also effectively conveying information.However, large image files can significantly slow down website loading speed, harm user experience, and even affect search engine rankings.Therefore, converting the original image address to an optimized thumbnail address for display is an important link in website performance optimization.

AnQiCMS as an efficient content management system fully considers the needs of image processing, and built-in powerful thumbnail generation and management functions.By reasonable configuration and template calls, you can easily achieve automatic image processing, making the website content both beautiful and smooth.

How does AnQiCMS intelligently handle images?

AnQiCMS provides high levels of automation and flexibility in image processing. When you upload images or refer to images in content, the system automatically performs a series of processes:

  • Automatically extract and associate: For documents, categories, or single pages, even if you have not manually uploaded a thumbnail, if the content contains images, the system will intelligently extract the first image as the default thumbnail.This greatly simplifies the content publishing process.
  • Generate in multiple sizes：According to your configuration, AnQiCMS can generate different thumbnail versions of the same original image to meet the display needs of different areas of the website.
  • Format optimizationThe system supports automatic conversion of uploaded images to WebP format, which is an image format that can significantly reduce file size while maintaining high quality, further enhancing website loading speed.
  • Large Image Compression: AnQiCMS can also automatically compress images of excessive size, to avoid the direct loading of the original large image causing the page to freeze.

These intelligent processing mechanisms ensure the optimal use of website image resources, providing users with a smoother browsing experience.

Core configuration: Set thumbnails in the background

Make full use of AnQiCMS's image processing capabilities, you first need to configure it in the background. You can go toBackground settings -> Content settingsPage, find the following key options:

  1. Whether to enable WebP image format After enabling this option, new images uploaded in JPG, PNG, and other formats will be automatically converted to WebP format.This is very beneficial for improving image loading speed and saving storage space.If you want the uploaded images to be converted to WebP, AnQiCMS usually provides a batch conversion tool.

  2. Whether to automatically compress large images & automatically compress to a specified widthWhen the size of the image you upload exceeds the expected size, enabling this feature can automatically compress it to the specified width (for example, 800 pixels).This helps control the size of image files and avoid unnecessary bandwidth consumption.Please note that compression is usually performed based on width, and height will scale proportionally.

  3. Thumbnail Processing MethodThis is the core setting that determines the thumbnail display effect, AnQiCMS provides three processing methods, you can choose according to the needs of the front-end design:

    • Scale proportionally to the longest sideThis method preserves the complete content of the image, ensuring that the thumbnail's width or height matches one of the set dimensions, and the other side is scaled proportionally.The image will not be cropped, but may not completely fill a fixed-size container.
    • Fill the longest sideIf you need a fixed-size thumbnail but also want to display the entire image content, you can select this option.The image will be scaled proportionally, and the insufficient part will be filled with white background to center the image within the specified size area.
    • Trim according to the shortest edgeWhen you need to strictly fix the aspect ratio of the thumbnail and are willing to accept some of the image content being cropped, this option is most suitable.The system will crop from the shortest edge to center, ensuring that the thumbnail matches the specified size accurately, commonly used in list pages, cover images, and other scenarios.

  4. Thumbnail sizeHere is the position where you define the specific width and height of the thumbnail. For example, you can set it to200x150. Properly setting the size can effectively reduce the image file size and speed up page loading. It is recommended to set it according to the actual display size of the thumbnail in the website's front-end design.

  5. Default thumbnailSet a default placeholder image for those who have not manually uploaded thumbnails or the system failed to automatically extract thumbnails.This ensures that the website can maintain the beauty and consistency of the layout when the content images are missing.

  6. batch regenerate thumbnailsWhen you have modified the thumbnail size or processing method mentioned above, you can use this feature to have the system regenerate thumbnail versions that match the new settings for all uploaded images.

By these detailed configurations, you can let AnQiCMS automatically manage the thumbnail images of the website according to your wishes.

In the template, call the thumbnail: from the original address to thumbnail display

After configuring the background parameters, the next step is to correctly reference and display these thumbnails in the front-end template.AnQiCMS provides two main calling methods, allowing you to flexibly convert the original image address to a thumbnail address for display.

1. Directly call the thumbnail field built into the model

AnQiCMS's content model (such as documents, categories, and single pages) usually provides a preset image field that directly points to the system-generated thumbnail:

  • Logofield: Usually points to the original uploaded image or a larger image address.
  • Thumbfield: Usually points to the thumbnail address after system processing.

On the document detail page, list page, or category page, etc., you can easily call these fields in the following way:

{# 示例：在文档列表中调用缩略图 #}
{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                {% if item.Thumb %}
                    <img alt="{{item.Title}}" src="{{item.Thumb}}">
                {% else %}
                    {# 如果没有缩略图，可以使用默认缩略图或Logo字段 #}
                    <img alt="{{item.Title}}" src="{% system with name='DefaultThumbUrl' %}">
                {% endif %}
                <h5>{{item.Title}}</h5>
                <div>{{item.Description}}</div>
            </a>
        </li>
    {% endfor %}
{% endarchiveList %}

{# 示例：在分类详情页调用分类缩略图 #}
<div>
    <img src="{% categoryDetail with name='Thumb' %}" alt="{% categoryDetail with name='Title' %}" />
</div>

By direct callitem.ThumborcategoryDetail with name='Thumb'You can ensure that the display is the optimized thumbnail generated by AnQiCMS according to the backend settings.

2. UsethumbThe filter converts any image address to a thumbnail.

This is a direct and powerful method to implement the requirement of 'how to convert an original image address to a thumbnail address for display.' No matter where you get an original image URL (such as images in content editors, custom fields, evenLogoThe original image of the field can be accessed throughthumbThe filter can quickly convert it into a thumbnail address generated by the system.

thumbThe usage of the filter is very simple:{{ 您的图片URL变量 | thumb }}.

{# 示例：将文档Logo字段（原始图地址）转换为缩略图地址 #}
<div>
    原始图片地址: <img src="{% archiveDetail with name='Logo' %}" alt="原始图" />
</div>
<div>
    通过thumb过滤器转换的缩略图地址: <img src="{% archiveDetail with name='Logo' %}|thumb" alt="缩略图" />
</div>

{# 示例：在循环中将多个图片（Images字段）转换为缩略图 #}
{% archiveDetail archiveImages with name="Images" %}
    <div>文档封面图片缩略图：
        {% for item in archiveImages %}
            <img src="{{item|thumb}}" alt=""/>
        {% endfor %}
    </div>
{% endarchiveDetail %}

{# 示例：如果自定义字段存储了图片路径，也可以这样转换 #}
{% archiveDetail customImage with name="MyCustomImageField" %}
    <img src="{{customImage|thumb}}" alt="自定义图片缩略图" />
{% endarchiveDetail %}

thumbThe filter will dynamically generate or return the corresponding thumbnail URL based on the thumbnail size and processing method you define in the background "Content Settings".This means you don't need to manually concatenate paths or worry about image processing logic, just provide the original image address, and the filter can help you complete the conversion.

**Tips and Techniques

  • Matching the front-end designThe thumbnail size set in the "Content Settings" should match as closely as possible with the actual thumbnail size displayed in the front-end template.This can prevent the image from being stretched or compressed again on the front end, ensuring **the display effect.
  • Make good use ofThumbfield: Prefer the model's built-inThumbfield, as it is usually preprocessed. For images that require dynamic conversion or from other sources, usethumbfilter.
  • consider lazy loadingIn order to further optimize the page performance, it is possible to combine thumbnail with lazy loading image technology.This way, the image is only loaded when the user scrolls into the visible area, reducing the initial loading time. *