How to call the cover image, thumbnail and group image of the article to enrich the display effect?

In website operation, images are indispensable elements to attract visitors and convey information.Properly using the cover image, thumbnail, and group images of an article can greatly enhance the visual appeal of a website, enrich the form of content presentation, and make your content more vivid and attractive.AnQiCMS is a flexible and efficient content management system that provides an intuitive way to manage and call these image resources, helping you easily achieve a variety of image display effects.

Understanding the image types in AnQiCMS

In AnQiCMS, we usually encounter several different types of images for various purposes:

  1. Cover main image (Logo)This usually refers to the main visual image of an article or page, used to highlight display in positions such as the top of the detail page and featured recommendations, and is the first impression of the content.
  2. Thumbnail (Thumb)This is a thumbnail preview of the article or page, commonly used in list pages, recommendation modules, related articles, etc. It provides a quick overview of the content with a compact size to enhance page loading speed.
  3. Group photos(Images): If your content requires a multi-angle, multi-image display, such as product detail images, event photos, or article illustration galleries, the group photo feature can come in handy.

After understanding these image types, let's take a look at how to flexibly call them in the template.

Call the cover image of the article (Logo)

The cover image usually serves as the 'facade' of the content, it should best represent the core theme of the article. In AnQiCMS, you canarchiveDetailLabel easily gets the cover image link of the article.

For example, on the article detail page, if you want to display the cover image of the current article:

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

Here,name="Logo"It will directly return the URL of the cover image of the article. At the same time, we usually combinename="Title"to get the article title as the image'saltProperties, not only do they help with SEO, but they also provide friendly text hints when images fail to load.

The same logic also applies to category pages (categoryDetail) or single pages (pageDetail)，for example, calling the Banner large image of the category:

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

Calling the thumbnail of the article (Thumb)

Thumbnail is particularly important on list pages or sidebars, etc., as it provides a quick preview in a small size without occupying too much page space or affecting loading speed.AnQiCMS will automatically generate thumbnails according to the backend configuration when you upload article images. Even if you do not actively upload a thumbnail, it will extract the first image from the article content as a thumbnail, or use the default thumbnail you have preset.

To call the thumbnail of the article, you can use the followingarchiveDetailTags:

<a href="{{item.Link}}">
    <img src="{% archiveDetail with name="Thumb" %}" alt="{{item.Title}}" />
</a>

On the article list page, you can usearchiveListTags loop to output multiple articles and call the thumbnail of each article in the loop.itemThe variable represents the current loop article data:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            {# 调用文章缩略图 #}
            {% if item.Thumb %}
            <img src="{{item.Thumb}}" alt="{{item.Title}}">
            {% else %}
            {# 如果没有缩略图，可以显示默认占位图或者不显示 #}
            <img src="/public/static/images/default-thumb.png" alt="{{item.Title}}">
            {% endif %}
        </a>
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
    </div>
    {% endfor %}
{% endarchiveList %}

It is worth mentioning that if you need to process a thumbnail of any image URL (instead of directly calling the already generatedThumbfield), AnQiCMS also provides|thumbFilter. This filter will dynamically generate a thumbnail for the specified image based on the thumbnail size and processing method you have configured in the "Content Settings" on the backend. For example:

<img src="{{ '/uploads/my_custom_image.jpg'|thumb }}" alt="自定义图片缩略图" />

Call the article's group image (Images)

When a content needs to display multiple related images, the collage feature is very useful.This is particularly common in scenarios such as product details, case presentations, image galleries, etc.forLoop to iterate and display each image.

For example, on the article detail page, if you want to display a set of images:

<div class="article-gallery">
    {% archiveDetail articleImages with name="Images" %}
    {% if articleImages %}
        {% for img in articleImages %}
        <img src="{{ img }}" alt="文章图片" />
        {% endfor %}
    {% else %}
        <p>暂无更多图片展示。</p>
    {% endif %}
</div>

Here,archiveDetail archiveImages with name="Images"Assign the list of group image URLs toarticleImagesthe variable, and then we go throughforIteratively output images. You can package these images into a slideshow, gallery, or a simple image list according to your actual needs.

Similarly, categories and single pages also support grouped images, for example, the category Banner carousel:

<div class="category-banner-slider">
    {% categoryDetail bannerImages with name="Images" %}
    {% if bannerImages %}
        {% for img in bannerImages %}
        <div class="banner-item">
            <img src="{{ img }}" alt="分类Banner" />
        </div>
        {% endfor %}
    {% endif %}
</div>

Practical Tips and Optimization Suggestions

  • Backend 'Content Settings'This is the core area where you manage image processing.Here, you can set the thumbnail size, cropping or aspect ratio scaling, whether to automatically compress large images, whether to enable WebP format, etc.Properly configure these options can effectively improve the website loading speed and user experience.
  • Default ThumbnailIt is a good habit to set a default thumbnail in the "Content Settings".When the article does not specify a thumbnail, the default image can serve as an elegant placeholder, avoiding ugly blank spaces or damaged image icons on the page.
  • Image OptimizationUpload images in WebP format (AnQiCMS supports automatic conversion) and ensure that the image size matches the display requirements.Images that are too large not only waste storage space but also significantly slow down page loading speed.
  • Semantic HTML: When using<img>When labeling, always fill inaltProperties, this is not only SEO-friendly but also improves the accessibility of the website.
  • CSS and JavaScriptThe final display effect of the image, such as layout, size adjustment, responsive layout, and even carousel effects, all need to be further implemented through CSS styles and JavaScript scripts.The tags provided by AnQiCMS are responsible for obtaining the image resource links, and how to present them beautifully depends on the exquisite design of the front-end code.

With these flexible image call methods and the refined backend configuration, you can easily navigate the visual content of the AnQiCMS website, providing your visitors with a richer and more attractive browsing experience.

Common Questions (FAQ)

1. Why isn't my article cover image or thumbnail displaying, or is displaying the wrong image?Firstly, please check if you have uploaded a "document image" (i.e., thumbnail) when editing articles in the background, or if there are any images included in the article content.If neither of these conditions is met, the system may not be able to generate automatically.Secondly, go to 'Background Settings' -> 'Content Settings', check if the 'Default Thumbnail' is set. If it is set, it will automatically display the default image when there is no picture.name="Logo"orname="Thumb"Spelling is correct.

2. How can I make my gallery images display as a dynamic carousel effect?AnQiCMS group image tag (en)Images) Simply responsible for outputting the list of image URLs.To implement the dynamic effect of the carousel, you need to combine a JavaScript library (such as Swiper, Owl Carousel, etc.) and CSS styles to build it in the front-end template.{% for img in articleImages %}The images in a loop are wrapped in the required HTML structure for the carousel component, and then the corresponding JS and CSS files are introduced for initialization.

3. Will AnQiCMS automatically optimize the size of the image I upload?Yes, AnQiCMS provides powerful image optimization features.In the 'Background Settings' -> 'Content Settings', you can enable 'Whether to automatically compress large images' and set the target width. Enabling 'Whether to start Webp image format' will automatically convert uploaded images to smaller WebP format.These settings can effectively reduce the size of image files, improve the loading speed of the website, without the need for you to manually process each image.