How to convert image addresses to thumbnail format for display?

In website operation, images play a crucial role.They can not only attract users' attention, but also effectively convey information.However, very large images can seriously affect the website loading speed, thereby damaging the user experience and search engine rankings.Therefore, converting the image address to thumbnail format for display has become an indispensable part of optimizing website performance.AnQiCMS provides very convenient functions in this aspect, it can automatically generate and manage thumbnail images for your website, and provide flexible calling methods to help you easily handle the challenges of image optimization.

AnQiCMS automatically generated thumbnails: Smart and efficient

AnQiCMS has intelligent image processing capabilities. When you upload images on the backend or insert images in the article content, the system will automatically recognize and process them.

  • English extraction and generationIf you do not manually upload a thumbnail when publishing the document, but the document content contains images, AnQiCMS will intelligently extract the first image in the document as the thumbnail for the document.
  • Global Configuration StrategyAnQiCMS allows you to uniformly configure the thumbnail generation strategy in the "Content Settings" section of the backend. This includes:
    • Thumbnail processing methodYou can choose three different processing methods to meet various display needs:
      • Scale proportionally by the longest sideThis method will fully display all sides of the image, one side of the width or height will be fixed, and the other side will be proportionally scaled according to the image ratio to avoid distortion.
      • Scale proportionally by the longest side with padding
      • [en] : Crop to the shortest edge.When you need strict fixed dimensions and do not mind trimming part of the image, this method will crop the image to center, ensuring that the shortest edge is fully displayed and the longest edge matches the length of the shortest edge.
    • Thumbnail size：You can set the specific pixel size of the thumbnail according to the actual needs of the website front-end page (for example: 200x150).Adjusting the size helps to further reduce the image size and speed up page loading.
    • Default ThumbnailTo maintain the visual consistency of the website, you can upload a default thumbnail. When there is no specific thumbnail for a document or category, the system will automatically use this default image for display.
    • WebP image format：AnQiCMS Supports enabling WebP image format.After enabling, uploaded JPG, PNG, and other image files will be automatically converted to WebP format, which can significantly reduce the file size of image files and further improve loading speed.
    • Large image automatic compression：The system can automatically compress large images, adjusting them to the set maximum width (such as 800 pixels), to avoid loading the original large image directly, saving server storage space and bandwidth.

Flexible call of thumbnails in template

In AnQiCMS templates, image addresses are converted to thumbnail formats for display, mainly achieved through two methods: directly referencing the thumbnail address generated by the system, or using|thumbFilter performs real-time conversion for any image address.

1. Directly reference the system predefined thumbnail field.

For documents (archive）Categories（category）and single-page（page）等内容，AnQiCMS 在其数据结构中通常会提供预生成好的缩略图字段，方便您直接调用。

  • Document Thumbnail: When usingarchiveList标签循环展示文档列表时，每个itemobjects usually containitem.ThumbField, it is the thumbnail address generated by the system based on the backend configuration.

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

    You can also use it directly on the document detail page.{{ archive.Thumb }}To get the thumbnail address of the current document.

  • Categorization and single-page thumbnailSimilarly,categoryDetailandpageDetailObjects obtained by tags also often containThumbfield.

    {% categoryDetail categoryThumb with name="Thumb" %}
<img src="{{ categoryThumb }}" alt="{% categoryDetail with name='Title' %}" />

2. Use|thumbFlexible conversion by filter

AnQiCMS provides a powerful|thumbFilter, you can apply it to any image URL to generate thumbnails based on global configuration or specific requirements. This means even if you have the original large image URL (such asitem.Logo），can also be converted to a thumbnail format and displayed in the template.

<img src="{{ 图片地址 | thumb }}" alt="图片描述" />

Example: Convert the cover image (Logo) of the document to a thumbnail

Assumeitem.LogoThis is the original cover large image address of the document, and you want to display its thumbnail on the list page or detail page:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <a href="{{ item.Link }}">
            {% if item.Logo %}
                {# 使用 |thumb 过滤器将原始Logo图片地址转换为缩略图格式 #}
                <img src="{{ item.Logo | thumb }}" alt="{{ item.Title }}" />
            {% endif %}
            <h3>{{ item.Title }}</h3>
        </a>
    {% endfor %}
{% endarchiveList %}

In this way, even though item.LogoThe stored image is the original large image, and the image displayed on the front-end will also be processed by AnQiCMS thumbnails, ensuring image quality while optimizing loading speed.

Specific settings and configurations: Optimize your image strategy

To make full use of AnQiCMS's thumbnail feature, please be sure to refine the settings in the background management interface'sSystem Settings" -> "Content Settings

  1. Thumbnail processing methodEnglish: Select the most suitable thumbnail processing method (aspect ratio scaling, padding, or cropping) based on your design style and content display requirements.
  2. Thumbnail size：Precisely set the width and height to match the size of the image display area on your website. This ensures that the image fits perfectly into the layout and effectively controls the file size.
  3. Default Thumbnail：Upload a default image with brand characteristics as a placeholder for content without images or missing images.
  4. WebP image format：It is strongly recommended to enable this option to obtain **improved image loading performance.
  5. Automatic compression of large images：Turn on and set a reasonable width threshold to avoid large images from slowing down the website.
  6. Batch regenerate thumbnails：If you modify any of the above thumbnail configurations and need to regenerate thumbnails for the images already uploaded according to the new rules, please use this feature for batch processing.This ensures that the optimization effect of all site images is consistent.

Through the above settings and template calls, AnQiCMS ensures that your website can display image content efficiently and beautifully, thereby enhancing user experience, improving search engine friendliness, and bringing substantial help to your content operation.

Common Questions (FAQ)

Q1: Why did the image display size on the website front end not change immediately after I modified the thumbnail size setting on the background?