How to set up the 'Document Image' or 'Thumbnail' feature in AnqiCMS backend so that images are displayed correctly on the front page?

Manage and display images in AnQi CMS, especially document thumbnails or cover images, which is a core link in website content operation.AnQi CMS provides flexible backend configuration and a powerful template tag system, allowing you to easily display these images correctly on the front page.This article will guide you step by step on how to set up and call it, ensuring that your website images are presented in **status to the visitors.

Backend settings article: Ensure that the image processing is done properly

In AnQi CMS backend, there are several key areas that affect images, especially the generation and processing of thumbnails.

Content settings: The 'central kitchen' for website image processing

First, let's go to the "background settings" menu and select "Content Settings".Here is like the 'central kitchen' of website image processing, all images (including document images) uploaded will be processed according to the rules here.

1. Thumbnail processing method and size: This is the core that determines the final form of the thumbnail

   • Thumbnail Processing MethodYou can choose to 'scale proportionally by the longest side', 'fill by the longest side', or 'crop by the shortest side'.This directly affects whether the thumbnail is displayed fully, automatically padded with white space, or centered and cropped.Choose the most suitable method based on the design style of your website, for example, if you want all thumbnails to maintain the same aspect ratio and fill the background, you can choose 'Fill to the longest side'.
   • Thumbnail sizeSet width and height here.If you find that the image size does not match or is blurred when you call the thumbnail in the template, it is likely that the settings here do not match the size required by the template.Adjust it to the size displayed on your website's frontend, which can effectively improve the image quality.For example, your article list needs to display a 200x150 pixel thumbnail, which should be set to 200x150.

2. Automatic image compression and WebP formatThese settings are closely related to website performance.

   • Whether to automatically compress large imagesIf enabled, the system will automatically compress the uploaded large image to the specified width, which can significantly reduce the size of the image file and speed up page loading.
   • Automatically compress to a specified width: Used in conjunction with the previous item, you can define the maximum width of the image.
   • Whether to enable WebP image format: Enabling WebP can further compress image size while maintaining visual quality, which is very helpful for improving website speed and SEO.Once enabled, all subsequent JPEG, PNG images uploaded will be automatically converted to WebP format.

3. Default thumbnailThis is a very practical 'backup' option.If you do not upload a specific thumbnail when publishing a document, the system will use the image set here as the default thumbnail.This ensures that all documents in the list or detail page will have a unified image display even if it is not manually added, avoiding blank or abnormal display.

Document or category editing: source of image upload and extraction

Under the \

1. Document image (thumbnail)In editing documents, there is a special 'Document Picture' field.You can manually upload an image or select from the existing 'image library'.This is the most direct way to set the document thumbnail.
2. Automatically extract thumbnails: AnQi CMS is very intelligent!If you publish a document without manually uploading or selecting "Document Image", but the document content contains images, the system will automatically extract the first image in the document content as the thumbnail of the document.This means that even if you forget to set it, as long as there is an image in the content, the front-end can display a thumbnail.
3. Category and single page thumbnail/Banner imageIn editing the 'Document Category' or 'Page Management' single page, you will also see similar 'thumbnail' or 'Banner image' fields.They function similarly to document thumbnails and are used to display corresponding images on category list pages, category detail pages, or single pages.

Template invocation: Display images correctly on the front end

After the backend is properly set up, the next step is how to correctly call and display these images in the frontend template.The Anqi CMS adopts a template engine syntax similar to Django, using specific tags and variables to retrieve data.

In the Anqi CMS template files, you need to use{{变量}}to output data, using{% 标签 %}To perform logical control or retrieve list data.

1. Thumbnails are displayed on the document list page.

On your article or product list page (usually){模型table}/list.htmlin this type of template), you will usearchiveListTag to loop display documents.

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            {# 关键：调用缩略图 #}
            {% if item.Thumb %}
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
            {% else %}
            {# 如果没有缩略图，可以显示默认图或占位图 #}
            <img alt="{{item.Title}}" src="{% system with name='SiteLogo' %}">
            {% endif %}
            <div>{{item.Description}}</div>
        </a>
    </li>
    {% empty %}
    <li>
        当前分类没有任何内容。
    </li>
    {% endfor %}
{% endarchiveList %}