When building a website, a beautiful image set, such as a carousel banner, is an important element to attract visitors' attention and showcase core content.The AnQiCMS (AnQiCMS) provides flexible and powerful template functions, allowing you to easily display these groups of images associated with documents, categories, or single pages on the website.
This article will delve into how to call and display these image groups in the template of Anqi CMS, helping you better utilize visual content to enhance the attractiveness of your website.
Understanding the image group mechanism in Auto CMS
AutoCMS was designed with the richness of content display in mind, therefore the management backends for documents (Archive), categories (Category), and single pages (Page) all have built-in support for image groups.These images are usually 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 calledImagesThe field to access.This means that, whether you are displaying a product article's Banner, a product category's Header large image, or a carousel on the "About Us" single page, you can use a similar template logic to call it.
Template Basics: How to Refer to Image Groups
The template syntax of AnQi CMS is based on the Django template engine,{{变量}}Output data, through{% 标签 %}Execute logic operations. To display the image group, we need to use the following core tags:
- Details tag:Used to obtain detailed information for a specific document, category, or single page.
archiveDetail(Document Details Label)categoryDetail(Category Details Label)pageDetail(Single Page Details Label 翻译结果有误，正确应为 (Single Page Detail Label))
name="Images"Parameters:This is used to specify that we want to get the associated 'image group' data for this content unit.forLoop Label:Since image groups usually contain multiple images, we need to usefora loop to iterate over each image.ifcondition tags:Before displaying the image group, it is best to first determine if the image group exists to avoid the page from displaying empty content or encountering errors.setVariable assignment tag (optional):Sometimes we may only need the first image in the image group, and we can usesettags for convenient extraction.
Actual operation: Display the image group in the template
We will 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" in the background, you can view it in the document detail template (usually{模型table}/detail.htmlor{模型table}/detail-{文档ID}.html) usedarchiveDetailtags to call.
An example of a typical image group code snippet may 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 above code,archive.TitleIs the title of the current document and can be used as the image'saltAttribute, which is helpful for SEO.
2. In the category detail template, display the image group
For a product category or article category, if you upload a "Banner image" when editing the category in the background, then in the category detail template (usually{模型table}/list.htmlor{模型table}/list-{分类ID}.html), you can usecategoryDetailtags to call.
The following is an example of calling the category banner image album:
{# 假设我们正在分类列表页，获取当前分类的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 name of the current category.
3. Display the image group in the single-page detail template
If your "About Us", "Contact Us", or other single-page needs to display a carousel or a set of Banner images, you can upload "Banner images" when editing the single-page in the background. Then in the single-page detail template (usuallypage/detail.htmlorpage/detail-{单页ID}.html) usedpageDetailtags to call.
The call method of the single-page image group is similar to the former 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 show the first image in the image group
Sometimes, you may not need to carousel all images, but only want to display the first image in the image group as a cover or main Banner. At this time, you can combinesetTags 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 also applies to categories and single pages, just need toarchiveDetailwithcategoryDetailorpageDetail.
Optimization and **Practice
- Image size consistency:Especially for carousel banners, it is recommended to upload images of consistent size to avoid page layout jumping.
- Add
altProperties:In<img>in the tag,altThe attribute can not only improve the accessibility of the image, but also has a positive effect on SEO. It is recommended to fill in combination with the content title or description. - Image Optimization:The 'Whether to start Webp image format' and 'Whether to automatically compress large images' functions are provided in the 'Content Settings' of the Anqi CMS backend. Proper use of these functions can effectively reduce the size of image files and improve page loading speed.
- Lazy Load:If there are many images, consider adding lazy loading properties (such as
<img>tag lazy loading attributes (such asloading="lazy"or work with JS libraries to implementdata-src), to improve the performance of the first page load. The document mentionsContentfields supportlazy="data-src"You can refer to a similar idea for the image group.
Through the above method, you can flexibly display the image group associated with documents, categories, and single pages in the template of the Aanqi CMS, adding rich visual effects to your website.
Common Questions (FAQ)
Q1: I have uploaded the image set on the backend and added the call tags according to the template code, but why doesn't the front-end page display the images?
A1: Please check the following points first:
- Did the background save successfully?Ensure that you clicked the save button after editing the document, category, or single page, and that the image link is visible in the background. 2.