How to display the image gallery based on whether there is an album in the `Images` field of `archiveDetail` or `pageDetail`?

Smartly use AnQi CMS: intelligently judge and display the image gallery in articles/pages

As an experienced website operation expert, I am well aware of the importance of content display for user experience and website attractiveness.In AnQiCMS (AnQiCMS) such an efficient and customizable content management system, how to flexibly present image content, especially dynamically displaying the image gallery based on whether there is an album, is a focus of many operators.Today, let's delve deeply into this practical skill, making your website content more visually striking while also maintaining the simplicity and elegance of the code.

AnQi CMS with its high-performance architecture in Go language and flexible content model provides us with great convenience. In the article (archiveDetail) and single page (pageDetailDuring the editing process, we usually use a name calledImagesThe field.This field is specifically used to store a collection of images related to the content, which can be illustrations for articles, multi-angle displays of products, or carousel images on a single page.Its design purpose is to make it convenient for content managers to upload and manage a set of images, while the front-end template is responsible for presenting these images beautifully to visitors.

However, having just oneImagesThe field is not enough.A mature website should have intelligent and dynamic content display.We do not want to display an empty image gallery area when no images are uploaded to an article or page, as this not only wastes page space but also affects the overall user experience.Only whenImagesThe field indeed contains images when the image gallery is rendered; otherwise, let this area 'disappear'.

The Anqi CMS template engine syntax is similar to Django, making conditional judgments and loop traversal intuitive and easy to understand.ImagesThe field is considered to be an array of image links (or a slice) in the template.This means we can easily check if it is empty and traverse each image link when it is not empty.

Practical exercise: Implementing intelligent display of image galleries in templates.

Now, let's implement the smart image gallery feature step by step through specific template code.

Step 1: Safely obtain image data

Whether it is an article detail or a single page detail, we need to get it through the corresponding tags firstImagesthe value of the field. Suppose we are on an article detail page, we can usearchiveDetailTags:

{% archiveDetail articleImages with name="Images" %}

Here, we declared a variable namedarticleImagesthat will carryImagesall the image URLs in the field. IfImagesthe field is empty,articleImageswill be an empty array.

If it is a single-page detail page, justarchiveDetailReplacepageDetailand it is done:

{% pageDetail pageImages with name="Images" %}

Similarly,pageImagesThe variable will save the image array of the single page.

Second step: determine if there are images available to display

After obtaining the image data, the key judgment link comes. Anqing CMSifThe logical judgment tag can complete this task very simply. When an array or slice (such asarticleImagesorpageImages) is usedifWhen a statement is executed, the template engine automatically determines whether it contains any elements. If it contains any, the condition is true; if it is empty, the condition is false.

{% if articleImages %}
    {# 这里是当有图片时才显示的内容 #}
{% endif %}

Or for a single page:

{% if pageImages %}
    {# 这里是当有图片时才显示的内容 #}
{% endif %}

In this way, we ensure that onlyImagesthe container of the gallery is rendered to the page when the field has actual content.

Step three: loop to display images and build the gallery

Once confirmed,articleImages(orpageImagesThe condition is not empty, we can use it.forLoop through this array and render each image.

{% if articleImages %}
    <div class="image-gallery">
        {% for imageUrl in articleImages %}
            <div class="gallery-item">
                <img src="{{ imageUrl }}" alt="文章图片" loading="lazy">
            </div>
        {% endfor %}
    </div>
{% endif %}

In the above code snippet:

  • We created a namedimage-gallerycontainer, this is the external framework of the gallery.
  • {% for imageUrl in articleImages %}The loop will iterate overarticleImageseach image link in the array. In each iteration, the current image link will be assigned toimageUrlVariable.
  • {{ imageUrl }}directly output the image link asimglabel'ssrcProperty.
  • alt="文章图片"This is an image description added for SEO and accessibility, it is recommended to dynamically generate based on actual content.
  • loading="lazy"It is a very practical HTML5 attribute that can implement lazy loading of images and optimize page performance.

The same logic applies to single-page applications, you just need to replace the variable name:

{% if pageImages %}
    <div class="page-gallery">
        {% for imageUrl in pageImages %}
            <div class="gallery-item">
                <img src="{{ imageUrl }}" alt="页面图片" loading="lazy">
            </div>
        {% endfor %}
    </div>
{% endif %}

Comprehensive example: Article detail page image gallery

Let's integrate the above steps together and see what the code for the image gallery section of a complete article detail page would look like:

<article class="article-detail">
    <h1>{{ archive.Title }}</h1>
    <div class="article-meta">
        <span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{{ archive.Views }}</span>
    </div>

    {# 智能图片画廊区域 #}
    {% archiveDetail articleImages with name="Images" %}
    {% if articleImages %}
        <div class="dynamic-image-gallery">
            <h3>图集欣赏</h3>
            <div class="gallery-grid">
                {% for imgUrl in articleImages %}
                    <a href="{{ imgUrl }}" data-lightbox="article-gallery" class="gallery-link">
                        <img src="{{ imgUrl }}" alt="{{ archive.Title }} - 图{{ forloop.Counter }}" loading="lazy">
                    </a>
                {% endfor %}
            </div>
        </div>
    {% else %}
        {# 如果没有图片，也可以选择显示一个默认提示或什么都不显示 #}
        <p class="no-images-tip">该文章暂无图片图集。</p>
    {% endif %}

    <div class="article-content">
        {%- archiveDetail articleContent with name="Content" %}
        {{ articleContent|safe }}
    </div>

    {# 其他文章内容，如相关推荐、评论等 #}
</article>

In this example, we also addeddata-lightbox="article-gallery"Property, this is usually combined with the front-end Lightbox (lightbox) JS library to provide users with the function of zooming in on images by clicking, greatly enhancing the user experience. At the same time,altThe attribute combines the article title with a loop counter, which is helpful for SEO optimization.

Advanced thinking and optimization

  1. Lazy loading of images and performance optimization: Besidesloading="lazy", Anqi CMS also providesImagesField supportslazy="{定义的src名}"For example, to handle lazy loading of images,lazy="data-src". In the content settings, you can also configure whether to automatically compress large images, convert to WebP format, and other functions to further improve image loading performance.
  2. **Front-end