How to display multiple cover group images in a document detail page?

As an expert well-versed in website operations, I know that high-quality, visually appealing content is the key to retaining users and enhancing the value of a website.AnQiCMS (AnQiCMS) is a powerful content management system that provides great flexibility in content presentation.Today, let's delve deeply into a common need: how to cleverly display multiple cover group images in a document detail page to make the content more expressive.

AnQi CMS: Presenting beautifully! A practical guide to cyclic display of multiple cover group images on the document detail page

In an era where content is king, a beautifully crafted image is worth more than a thousand words, and a set of images with a story can even more attract the attention of users and enhance the reading experience of the content.AnQi CMS knows this way, its flexible content model design makes it easy to display multiple cover group images on the document detail page.This document will serve as your operation guide, leading you step by step to implement this feature, and making your website content come to life.

1. Understand the core: Content model and image field of AnQi CMS

One of the core advantages of AnQi CMS is its highly flexible content model.In the background "Content Management" module, you can define exclusive content models for different types of documents (such as articles, products, cases, etc.).Each model can be configured with multiple fields, including the management of image resources.

In AnQi CMS, the system defaults or can be customized to provide multiple image fields:

  • Document cover image (Logo) or thumbnail (Thumb):These fields are usually used to store a single image, as the cover of a document list page or as an illustration for the content of an article, with independence.
  • Document cover image group (Images) or custom image group field:This is the main character of today! It is a field that supports uploading multiple images, which together constitute a "group picture" and is very suitable for use in a detail page carousel or gallery display.Document details label of AnQi CMSarchiveDetailCan directly access the namedImagesThe group chart data, if you created other named group chart fields (such asproduct_gallery), you can also call them in a similar way.

Understanding the distinction between these fields is crucial, as it determines how you will call data in the template.

2. Target Location: Template file of document detail page

To implement the continuous display of cover group images, we first need to find the template file responsible for rendering document details. According to the template conventions of Anqi CMS, the template for the document detail page is usually located at a specific path under your template root directory:/{模型table}/detail.html.

For example, if your document belongs to the "article model", its table name isarticleThen the file you need to edit might be/template/default/article/detail.html(Assuming you are usingdefaultTemplate). Anqi CMS uses a syntax similar to the Django template engine, variables are enclosed in double curly braces{{变量名}}Control logic uses single curly braces and the percent sign{% 标签 %}.

3. Core operation: utilizingarchiveDetailTag looping display group image

Once we enter the correct template file, we can use the powerful of Anqi CMS.archiveDetailUse the tag to obtain detailed information about the document and extract the cover group image data.

archiveDetailThe tag is specifically used to obtain all the field data of the current document, including what we need.Imagesfield. Due toImagesThe field stores an array of image URLs, we need to combineforloop tags to iterate through and display each image.

Here is the key code snippet for implementing the circular display of multiple cover group images:

{# 首先，在文档详情页，通过 archiveDetail 标签获取当前文档的封面组图数据。 #}
{# 我们将获取到的图片数组赋值给一个自定义变量，例如 'galleryImages'。 #}
{% archiveDetail galleryImages with name="Images" %}

{# 接着，我们判断 galleryImages 变量是否存在且不为空，以避免页面出现错误。 #}
{% if galleryImages %}
    {# 在这里，您可以选择使用 ul/li 列表、div 容器或者其他 HTML 结构来包裹您的图片。 #}
    {# 这里以一个简单的 div 容器为例，后续可以结合前端JS库（如Swiper.js, Slick.js）实现更复杂的轮播效果。 #}
    <div class="document-image-gallery">
        {# 使用 for 循环遍历 galleryImages 数组中的每一项。 #}
        {# 循环中的 'imageItem' 变量将代表数组中的每一个图片URL。 #}
        {% for imageItem in galleryImages %}
            <div class="gallery-item">
                {# 使用 img 标签显示图片。为了优化加载速度和用户体验，建议为图片添加alt属性，并考虑引入懒加载。 #}
                <img src="{{ imageItem }}" alt="{% archiveDetail with name='Title' %} - 图片{{ forloop.Counter }}" loading="lazy">
            </div>
        {% endfor %}
    </div>
{% endif %}

Code analysis:

  • {% archiveDetail galleryImages with name="Images" %}: The function of this line of code is to get the current document'sImagesfield (i.e., cover group image data), and store it in a namedgalleryImages.
  • {% if galleryImages %}This is a conditional judgment to ensure thatgalleryImagesthe subsequent code will be executed only when the variable exists and contains data, avoiding rendering empty content when there is no group chart.
  • <div class="document-image-gallery">: This is a simple container, you can replace it with<ul>/<ol>or<div>structure, and assign the appropriate CSS class name.
  • {% for imageItem in galleryImages %}: This is the loop tag in AnQiCMS template language. It will traversegalleryImageseach element in the array, and assign the current element toimageItemVariable.
  • <img src="{{ imageItem }}" alt="{% archiveDetail with name='Title' %} - 图片{{ forloop.Counter }}" loading="lazy">: In each iteration, imageItemThis is the URL of the current image. We assign it to<img>label'ssrcProperty.altThe setting of the attribute is crucial for SEO and accessibility, here it combines the document title andforloop.Counter(Loop count, indicating the current image number) to generate.loading="lazy"Is the native lazy loading attribute of HTML5, which helps to improve page performance.

4. Optimization and Expansion: Enhancing User Experience

Displaying images in a loop is the first step, but to truly enhance user experience, we also need to consider some optimizations and expansions:

  • Image Lazy Loading (Lazy Load):Add as shown in the code example,loading="lazy"Properties are a convenient way to implement native lazy loading. For more complex lazy loading needs, you can combine with front-end JS libraries or use Anqie CMS.archiveDetailTag provided.lazy="data-src"Parameter, tosrcDynamically replace the property withdata-srcIt makes it easy for JS libraries to take over.
  • Image size optimization:The cover group images usually require good visual quality, but should also avoid large file size.In the "Content Settings" of Anqi CMS backend, you can configure the automatic compression, thumbnail processing methods, and size of images.Make sure your cover group image is properly processed when uploaded, generating sizes that meet the web display requirements.If you need to display images of different sizes in different scenarios on the front-end, you can prepare multiple sets of sizes when uploading or use AnQiCMS in the template.|thumbThe filter generates thumbnails of specified size based on the original image URL (specific usage requires consultation)filter-thumb.md)
  • Integrated frontend JS carousel library:A static image list may not be very appealing. You can introduce popular front-end JavaScript libraries such as Swiper.js, Slick.js, or Owl Carousel, etc., to convert the above loop-generated image list into a dynamic, responsive image carousel or gallery.Just follow the requirements of these libraries, add the corresponding HTML structure and CSS classes to the outer container and image elements, and then include and initialize the JS at the bottom of the page.

Summary

It is not difficult to display multiple cover group images in a loop on the document detail page through the flexible content model and intuitive template tags of Anqi CMS.This can make your content more vivid and engaging, and can effectively improve the visual experience and stay time of users on your website.Follow the guidelines in this article, and you will be able to easily integrate this feature into your Anqi CMS website, giving a powerful boost to your content marketing strategy.

Frequently Asked Questions (FAQ)

  1. **Ask: If my document has only a cover image,