How does Anqi CMS display the cover image and thumbnail of the document?

As an experienced website operations expert, I am well aware of the importance of a high-quality cover image and an appropriate thumbnail for the attractiveness of the website, user experience, and even search engine optimization (SEO).AnQiCMS (AnQiCMS) is well-versed in this field, its design in image processing and display is not only powerful but also takes into account the ease of operation and the flexibility of display.

Next, let's delve into how Anqi CMS cleverly displays the cover images and thumbnails of documents.

1. Background image management: from intelligent upload to global optimization

The Anqi CMS provides a complete solution for operators in image management, from content entry to global configuration, ensuring efficient and intelligent image processing.

1. Image intelligent processing during content entry

When you publish articles, products, or create single pages through Anqi CMS, uploading images is not just simple storage, the system provides multiple intelligent assists.For example, in the "Add Document" interface, you can manually select an image from the uploaded image library as the document thumbnail, or directly upload a new image.If the operator does not specifically upload a thumbnail, but the document content contains images, Anqi CMS will use its intelligent features to automatically extract the first image in the document content as the thumbnail for the document.This thoughtful design greatly simplifies the process of content publishing, reducing manual operations.

For categories and single pages, Anqi CMS also provides options to upload cover images (Logo), thumbnails (Thumb), and multiple banner images (Images) to display richer visual content in different scenarios.This means that whether it is the concise thumbnail on the list page, or the exquisite cover on the detail page, or even the Banner carousel, they can all be properly managed.

2. Global content image settings and optimization

The strength of AnQi CMS also lies in the global image optimization options provided in its "Content Settings". This is not just simple upload, but also a series of intelligent optimization features that work silently for you, ensuring that images are loaded as quickly as possible while maintaining quality and optimizing SEO:

• WebP image format conversion:Considering the advantages of WebP format in terms of volume and loading speed, Anqi CMS allows enabling the function to automatically convert uploaded JPG, PNG images to WebP format.This is crucial for improving the overall performance of the website.
• Large image automatically compressed:To prevent large image files from slowing down the website speed, the system supports automatic compression of large images and can be customized to compress to a specified width.This greatly reduces the storage space and transmission bandwidth of the image without affecting the visual effect.
• Thumbnail processing method:For thumbnail generation, Anqi CMS provides three fine processing modes:
  • Scale proportionally to the longest side:Display all edges of the image completely, maintaining the image ratio.
  • Pad to the longest edge:Width and height are fixed, the image is centered, and the unused part is filled with white.
  • Trim to the shortest edge:Center-crop the image to ensure that the shortest edge is fully displayed, but part of the longest edge may be cropped off. Operator can flexibly choose the most suitable thumbnail generation strategy according to template design and visual requirements.
• Custom thumbnail size:The operator can customize the specific size of the thumbnail according to the actual needs of the front-end page to adapt to different display areas and ensure the display effect of the image.
• Default thumbnail: This is a practical fallback option. If the document does not upload a thumbnail, the system will use the preset default thumbnail for display to avoid blank images affecting the page aesthetics.
• Batch regenerate thumbnails:When the thumbnail size or processing method changes, Anqi CMS provides the function to batch regenerate all thumbnails, greatly reducing maintenance costs.

Second, the magic in the template: various ways to call images

The AnQi CMS template engine is based on Go language, with syntax similar to Django, making the call of images on the front-end intuitive and flexible through concise tags and variables.

1. Basic Template Tags

In AnQi CMS template files, variables are enclosed in double curly braces{{变量}}defined, while conditional judgment, loop control, and other logical tags use single curly braces and percentage signs{% 标签 %}Definition. Understanding this basic syntax is the key to flexibly invoking images.

2. Invoking images for different content types

Anqi CMS for documents (archive）、Category（category）、Single page（page) and tags (tag）Provided with an independent detail tag, and built-in fields for calling cover and thumbnail images：“

• Document detail page（archiveDetail):
  • {{archive.Logo}}：Generally used to call the cover large image or main image of the document。
  • {{archive.Thumb}}: Used to call the document thumbnail, commonly used for list display or small preview.
  • {% archiveDetail archiveImages with name="Images" %}: Used to retrieve multiple images uploaded with the document (such as product albums), and it needs to be accessed throughforLoop througharchiveImagesDisplay each image.
• Category details page (categoryDetail):
  • {{category.Logo}}: Call the large category image, often used as the main visual element of the category page.
  • {{category.Thumb}}: Call the category thumbnail, which may be used in the parent category list or some special layouts.
  • {% categoryDetail categoryImages with name="Images" %}: Used to obtain the category Banner group image, which also needs to be displayed in a loop.
• Single page detail page (pageDetail):
  • {{page.Logo}}: Call the large image of the single page.
  • {{page.Thumb}}: Call the thumbnail of the single page.
  • {% pageDetail pageImages with name="Images" %}: Used to get the slide group image of the single page.
• Tag detail page (tagDetail):
  • {{tag.Logo}}: Mainly used to call the main image of the tag page.

These tags can be used directly on the detail page{{archive.Logo}}or{{category.Thumb}}This format can be used on the list page as well, by loopingarchiveList/categoryList/pageListwhen using tags, by{{item.Logo}}or{{item.Thumb}}to call the image of each list item.

Example code snippet (for document list):

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            {% if item.Thumb %} {# 判断是否存在缩略图 #}
            <img class="article-thumb" src="{{item.Thumb}}" alt="{{item.Title}}">
            {% endif %}
            <h3 class="article-title">{{item.Title}}</h3>
            <p class="article-desc">{{item.Description}}</p>
        </a>
    </div>
    {% endfor %}
{% endarchiveList %}

3. Image lazy loading optimization in the content editor:

For the images inserted in the document body, Anqi CMS also considers performance optimization. When calling the document content ("