How to call and display the cover image, thumbnail, or group image of a specified document?

When building and operating a website, the attractiveness of visual content is crucial.AnQiCMS provides a flexible way to manage and display images of documents (including articles, products, etc.), whether as a prominent cover, a delicate thumbnail, or a colorful group of images.Learn how to correctly call these images, which can help you better design and optimize the user experience of the website.

AnQiCMS provides several main image fields for different content types, which have clear uses in the template:

  • Cover first image (Logo)This usually refers to the main visual or representative image of the content (such as documents, categories, single pages). In some contexts, it may be the first image used to highlight.
  • Thumbnail (Thumb)This is a smaller, processed version of the cover image, often used on list pages and recommendation areas to save loading time and keep the page tidy.
  • 组图（Images）When it is necessary to display a set of images to describe a content in detail (such as multi-angle product display, event photo album), AnQiCMS will store these images as an array.

Next, we will discuss how to call and display these images in the AnQiCMS template.

Call image in the document details page

In the document detail page, you usually want to display the most complete and highest quality images. AnQiCMS providesarchiveDetailLabel to get detailed information about the current document, including any associated images.

To display the cover image of the document, you can call it like this.LogoFields:

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

Here,altAn attribute is a good habit, it not only helps search engines understand the content of the image, but also provides text descriptions when the image cannot be loaded. You can also use variables from the current document context directly, for example:

<img src="{{archive.Logo}}" alt="{{archive.Title}}" />

If your document is configured with a thumbnail and you want to display it at a certain location on the detail page (such as the sidebar), you can callThumbFields:

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

Similarly, if you directly inarchiveUsed in context, the code will be more concise:.

<img src="{{archive.Thumb}}" alt="{{archive.Title}}" />

When the document contains multiple images as a set, you need to use a.forin a loop to iterate overImagesField because.ImagesField returns an array of image links:.

{% archiveDetail archiveImages with name="Images" %}
<div class="image-gallery">
    {% for imgUrl in archiveImages %}
        <img src="{{imgUrl}}" alt="{{archive.Title}} - 图片 {{ forloop.Counter }}" />
    {% endfor %}
</div>

In this example,forloop.CounterIt provides the current image index in each loop, very suitable foraltusing in attributes to increase the uniqueness of image descriptions.

to call images in the document list page

In the document list page (e.g., article list, product list), it is usually only necessary to display thumbnails to get an overview of the content, rather than the full cover image.archiveListTags are used to retrieve a set of documents, you can accessforthe image field of each document in a loop.

When you usearchiveListWhen outputting documents in a loop, each document item will be assigned a variable (for example)item）。To display a thumbnail of each list item, you can do this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="list-item">
            <a href="{{item.Link}}">
                <h3>{{item.Title}}</h3>
                {% if item.Thumb %}
                    <img src="{{item.Thumb}}" alt="{{item.Title}} 的缩略图" />
                {% endif %}
                <p>{{item.Description}}</p>
            </a>
        </div>
    {% endfor %}
{% endarchiveList %}

Here we used{% if item.Thumb %}To check if the thumbnail exists. This is a very practical skill that can avoid displaying broken image icons when there are no images, thus enhancing the user experience.

If the list item needs to display the cover image (although it is not common), it can also be called{{item.Logo}}. And if you need to display multiple images in the list item from a group of images, you canitemnested another one insideforin a loop to iterate over{{item.Images}}An array, like displaying a group of images on the detail page.

Call images in categories and single pages

AnQiCMS not only provides an image field for documents, but also allows you to configure cover images, thumbnails, and group images for categories and single pages. Their calling methods are similar to those of documents, only using the corresponding tags:

  • Categorized Images: UsecategoryDetailLabel to get the current category's image (for example{{category.Logo}}/{{category.Thumb}}/{{category.Images}}), or atcategoryListin the loop by{{item.Logo}}and other ways to call.
  • Single Page Image: UsepageDetailTag gets the image of the current page (for example{{page.Logo}}/{{page.Thumb}}/{{page.Images}}), or atpageListin the loop by{{item.Logo}}and other ways to call.

No matter what type of content, AnQiCMS provides a clear picture upload and management interface in the background, ensuring that you can easily add visual elements to your content.

Improve the General Techniques for Displaying Images

In addition to the basicsrcproperties when calling images, there are some general techniques that can help you optimize the display of images:

  • Automatic Image Path ProcessingEnglish: AnQiCMS will automatically handle the storage path after image upload, you can directly call it in the template{{item.Logo}}or{{archive.Thumb}}The fields can be left as is, no manual complex server path concatenation is required, the system will return the complete image access URL.
  • AddaltProperty: Always set<img>Label addaltProperties, this is not only conducive to SEO (search engine optimization), but also provides text descriptions when images cannot be loaded, improving the accessibility of the website.
  • Conditional judgment: Before displaying the image, use{% if 变量名 %}Perform judgment to ensure that the image field has a value. This can effectively avoid displaying the placeholder 'Image Missing' and maintain the page aesthetics.
  • Responsive image processing：Although template tags directly output image links, you can combine with CSS frameworks (such as Bootstrap, Tailwind CSS) or nativesrcsetProperty,<picture>The label can be used to implement responsive images, ensuring that images display well on different devices.

By flexibly using these tags and fields provided by AnQiCMS, you can easily add rich visual elements to your website content. Whether it's an eye-catching cover, a concise thumbnail, or an elaborate gallery display, they can be perfectly presented to enhance the professionalism and user experience of your website.

Common Questions (FAQ)

1. Why doesn't the image I uploaded for the document display on the front-end page?

This may be caused by several reasons. First, please check if the image field name you are using in the template is correct, for example,Logo/ThumbOrImages.其次，confirm whether the image has been successfully uploaded and saved to the document, you can view it while editing the document in the background.Again, AnQiCMS has a caching mechanism. If the front-end does not take effect immediately after the background modification, try clicking the "Update Cache" button in the background, or clear your browser cache and try again.{% if 图片字段 %}Such conditional judgment is to prevent the image field from being skipped when the image field is empty.

2.LogoandThumbWhat is the difference between these two image fields? When should I use them?

Logo通常指文档的“封面首图”或主形象图，一般尺寸较大，用于在详情页或重要的展示区域突出显示文档的视觉主题。而Thumb则是“缩略图”，它是 EnglishLogo的一个较小尺寸版本，旨在用于列表页、推荐模块或侧边栏等地方，以节省页面 English