How to call and display the thumbnail or cover image of AnQiCMS template, what processing methods are supported?

In website content operation, images play a vital role, not only attracting users' attention and enhancing the beauty of the page, but also an indispensable part of search engine optimization (SEO).AnQiCMS provides flexible and diverse mechanisms for handling and displaying thumbnails or cover images of articles, categories, single pages, etc. Whether it is automated processing in the background or fine control at the template level, it can meet all kinds of content operation needs.

Image source and background intelligent processing

When using AnQiCMS to publish content, the source of content images and preliminary processing are mainly concentrated in the background:

first, Image sourceExtremely flexible. When editing articles, categories, single pages, or tags, we usually manually upload or select an image from the existing image library in the 'Document Image' or 'Thumbnail' field as the cover.A very practical feature is that even if you do not manually specify a thumbnail, AnQiCMS will intelligently extract the first image from the article content as the thumbnail for the content, which greatly saves time for operation personnel.In addition, for categories and single pages, you can also set the "Banner Image" field, which supports uploading multiple images for carousel display. This is very useful when creating visually impactful pages.

Secondly, AnQiCMS isContent settingsIt provides powerful image automation processing capabilities, which directly affects the display and loading performance of images on the front end. These processing methods include:

• Remote image download and WebP conversionYou can choose whether to download the external images referenced in the article to your local machine, which helps to unify the management of image resources and avoid the failure of external links.At the same time, the system also supports automatically converting uploaded JPG, PNG, and other format images to WebP format. WebP usually provides better compression, thereby speeding up page loading speed.
• Automatically Compress Large ImageTo avoid the original large image from affecting the website performance, you can enable the automatic compression feature and set a maximum width.The system will automatically compress the image to the specified size during upload, reducing file size.
• Thumbnail Processing MethodThis is a highlight of AnQiCMS in image processing, it provides three fine thumbnail generation strategies:
  • Scale proportionally to the longest sideThis method will display all the content of the image, maintaining the original image ratio, but the size of the thumbnail may not be consistent.
  • Fill the longest side: If you need a fixed-size thumbnail while also displaying the entire image content, this option will be very useful.The image will be centered on the canvas of the specified size, and the insufficient part will be filled with white.
  • Trim according to the shortest edgeThis method is suitable for scenarios where the main subject of the image needs to be highlighted and strict size requirements are needed. The image will be cropped centrally and may lose some edge information.
• Thumbnail size and default thumbnailYou can set a uniform thumbnail size according to the actual needs of the front-end template.In addition, AnQiCMS also allows you to set a default thumbnail, which the system will automatically use for display when a piece of content does not specify a thumbnail, ensuring the consistency of website image display.

These backend settings are global and can provide unified, automated management and optimization for website image resources.

Image calling and fine control in templates

AnQiCMS uses a syntax similar to Django template engine, variables are enclosed in double curly braces{{变量}}Logic control uses{% 标签 %}The variable name usually follows camel case naming, which brings great convenience to template development.In the template, we can call and display the thumbnails or cover images of articles, categories, single pages, and tags in multiple ways.

1. Call the image field of articles, categories, and single pages

Whether it is an article detail page or a list page, we can obtain the image field through corresponding tags (such asarchiveDetail/archiveList/categoryDetail/pageDetailetc) to get the image field:

• Logo: It usually refers to the cover main image or large image with relatively high resolution.
• Thumb: Refers to the thumbnail automatically generated by the system according to the backend settings.
• Images: For some content models (such as articles, single pages, categories), group photo upload may be supported.ImagesThe field will return an array of image URLs.

For example, on an article detail page, you can call the article's thumbnail and cover image like this:

{# 默认获取当前文章的封面首图 #}
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />

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

{# 调用指定 ID 文章的缩略图 #}
<img src="{% archiveDetail with name="Thumb" id="123" %}" alt="{% archiveDetail with name="Title" id="123" %}" />

If the content model supports multi-image upload (such as theImagesfield), you can display all images by looping:

{# 假设 archiveImages 变量包含了文章的 Images 数组 #}
{% archiveDetail archiveImages with name="Images" %}
<div class="article-gallery">
    {% for imgUrl in archiveImages %}
        <img src="{{ imgUrl }}" alt="文章图片" />
    {% endfor %}
</div>

On the article list page, you canarchiveListEasily call the image of each article in the loop:

{% archiveList articles with type="list" limit="10" %}
    {% for item in articles %}
        <div class="article-item">
            <a href="{{ item.Link }}">
                {# 调用列表项的缩略图 #}
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
                {% endif %}
                <h3>{{ item.Title }}</h3>
            </a>
        </div>
    {% endfor %}
{% endarchiveList %}

The way to call images for categories, single pages, and tags is similar to that of articles, just replace the corresponding tags, for example:categoryDetailTo get the image details of the category, pageDetailGet a single page image,tagDetailGet a tag image.

2. UsethumbThe filter performs flexible image processing

In addition to direct callingLogoorThumbIn addition to obtaining the background pre-processed image, AnQiCMS also provides a powerful feature,thumbFilter, allows you to apply at the template layer toany image URLPerform real-time thumbnail generation and size adjustment. This means that even if you have set a uniform thumbnail in the background, in specific scenarios on the front end, you can easily obtain thumbnails of different sizes or processing methods.

thumbThe basic usage of the filter is{{ image_url|thumb }}. It will generate a processed thumbnail by combining the original image address with the AnQiCMS image processing engine.

For example, you want the thumbnail of the article to be displayed as 200x150 pixels (shortest side cropped), even though the default is a 300x200 pixel aspect ratio image generated by the backend:

{# 假设 item.Logo 是原始图片 URL #}
<img src="{{ item.Logo|thumb:200,150,'裁剪' }}" alt="{{ item.Title }}" />

Herethumb:200,150,'裁剪'Indicates: Set the image width to 200px, height to 150px, and use 'shortest side cropping' mode.This flexibility allows the front-end design to customize the image display completely according to the layout requirements.

**