How to display the cover image, thumbnail, or group image on the article detail page?

In AnQi CMS, adding images to the article detail page is an important element to enhance the attractiveness and reading experience, whether it is the cover image, thumbnail, or multiple group images.The Anqi CMS provides a flexible and intuitive way to manage and display these image resources, allowing you to easily achieve a diverse visual presentation.

Flexible use of the cover image and thumbnail of the article

In the article detail page, the cover main image (Logo) and thumbnail (Thumb) are the most common image elements.They are usually used to represent the main visual content of an article and are widely used in list pages, recommendation spots, and the top of article detail pages.

The 'Document Image' upload area is provided by Anqi CMS when you publish or edit articles.The image uploaded here will be automatically processed as the cover image of the article.It is worth mentioning that if you have not manually uploaded an image, but the article content contains images, the Anqi CMS will intelligently extract the first image within the article as the cover image and thumbnail, greatly simplifying the operation process.

Display these images in the template, you can usearchiveDetailtags to get the detailed information of the article. For example, to display the cover image of the article, you can write the template code like this:

<div class="article-cover">
    <img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
</div>

Here are thename="Logo"The cover image address of the article will be directly output. If a thumbnail is to be displayed, thennameparameter toThumbas follows:

<div class="article-thumbnail">
    <img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %} 的缩略图" />
</div>

Please note that,altDescriptive text for attribute filling is a good practice, which not only helps search engines understand the content of images but also improves the access experience for visually impaired users.

Diverse display of article groups

In addition to a single cover image and thumbnail, there are often times when you need to display a set of images related to the article content, such as product albums, event photos, or tutorial step images.The Anqi CMS also supports this "group image" display method.

In the article editing interface, although 'Document Image' is mainly for a single image (as the cover image and thumbnail), the article content itself or through custom fields of the content model can achieve the management and display of a set of images. If multiple images are inserted in the body of the article, these images can be displayed in the template viaImagesfields.

Display these built-in group images in a loop in the template, as shown in the following code:

<div class="article-gallery">
    {% archiveDetail articleImages with name="Images" %}
    {% if articleImages %}
    <ul class="image-list">
        {% for imgUrl in articleImages %}
        <li><img src="{{imgUrl}}" alt="{% archiveDetail with name="Title" %} 相关图片 {{ forloop.Counter }}" /></li>
        {% endfor %}
    </ul>
    {% else %}
    <p>暂无相关图片。</p>
    {% endif %}
</div>

Here, we first go through{% archiveDetail articleImages with name="Images" %}Assign the group image data toarticleImagesvariable. SinceImagesis an array of image URLs, we can useforLoop through and display each image.

Achieve more flexible album management with custom fields.

If you need to manage a group of images more finely, such as setting different image sets for different types of articles, or adding separate descriptions to each image in the group, you might consider using the 'custom field' feature of the content model.

In the background content model management, you can add a custom field of type "Group Image" to the article model, for example namedproduct_gallery[en] Such that, when editing an article, this field provides a dedicated area for you to upload and manage multiple images.

[en] When calling this custom group image field in the template, usearchiveDetail[en]Enter the label and specify the custom field name:

<div class="product-gallery">
    {% archiveDetail productGalleryImages with name="product_gallery" %}
    {% if productGalleryImages %}
    <div class="swiper-container"> {# 假设这里使用了一个轮播组件 #}
        <div class="swiper-wrapper">
            {% for img in productGalleryImages %}
            <div class="swiper-slide">
                <img src="{{img}}" alt="{% archiveDetail with name="Title" %} 产品图 {{ forloop.Counter }}" />
            </div>
            {% endfor %}
        </div>
        {# 添加分页器、导航按钮等 #}
    </div>
    {% else %}
    <p>暂无产品图片。</p>
    {% endif %}
</div>

In this way, you can create multiple custom chart fields according to your actual needs, to meet the personalized requirements of different content display.

[en]Common techniques for image processing in templates

[en]AnQi CMS also provides some practical global settings and filters for image processing, further enhancing the display effects and performance of images:

  1. Global Image SettingsIn the background "Content Settings", you can configure image auto-compression, WebP format conversion, thumbnail size, and processing methods.These settings will affect the generation and display of images on the entire site. Proper configuration can significantly optimize the website's loading speed and storage space.For example, enabling the WebP format can effectively reduce the size of images, while a uniform thumbnail size can maintain the neat layout of the page.

  2. thumbFilterWhen you need to dynamically generate thumbnails of specific sizes, you can usethumbFilter. For example, if you want to display a uniform-sized small image while looping through a group of images, you can use it like this:{{ imgUrl|thumb }}This will generate a thumbnail based on the thumbnail rule you defined in the 'Content Settings'.imgUrlA thumbnail version will be created.

  3. |safeFilter: While processing the article content (ContentThe field when, if the article contains embedded images or other HTML code, you need to use|safeA filter to ensure that this HTML code is parsed correctly by the browser instead of being escaped as plain text. For example:{{ archiveContent|safe }}This requires you to confirm that the content source is safe to prevent potential XSS risks.

By using the above method, you can fully utilize the powerful functions of the Anqi CMS, flexibly and efficiently display various types of images on the article detail page, and add more visual charm to your website content.

Common Questions (FAQ)

  1. Why did I upload multiple images, but{% archiveDetail with name="Images" %}there is no output at all?This is usually because the way you uploaded multiple images may not be correctly associated withImagesthe field. In Anqi CMS,ImagesThe field is mainly used to store images inserted in the article editor, or through the content model.A custom field specifically set for the "gallery" type..If you only upload to the 'Document Image' area, it usually only serves as the cover main image (Logo) and an automatically generated thumbnail (Thumb).If you need more flexible group image management, it is recommended that you add a custom field of the 'group image' type in the content model to upload and call.

  2. How to adjust if the thumbnail display size of my article is incorrect or blurry?The display effect of thumbnails is mainly affected by two aspects: one is the 'Thumbnail Size' and 'Thumbnail Processing Method' configured in the 'Content Settings' on the backend; the other is the CSS styles in the template