How to get and display the thumbnail or cover image of an article in a template?

The AnQi CMS has always been highly praised for its flexibility in content display. Among them, images are the core elements that attract users and convey information. How to efficiently and accurately obtain and display the thumbnail or cover image of the article in the template is a focus for many website operators.This article will detail the template mechanism of Anqi CMS, and guide you step by step to master the techniques of image calls.

How does Anqi CMS intelligently process images?

In the Aanqi CMS, the management and display of images are designed to be very flexible and efficient.When you upload an image as the thumbnail or content image of an article, the system will perform a series of intelligent processing.

Firstly, even if you do not manually upload a thumbnail for the article, as long as the article content contains images, the system will automatically extract the first image as the thumbnail for the article.This greatly reduces the workload of content editing.

Next, the A safe CMS provides rich image processing options.In the "content settings" on the backend, you can configure the default thumbnail size, cropping method (proportional scaling by the longest side, padding by the longest side, or cropping by the shortest side), and even set a global default thumbnail to prevent some articles from being without images.ThumbField display effect of the image, ensure the unity of the website image style.

Get the image in the template: core tag and usage

The template of Anqi CMS is based on Django template engine syntax, which calls data through specific tags and variables. Getting the thumbnail or full cover image of the article mainly depends onarchiveDetail(Document Details) andarchiveListThese two core tags. (Document List)

1. Call images in the article detail page

When you need to display the cover image on a separate article detail page, you can usearchiveDetailtags. This tag can retrieve detailed data of the current article, including various image fields:

  • Cover main image (Logo): Usually used to display the main, largest cover image of an article, which is also the most representative image of the article.

    <img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />

  • Thumbnail (Thumb)An image processed by the system, smaller in size, often used in sidebars, related article recommendations, and other places where space saving is required.

    <img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />

  • Cover group image (Images)If an article is equipped with multiple cover images, such as a product image album or a multi-image carousel,Imagesthe field will return an array of image addresses. You need to usefora loop to iterate through and display them.

    <div class="gallery">
    {% archiveDetail archiveImages with name="Images" %}
    {% for item in archiveImages %}
        <img src="{{ item }}" alt="图片描述" />
    {% endfor %}
</div>

    Here, we first displayImagesto the fieldarchiveImagesthe variable, and then display each image one by one through a loop.

2. Call the image in the article list page

In the article list page (such as the homepage, category list page), you need to traverse multiple articles. At this time,archiveListtags come into play. InarchiveListthe loop body, the data of each article isitemin the form of （or you custom variable name），you can get the image of the corresponding article.item.Logooritem.Thumbto get the image of the corresponding article.

Assuming you are usingarchiveListto cycle through the articles:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-card">
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            {% if item.Thumb %} {# 先判断是否存在缩略图 #}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
            {% else %}
                <img src="{% system with name="SiteLogo" %}" alt="默认图片" /> {# 如果没有缩略图，显示网站Logo或默认图 #}
            {% endif %}
            <p>{{ item.Description|truncatechars:100 }}</p>
        </a>
    </div>
    {% endfor %}
{% endarchiveList %}

In this example,item.Thumbwill automatically generate the corresponding thumbnails based on the backend settings.

3. Classification and single-page image calls

For category detail pages (categoryDetail) and single-page detail pages (pageDetail), the logic of image calls is almost consistent with article detail pages. They also provideLogo/ThumbandImagesField, used to display the cover large image, thumbnail or gallery of a category or a single page. You can refer toarchiveDetailto make the call.

For example, call the Banner gallery of a category:

{% categoryDetail categoryBanners with name="Images" %}
<div class="category-banner">
    {% for banner in categoryBanners %}
        <img src="{{ banner }}" alt="分类横幅" />
    {% endfor %}
</div>

4. English for generating thumbnails dynamically (thumbThe filter)

In addition to obtaining the preset thumbnails directly through fields, Anqi CMS also provides athumbFilter, can dynamically generate thumbnails based on any image URL.This is very useful in some specific scenarios, such as when you only want to temporarily display an image of a certain size, or the image is not directly from the thumbnail field of the article.

Its usage is: {{ 图片URL|thumb }}。 For example, you have an image URL ishttp://example.com/uploads/original.jpg，and you want to display it as a thumbnail in the template:

{% set imageUrl = "http://example.com/uploads/original.jpg" %}
<img src="{{ imageUrl|thumb }}" alt="动态缩略图" />

This filter will generate thumbnails based on the thumbnail size and processing method configured in the 'Content Settings' on the backend.imageUrlIt converts the specified image into the corresponding thumbnail.

Useful Tips and Considerations

  • The backend settings are fundamental.：Ensure that the 'Thumbnail Processing Method' and 'Thumbnail Size' are configured according to the website requirements in the 'Content Settings' of the Anqi CMS backend. These settings are used by the front-end template.ThumbThe foundation of field effects.
  • English：If the image in theContentfield) needs lazy loading, you can callContentAdd at timelazy="data-src"Parameter, for example: 
    
{% archiveDetail articleContent with name="Content" lazy="data-src" %}
{{ articleContent|safe }}
    This will add a lazy load attribute to thesrcThe attribute converts todata-src, making it convenient for the front-end lazy loading script to identify.
  • Ensure HTML output is safeWhen displaying article content or other fields that may contain HTML code (such asContent/DescriptionWhen to ensure that the HTML structure is correctly parsed and not displayed as code, be sure to use|safea filter. For example{{ item.Description|safe }}or{{ articleContent|safe }}.

Common Questions (FAQ)

  1. 问：Why doesn't my article thumbnail show up, or is it always displaying a default image? AnswerFirstly, please check if you have uploaded a "document image" (i.e., thumbnail) when you "publish document" in the background.If not uploaded, the system will automatically try to extract the first image from the article content as a thumbnail.If the article content does not have any images, the system will use the default thumbnail you configured in the "backend settings" -> "content settings".Make sure these two have image sources or have set valid default thumbnails.

  2. 问：Why does the cover image I uploaded appear very small and unclear on the list page? AnswerThis is likely because you are calling on the list pageitem.Thumbfield.ThumbThe field will generate a smaller sized image based on the "Thumbnail size" and "Thumbnail processing method" configured in the "Content Settings" of the backend. If you wish to display larger and clearer images on the list page, you should consider callingitem.LogoField, or check and adjust the "thumbnail size" settings to match your needs.

  3. **Question:**Logo/ThumbandImagesThese three