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

In Anqi CMS, adding images to the article detail page, whether it is the cover image, thumbnail, or multiple group images, is an important link to enhance the attractiveness of the content and the reading experience.Flexible and intuitive way to manage and display these image resources, allowing you to easily achieve a variety of visual presentations.

Flexible application of the cover image and thumbnail of the article

In the article detail page, the cover logo (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 on list pages, recommendation slots, and the top of article detail pages.

AnQi CMS provides a dedicated 'document image' upload area when you publish or edit articles.Here, the image you upload 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 main content of the article contains images, Anqi CMS will intelligently extract the first image in the article as the cover main image and thumbnail, greatly simplifying the operation process.

Display these images in the template, you can usearchiveDetailtags to get the details 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>

Herename="Logo"The cover image address of the article will be output directly. If you need to display a thumbnail, then you willnameparameter toThumband it is done:

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

Please note, foraltAttribute filling descriptive text is a good habit, not only does it help search engines understand the content of the image, but also improves the access experience for visually impaired users.

Diversified display of article group images

In addition to a single cover image and thumbnail, often you need to display a set of images related to the article content, such as product albums, event photos, or tutorial step diagrams.The AnQi CMS also supports this type of group image display.

In the article editing interface, although the "Document Image" is mainly aimed at single images (as cover main image and thumbnail), the content of the article itself or through the custom fields of the content model can also achieve the management and display of group images. If multiple images are inserted in the article text, these images can be displayed in the template byImagesthe field.

Display these built-in group images in the template as shown in the 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. BecauseImagesis an array of image URLs, we can useforLoop through and display each image

Utilize custom fields to implement more flexible group chart management

If you need to manage the group image more finely, for example, to set different image sets for different types of articles, or to add separate descriptions for each image in the group image, you can 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", for example namedproduct_gallery. This will provide a dedicated area for you to upload and manage multiple images when editing articles.

When calling this custom group image field in the template, usearchiveDetailLabel 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 to meet the personalized needs of different content displays.

Common techniques for image processing in templates

AnQi CMS also provides some practical global settings and filters for image processing, further enhancing the effect and performance of image display:

1. Global image settingsIn the background's "Content Settings", you can configure the automatic compression of images, WebP format conversion, thumbnail size, and processing methods, etc.These settings will affect the generation and display of the entire site images, and reasonable configuration can significantly optimize the website loading speed and storage space.For example, enabling the WebP format can effectively reduce the size of images, and a unified 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 small image while looping through a group of images, you can use it like this:{{ imgUrl|thumb }}This will be generated according to the thumbnail rules you defined in the "Content Settings".imgUrlGenerate a thumbnail version.

3. |safeFilter: When processing article content (ContentIf a field is enclosed in|safeA filter to ensure that these HTML codes can be properly parsed by the browser rather than being escaped as plain text. For example:{{ archiveContent|safe }}This requires you to confirm the safety of the content source to prevent potential XSS risks.

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

Frequently Asked Questions (FAQ)

1. Why did I upload multiple images, but{% archiveDetail with name="Images" %}yet there is no output?This is usually because the way you uploaded multiple images may not be correctly associated withImagesthe field. In Anqi CMS,ImagesFields are mainly used to store images inserted in the article editor or through the content modelCustom fields specifically set for the "group photo" type. If you upload it to the 'Document Image' area, it is usually only used as the cover logo and 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. My article thumbnail is displaying incorrect size or is blurry, how can I adjust it?The display effect of thumbnails is mainly influenced by two aspects: one is the 'Thumbnail Size' and 'Thumbnail Processing Method' configured in the 'Content Settings' on the back end; the other is the CSS style in the template.