How to display document, category, or single page associated image groups (such as Banner galleries) in Anqi CMS template?

When building a website, a beautiful image set, such as a carousel banner, is an important element to attract visitors' attention and display key content.AnQiCMS provides flexible and powerful template functions, allowing you to easily display these groups of pictures associated with documents, categories, or single pages on the website.

This article will deeply explore how to call and display these image groups in the Anqi CMS template, helping you better utilize visual content to enhance the attractiveness of your website.

Understand the image group mechanism in Anqi CMS

The AnQi CMS was designed with the richness of content display in mind, therefore, the management backend for documents (Archive), categories (Category), and single pages (Page) all have built-in support for image groups.These image groups usually exist in the form of 'Banner images' or 'slideshow groups', allowing operators to upload multiple images for each content unit.

At the template level, whether it is the document detail page, category list page, or single page detail page, these associated image groups are all unified through a name calledImagesAccess the field. This means that whether you are displaying a product article's Banner, a product category's Header image, or a carousel on the "About Us" page, you can use a similar template logic to call it.

Template basics: How to reference image groups

The Anqi CMS template syntax is based on the Django template engine, through{{变量}}to output data, through{% 标签 %}Perform logical operations. To display a group of images, we need to use the following core tags:

1. Details tag:Used to obtain detailed information for a specific document, category, or single page.
   • archiveDetail(document detail label)
   • categoryDetail(category detail label)
   • pageDetail(single page detail label)
2. name="Images"parameters:This is used to specify that we are to obtain the "image group" data associated with the content unit.
3. forLoop label:Since image groups usually contain multiple images, we need to usefora loop to iterate over each image.
4. ifconditional tags:Before displaying the image group, it is best to check if the image group exists to avoid the page showing empty content or errors.
5. setVariable assignment tag (optional):Sometimes we may only need the first image in the image group, and at this time we can usesettags to easily extract.

Actual operation: Display the image group in the template

Let's take a look at how to display image groups in document, category, and single page templates.

1. Display image groups in the document detail template

When you edit a document and upload the 'Document image set' in the 'Other parameters' section in the background, you can view the document detail template (usually{模型table}/detail.htmlor{模型table}/detail-{文档ID}.htmlUsed inarchiveDetailtags to call.

A typical code snippet for displaying a group of images might look like this:

{# 假设我们正在文档详情页，获取当前文档的图片组 #}
{% archiveDetail docImages with name="Images" %}
{% if docImages %} {# 判断图片组是否存在 #}
    <div class="banner-slideshow">
        {% for imageUrl in docImages %} {# 遍历图片组中的每一张图片 #}
            <img src="{{ imageUrl }}" alt="文档图片 - {{ archive.Title }}" />
        {% endfor %}
    </div>
{% endif %}
{% endarchiveDetail %}

In the code above,archive.TitleIt is the title of the current document and can be used as an image title:altattribute, which is helpful for SEO.

2. Display the image group in the category detail template

For a certain product category or article category, if you upload a "Banner image" when editing the category in the background, then in the category details template (usually ){模型table}/list.htmlor{模型table}/list-{分类ID}.htmlIn it, you can usecategoryDetailtags to call.

Here is an example of calling the category Banner image set

{# 假设我们正在分类列表页，获取当前分类的Banner图集 #}
{% categoryDetail catImages with name="Images" %}
{% if catImages %} {# 判断Banner图集是否存在 #}
    <div class="category-banner-carousel">
        {% for imageUrl in catImages %} {# 遍历Banner图集中的每一张图片 #}
            <img src="{{ imageUrl }}" alt="分类Banner - {{ category.Title }}" />
        {% endfor %}
    </div>
{% endif %}
{% endcategoryDetail %}

here,category.TitleRepresents the current category name

3. Display the image group in the single page detail template

If your "About Us", "Contact Us", and other single-page need to display a carousel or a set of Banner, you can upload the "Banner Image" when editing the single-page in the background. Then in the single-page detail template (usuallypage/detail.htmlorpage/detail-{单页ID}.htmlUsed inpageDetailCall the tag.

The calling method of the single-page image group is similar to the previous two:

{# 假设我们正在单页面详情页，获取当前单页面的幻灯片组图 #}
{% pageDetail pageImages with name="Images" %}
{% if pageImages %} {# 判断图片组是否存在 #}
    <div class="page-hero-section">
        {% for imageUrl in pageImages %} {# 遍历幻灯片组图中的每一张图片 #}
            <img src="{{ imageUrl }}" alt="单页面图片 - {{ page.Title }}" />
        {% endfor %}
    </div>
{% endif %}
{% endpageDetail %}

page.TitleIt will output the title of the current single page.

4. Only display the first image in the image group.

Sometimes, you may not need to cycle through all the images, but only want to display the first image in the image group as a cover or main banner. In this case, you can combinesetLabel and array index to operate:

{% archiveDetail docImages with name="Images" %}
{% set firstImage = "" %} {# 初始化一个变量来存储第一张图片 #}
{% if docImages and docImages|length > 0 %} {# 确保图片组存在且不为空 #}
    {% set firstImage = docImages[0] %} {# 获取图片组中的第一张图片 #}
{% endif %}

{% if firstImage %}
    <div class="document-cover-image">
        <img src="{{ firstImage }}" alt="文档封面" />
    </div>
{% endif %}
{% endarchiveDetail %}

This method is also applicable to categories and single pages, just by:archiveDetailReplacecategoryDetailorpageDetailJust do it.

optimize and **practice

• Image size consistency:Especially for carousel banners, it is recommended to upload images of the same size to avoid layout jumps on the page.
• addaltattribute:In<img>Tagged,altProperties can not only improve the accessibility of images, but also have a positive effect on SEO. It is recommended to combine it with the content title or description.
• Image optimization:The Anqi CMS backend provides features such as 'Enable Webp image format', 'Automatically compress large images', etc., making good use of these features can effectively reduce the size of image files and improve page loading speed.
• Lazy Loading (Lazy Load):If there are many images, consider adding lazy loading properties to the template<img>Add lazy loading attributes to the tag (such asloading="lazy"or implement with a JS librarydata-src), improve the page load performance. The document mentionsContentField supportslazy="data-src", you can refer to similar ideas for the image group.

By the above method, you can flexibly display the image group associated with documents, categories, and single pages in the Anqi CMS template, adding rich visual effects to your website.

Frequently Asked Questions (FAQ)

Q1: I have uploaded the image set on the backend and added the call tags according to the template code, but why are the images not displayed on the front-end page?

A1: Please check the following points:

1. Did the backend save successfully??Make sure you click the save button after editing the document, category, or single page, and that the image link is visible in the background. 2.