How to convert image addresses to thumbnail format for display?

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

AnQiCMS automatically generated thumbnail: Smart and efficient

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

  • Automatically extract and generate: If 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 Strategy: AnQiCMS allows you to uniformly configure the thumbnail generation strategy in the "Content Settings" section of the backend. This includes:
    • Thumbnail Processing Method: You can choose three different methods to adapt to different display requirements:
      • Scale proportionally to the longest sideThis method will display all sides of the image, with one side fixed and the other side scaled proportionally according to the image ratio to avoid distortion.
      • Fill the longest sideIf you need to fix the aspect ratio of the thumbnail but also want to display the image completely, you can choose this method.The image will be centered, and the insufficient part will be filled with white or other specified colors to reach a fixed size.
      • Trim according to the shortest edgeWhen you need a strict fixed size and do not mind cropping part of the image, this method will crop the image in the center, ensuring that the shortest edge is displayed completely, and the longest edge matches the length of the shortest edge.
    • Thumbnail sizeYou can set the specific pixel size of the thumbnail according to the actual needs of the website front-end page (for example: 200x150).Setting the size properly 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 a document or category does not have a specific thumbnail, the system will automatically use this default image for display.
    • WebP image format: AnQiCMS supports enabling WebP image format.Enable this feature, and uploaded JPG, PNG, and other image files will be automatically converted to WebP format, which can significantly reduce the file size of images and further improve loading speed.
    • Automatically compress large imagesThe system can also automatically compress large-sized images, adjusting them to the maximum width set (for example, 800 pixels) to avoid directly loading the original large image, saving server storage space and bandwidth.

Flexibly call thumbnails in the template

In the AnQiCMS template, the image address is converted to thumbnail format for display, mainly achieved through two methods: directly referring to the system-generated thumbnail address, or using|thumbThe filter converts any image address in real time.

1. Directly reference the system preset thumbnail field

For the document (archive）、Category（category) and single page (page）等内容，AnQiCMS in its data structure usually provides pre-generated thumbnail fields for direct calling.

  • document thumbnail: In usearchiveListTags cycle to display document lists, eachitemObjects usually containitem.Thumbfields, which is the thumbnail address generated by the system according to the background 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 %}

    On the document detail page, you can also use{{ archive.Thumb }}to get the thumbnail address of the current document.

  • Category and single page thumbnailLikewise,categoryDetailandpageDetailObjects obtained with tags usually also containThumbfield.

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

2. Use|thumbFlexible conversion with filters

AnQiCMS provides a powerful|thumbA filter that you can apply to any image address to generate thumbnails based on global settings or specific requirements. This means that even if you have the original large image address (for exampleitem.Logo)，can also be converted into a thumbnail format in the template.

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

Example: Convert the document cover logo (Logo) into a thumbnail.

Assumeitem.LogoIs the original cover 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 %}

So, even ifitem.LogoThe image stored is the original large image, and when displayed on the front end, it will also be processed by the AnQiCMS thumbnail, which ensures image quality and optimizes loading speed.

Specific settings and configuration: Optimize your image strategy

To make full use of the AnQiCMS thumbnail function, you must refine the configuration in the backend management interface:System settings" -> "Content settings

  1. Thumbnail Processing Method: Choose the most suitable thumbnail processing method (aspect ratio scaling, padding, or cropping) according to your design style and content display requirements.
  2. Thumbnail size：Set the width and height accurately 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 achieve **improved image loading performance.
  5. Automatically Compress Large Image: Turn on and set a reasonable width threshold to avoid slow websites due to unprocessed large images.
  6. batch regenerate thumbnailsIf you modify any of the above thumbnail configuration and need to generate thumbnails for the uploaded images according to the new rules, please use this feature for batch processing.This ensures that the full site images maintain consistent optimization effects.

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

Frequently Asked Questions (FAQ)

Q1: Why did I change the thumbnail size setting on the back end, but the image display size on the front end of the website did not change immediately?A1: After modifying the thumbnail size and other 'content settings', AnQiCMS needs to regenerate thumbnails for the uploaded images.You can go to the "System Settings" -> "Content Settings" page, find the "Batch Regenerate Thumbnails" feature, click to execute, and the system will update all thumbnails according to the new settings size and processing method.In addition, browser caching may also cause display delays, you can try clearing the browser cache and then try again