How to get the thumbnail of AnQiCMS image resources and display it?

AnQiCMS pays great attention to visual effects and page loading efficiency in content display, therefore, how to efficiently obtain and display thumbnail images of image resources is a problem we often encounter in daily operation.luckyly, AnQiCMS provides a very convenient and flexible way to handle image thumbnails, allowing us to easily meet various display requirements.

How to manage and generate image thumbnails in AnQiCMS?

Before delving into template calls, it is necessary to understand how AnQiCMS manages and generates thumbnails in the background. This will help us better utilize its features.

1. Intelligent thumbnail generation mechanism:When you upload an image as the "document image" (that is, what we usually call the article or product thumbnail), AnQiCMS will not simply save the original image, but will automatically generate one or more thumbnail versions based on the rules set in your backend.Even if you do not manually upload a thumbnail, as long as the document content contains images, the system will intelligently extract the first image as the document thumbnail.This means that even if there are shortcomings in the content release, the website can maintain good visual consistency.

2. Flexible backend configuration:AnQiCMS under the 'Background Settings' in the 'Content Settings' provides detailed thumbnail processing options. You can flexibly adjust according to the website's design style and performance requirements:

• Thumbnail processing method:Select 'Scale to fit longest side', 'Fill to fit longest side', or 'Crop to shortest side'.Different processing methods can affect the final presentation of thumbnails, such as whether to maintain the complete proportion and whether to fill in blank spaces, etc.
• Thumbnail size:Customize the thumbnail width and height to ensure they match the frontend page layout.Setting the appropriate size not only optimizes display but also effectively reduces image size and improves page loading speed.
• Default thumbnail: For documents that do not specify or automatically extract thumbnails, set a default image. This is very useful to ensure that all content on the website has a cover image.
• Batch regenerate: If you modify the thumbnail size or processing method, the system also provides a function to batch regenerate all thumbnails so that old images can also be updated according to the new rules.

Unified image resource management:All uploaded images will be uniformly managed under "Page Resources" -> "Image Resource Management".Here, you can view the original large image of the picture, file information, and even perform replacement operations.It is worth mentioning that when you replace the image, the image URL remains unchanged, but the content is updated, which can avoid the problem of link failure due to image updates.If the original image is too large, the system will also automatically compress it according to the rules in the "Content Settings".

Obtain and display image thumbnails in the template

After understanding the background management mechanism, the next step is how to call and display these image thumbnails in the frontend template.AnQiCMS provides various tags and filters to meet our needs.

1. Directly obtain through content tags:In AnQiCMS, most of the content-related tags (such asarchiveDetailused for document details,archiveListused for document lists,categoryDetailused for category details,pageDetailUsed for single-page details, etc.) pictures will be provided directly.LogoandThumbField, convenient for us to call.

• LogoField:Cover image or the first image of the content, usually larger in size or maintains the original aspect ratio.
• ThumbField:A thumbnail specifically processed according to the backend settings, usually smaller in size, suitable for list pages or places requiring a uniform size.

For example, on the document detail page, you can retrieve and display the document thumbnail or cover image like this:

{# 获取当前文档的封面图（Logo） #}
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />

{# 获取当前文档的缩略图（Thumb） #}
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />

On the document list page, if you want to display the thumbnail of each article, you can usearchiveListLabel combined with loop:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <div>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                {# 显示文档的缩略图 #}
                {% if item.Thumb %}
                    <img alt="{{item.Title}}" src="{{item.Thumb}}">
                {% endif %}
            </a>
        </div>
    {% endfor %}
{% endarchiveList %}

Similarly, category lists or single-page lists can also be used toitem.Logooritem.Thumbto get their respective images.

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <div>
            <a href="{{ item.Link }}">
                <h3>{{item.Title}}</h3>
                {# 显示分类的缩略图 #}
                {% if item.Thumb %}
                    <img style="width: 200px" src="{{item.Thumb}}" alt="{{item.Title}}" />
                {% endif %}
            </a>
        </div>
    {% endfor %}
{% endcategoryList %}

2. UsethumbThe filter realizes a more flexible way to get thumbnails:AnQiCMS also provides a very practicalthumbFilter.The strength of this filter lies in the fact that you can input any image address, and it will return the thumbnail version of the image based on the thumbnail settings in the background.This is very convenient in certain specific scenarios, such as when you need to resize images in article content, or when you have a complete image URL but want to display a thumbnail.

The usage method is very simple, just add it after the image URL|thumb:

{# 假设 item.Logo 是一个完整的图片 URL #}
<img src="{{ item.Logo|thumb }}" alt="图片描述" />

{# 你甚至可以直接将一个字符串图片地址进行缩略图处理 #}
{% set imageUrl = "https://en.anqicms.com/uploads/202309/14/example.webp" %}
<img src="{{ imageUrl|thumb }}" alt="示例图片" />

This filter is particularly useful for maintaining consistency in image display and improving loading speed. When you change the thumbnail processing method and size in the background, all uses|thumbThe images called by the filter will be automatically updated to new thumbnails.

Some important points to note.

• Background configuration is the foundation:All thumbnail generation and display effects depend on the configuration in "Content Settings". If your thumbnail display does not meet expectations, you should first check the settings there.
• Clear the cache:Whether you have modified the picture or changed the thumbnail configuration on the back-end, if the front-end page does not update in time, remember to click 'Update Cache' in the AnQiCMS back-end, or clear the browser cache, to ensure that the latest effect is displayed.
• Image optimization:Although AnQiCMS automatically compresses large images and supports Webp format, we still recommend preliminary compression and optimization before uploading images for better user experience and SEO effectiveness.

By flexibly using these features provided by AnQiCMS, we can easily control the image display on the website, whether it is the beauty of the list or the page loading speed, it can be significantly improved.

Frequently Asked Questions (FAQ)

1. Why is my thumbnail not displaying at the size I set?This usually has several reasons.First, please check if the thumbnail size in AnQiCMS admin panel "Content Settings" is correctly configured.Secondly, if the front-end page still displays incorrectly, it may be because the browser has cached old images or CSS styles. Try clearing the browser cache or clicking 'Update Cache' in the AnQiCMS backend to view it again.In addition, CSS styles may override the size of the image itself, make sure no external styles are enforcing a different image size.

2. How to set a default image for documents that have not uploaded a thumbnail?In the AnQiCMS admin panel, there is an option for 'Default Thumbnail'.You can upload an image as the default, so that when the document has not uploaded a thumbnail and there are no extractable images in the content, the system will automatically use this default thumbnail to fill in.This helps maintain the visual consistency of the website, avoiding blank images.

3.LogoandThumbfields?In AnQiCMS content tag