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

In website operation, images are an indispensable element in attracting visitors and conveying information.Reasonably using the cover image, thumbnail, and group image of the article can greatly enhance the visual appeal of the website, enrich the form of content presentation, and make your content more vivid and attractive.AnQiCMS as a flexible and efficient content management system provides a straightforward way to manage and call these image resources, helping you easily achieve a diverse display effect of images.

Understanding the image types in AnQiCMS

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

  1. Cover first image (Logo)This usually refers to the main visual image of an article or page, used to highlight display in top details pages, featured recommendation areas, etc., and is the first impression of the content.
  2. Thumbnail (Thumb)This is a缩小版 preview of an article or page, commonly used in list pages, recommendation modules, related articles, etc., to quickly overview the content in a compact size, thereby improving page loading speed.
  3. Group photo(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 types of images, let's see how to flexibly call them in the template.

Call the cover image of the article (Logo)

The cover image usually carries the role of the 'face' of the content, it should best represent the core theme of the article. In AnQiCMS, you canarchiveDetailEasily get 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. Usually, we will combinename="Title"to get the title of the article as the image.altAttribute, this not only helps SEO, but also provides a friendly text prompt when the image fails to load.

The same logic also applies to category pages (categoryDetail) or single pages (pageDetailFor example, to call the Banner large image of a category:

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

To call the thumbnail of an article:Thumb)

The thumbnail is particularly important on the list page or sidebar, as it provides a quick preview in a small size, without occupying too much page space or affecting loading speed.AnQiCMS automatically generates thumbnails based on the backend configuration when you upload article images, and even if you do not actively upload thumbnails, it will extract the first image from the article content as a thumbnail, or use the default thumbnail you have set.

To call the thumbnail of an article, you can use it like this:archiveDetailTags:

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

You can use it on the article list page:archiveListThe tag loops to output multiple articles and calls the thumbnail of each article in the loop.itemThe variable represents the article data of the current loop:

{% 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 of the specified image based on the thumbnail size and processing method you configure in the background "Content Settings". For example:

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

Invoke the group image of the article (Images)

When a content needs to display multiple related images, the collage feature becomes very useful.This is especially common in product details, case display, image gallery, and other scenarios.AnQiCMS stores group images as an image array, so when calling it in the template, we need to usefora loop to iterate through 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 URL list of the group image toarticleImagesvariable, then we useforLoop and output images one by one. You can wrap these images into a carousel, gallery, or a simple image list according to your actual needs.

Similarly, categories and single pages also support galleries, such as 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 for managing image processing. Here, you can set the thumbnail size, cropping or aspect ratio scaling mode, whether to automatically compress large images, and whether to enable WebP format, etc.Properly configure these options can effectively improve website loading speed and user experience.
  • Default thumbnailIt is a good habit to set a default thumbnail in "Content Settings".When an 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 optimization: When uploading images, try to use 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 seriously slow down page loading speed.
  • Semantic HTML: In use<img>Always fill in when labelingaltAttribute, this is not only friendly to SEO, 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 only responsible for obtaining the image resource links, and how to beautifully present them depends on the exquisite design of the front-end code.

With these flexible image call methods and backend fine-tuning, you can easily master the visual content of the AnQiCMS website and provide your visitors with a richer and more attractive browsing experience.

Frequently Asked Questions (FAQ)

1. Why is my article cover image or thumbnail not displaying, or is displaying the wrong image?First, please check whether you have uploaded a "document image" (i.e., thumbnail) or if the article content includes any images.If these two conditions are not met, the system may not be able to generate automatically.Next, go to the "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.Finally, ensure that your template code includesname="Logo"orname="Thumb"Spelling is correct.

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

3. Do the dimensions of the image I uploaded get automatically optimized by AnQiCMS?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 website loading speed, and do not require you to manually process each image.