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

In modern website operation, 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 part of 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.Through reasonable configuration and template invocation, you can easily achieve automatic image processing, making the website content both beautiful and smooth.

AnQiCMS How to intelligently handle images

AnQiCMS provides high levels of automation and flexibility in image processing. When you upload images or reference images in content, the system will automatically perform a series of operations:

  • English extraction and associationFor documents, categories, or single pages, even if you haven't manually uploaded a thumbnail, the system will intelligently extract the first image in the content as the default thumbnail if there are any images.This greatly simplifies the process of content publishing.
  • Multiple size generationEnglish: According to your settings, AnQiCMS can generate different thumbnail versions of the same original image to meet the display needs of different areas of the website.
  • English: Format optimization：System supports the automatic conversion of uploaded images to WebP format, which is an image format that can significantly reduce file size while maintaining high quality, further improving the loading speed of the website.
  • Large Image Compression: For images that are too large, AnQiCMS can also perform automatic compression to avoid page lag caused by directly loading the original large image.

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

To make full use of AnQiCMS's image processing capabilities, you first need to perform the relevant configuration in the background. You can go toBackground Settings -> Content SettingsPage, find the following key options:

  1. Whether to enable WebP image formatEnable this option and new uploaded JPG, PNG, etc. image files will be automatically converted to WebP format.This is very beneficial for improving image loading speed and saving storage space.If you wish to convert the uploaded images to WebP as well, AnQiCMS usually provides a batch conversion tool.

  2. Whether to automatically compress large images & automatically compress to the 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, avoiding unnecessary bandwidth consumption.Please note that compression is usually done only based on width, and height is scaled proportionally.

  3. Thumbnail processing method： This is the core setting for thumbnail display effect, AnQiCMS provides three processing methods, you can choose according to the needs of front-end design:

    • Scale proportionally by the longest sideThis method will preserve the full content of the image, ensuring that the thumbnail's width or height matches one of the set sizes, and the other side is scaled proportionally.The image will not be cropped, but may not completely fill a fixed-size container.
    • Scale proportionally by the longest side with paddingIf 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 any insufficient part will be filled with a white background to center the image within the specified size area.
    • [en] : Crop to the shortest edge.When you need to strictly fix the aspect ratio of the thumbnail and can accept part of the image content being cropped, this option is most suitable.The system will center crop based on the shortest edge to ensure the thumbnail matches the specified size accurately, commonly used in list pages, cover images, and other scenarios.

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

  5. Default Thumbnail： Set a default placeholder image for content that has no manually uploaded thumbnail or the system failed to automatically extract a thumbnail.This ensures that the website maintains a beautiful and consistent layout even when the content images are missing.

  6. Batch regenerate thumbnails： When you have modified the thumbnail size or processing method mentioned above, you can use this feature to let the system regenerate thumbnail versions that comply with the new settings for all images that have been uploaded.

Through these detailed configurations, you can allow AnQiCMS to manage the website's thumbnail images automatically 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 refer to and display these thumbnails in the frontend 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, single pages) usually provides a preset image field that directly points to the system-generated thumbnail:

  • LogoField：通常指向原始上传图片或较大尺寸的图片地址。
  • ThumbField：通常指向经过系统处理后的缩略图地址。

In 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 directly callingitem.ThumborcategoryDetail with name='Thumb'You can ensure that the display is the optimized thumbnail generated by AnQiCMS according to the backend configuration.

2. UsethumbThe filter will convert any image address to a thumbnail

This is a direct and powerful method to implement the requirement of 'how to convert the original image address to a thumbnail address for display'. Regardless of where you get a URL of the original image (for example, an image in the content editor, an image in a custom field, or evenLogoFields' original images), all of which can be accessed throughthumbThe filter can quickly convert it to the system-generated thumbnail address.

thumbThe usage method 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 "Content Settings" on the backend.This means you do not 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.

Practice & Tips

  • Matching the frontend designThe thumbnail size set in 'Content Settings' should match as closely as possible with the actual thumbnail size displayed in the front-end template.This can avoid the image from being stretched or compressed again on the front end, ensuring the display quality.
  • Use wiselyThumbFieldEnglish priority should be given to the model's built-inThumbfield, as it is usually pre-processed. For images that require dynamic conversion or from other sources,thumbFilter.
  • consider lazy loadingTo further optimize the page performance, you can combine thumbnail and lazy loading technology.This way, the images are only loaded when the user scrolls into the visible area, reducing the initial load time.