How to loop through multiple cover group images on the document detail page?

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

AutoCMS: Delicate Presentation! Practical Guide to Displaying Multiple Cover Groups in Document Detail Page

1. Insight into Core: Content Model and Image Field of AutoCMS

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 the Auto CMS, the system usually provides various image fields by default or through custom settings:

  • Document cover image (Logo) or thumbnail (Thumb):These fields are usually used to store a single image, serving as the cover or illustration of the document list page or the content of the article, with independence.
  • Document cover image group (Images) or custom image field:This is the star of our show today!It is a field that supports uploading multiple images, which together form a "gallery", and is very suitable for carousel or gallery display on detail pages.archiveDetailCan directly obtain the name ofImagesThe group data, if you created other named group field names (such asproduct_gallery), you can also call it 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 the document detail page

To implement the cyclic display of cover group images, we first need to find the template file responsible for rendering the 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). The CMS uses a syntax similar to Django template engine, variables are enclosed in double curly braces{{变量名}}Control logic is implemented using single curly braces and the percentage sign{% 标签 %}.

3. Core Operations: UtilizearchiveDetailLabel Circular Display Group Image

Once we have entered the correct template file, we can use the powerful of Anqi CMSarchiveDetailTag to get the detailed information of the document and extract the cover group image data.

archiveDetailTag is specifically used to get all the field data of the current document, including the data we needImagesfields. BecauseImagesThe field stores an array of image URLs, we need to combineforloop tags to iterate through and display each image.

The following is the key code snippet for implementing the continuous 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" %}This line of code is used to get the current document'sImagesfield (i.e., cover group image data), and store it in a name calledgalleryImages.
  • {% if galleryImages %}: This is a conditional judgment, to ensure that only whengalleryImagesthe variable exists and contains data, the subsequent code will be executed, 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>the structure, and assign appropriate CSS classes.
  • {% for imageItem in galleryImages %}: This is a loop tag in AnQiCMS template language. It will iterate overgalleryImageseach element in the array, and assign the current element toimageItema variable.
  • <img src="{{ imageItem }}" alt="{% archiveDetail with name='Title' %} - 图片{{ forloop.Counter }}" loading="lazy">: In each loop,imageItemThis is the current image URL. We assign it to<img>Tagssrcproperties.altThe setting of properties is crucial for SEO and accessibility, here combining the document title andforloop.Counter（Loop count, indicating the current image number）is generated.loading="lazy"It is the native lazy loading attribute of HTML5, which helps to improve page performance.

4. 优化与扩展：提升用户体验 in English

仅仅循环显示图片是第一步，要真正提升用户体验，我们还需要考虑一些优化和扩展： in English

  • Image Lazy Loading (Lazy Load):As shown in the code example, addloading="lazy"Property is a convenient way to implement native lazy loading. For more complex lazy loading needs, you can combine with front-end JS libraries or use AnQi CMS.archiveDetailin the tags providedlazy="data-src"Parameters,srcProperty dynamically replace withdata-srcEnglish convenient for JS libraries to take over.
  • Image size optimization:Cover images usually require good visual quality, but should also avoid large file sizes.The "Content Settings" in the "Auto CMS" background allows you to configure the image auto-compression, thumbnail processing methods, and size.Ensure that your cover group image is properly processed during upload and generates sizes that meet the web display requirements.|thumbThe filter generates a thumbnail of the specified size based on the original image URL (specific usage needs to be checked)filter-thumb.md).
  • Integrated front-end JS carousel library:The static image list may not be very attractive.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 dynamic, responsive image sliders or galleries.Just follow these library requirements, 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

Through the flexible content model and intuitive template tags of AnQi CMS, it is not difficult to cyclically display multiple cover groups on the document detail page in English.This can not only make your content more vivid and engaging, but also effectively improve users' visual experience and stay time on your website.Follow the guidelines in this article, and you will be able to easily integrate this feature into your security CMS website, giving a powerful boost to your content marketing strategy.

Common Questions (FAQ)

  1. **问：If my document has only one cover image,