In website operation, adding attractive visual elements to category pages, such as banners and thumbnails, is an important step to enhance user experience and the professionalism of the website.AnQiCMS (AnQiCMS) is an efficient and flexible content management system that fully considers these needs, allowing you to easily set up and display these images on category pages.
This article will guide you on how to configure Banner images and thumbnails for category pages in the Anqi CMS backend, and share practical methods for displaying them in a carousel or list on the website front-end template.
Step 1: Set the Banner image and thumbnail for the category page in the backend
The strength of AnQi CMS lies in its flexible content model and category management features. To set a Banner image and thumbnail for a category page, you just need to enter the 'Content Management' module in the backend:
Enter Category Management:Log in to the AnQi CMS backend, navigate to the "Content Management
Select or create a category:In the category list, you can select an existing category to edit, or click the 'Add Category' button to create a new category.
Edit category information:
- Banner image:This is a particularly useful feature, where you can upload multiple images as the Banner for the category page.This means you can set a Banner slideshow for the same category page, enhancing the dynamic feel and visual impact of the page.When uploading images, it is recommended that you upload images of the same size to ensure the coordination and uniformity of the front-end carousel effect.
- Thumbnail:
Save settings:After finishing the image upload and selection, don't forget to click the 'OK' button at the bottom of the page to save your category settings.
Through these simple steps, you have already configured the required visual elements for the category page in the Anqi CMS backend.Next, let's see how to display these images on the website frontend.
Step 2: Display the Banner image and thumbnail in the front-end template
The Anqi CMS uses a template engine syntax similar to Django, allowing you to easily call category information set in the backend, including banner images and thumbnails.
1. Display Banner image and thumbnail on the category detail page
When a user visits a specific category page, you may want to display a large Banner image at the top of the page or show a category thumbnail on the side. At this time, we can usecategoryDetailTo get the detailed information of the current category, use the label.
Suppose you are editing the list template of categories (for example){分类模型}/list.html):
{# 首先，我们获取当前分类的详情信息 #}
{% categoryDetail currentCategory %}
{# 展示分类Banner图 (支持多张图片轮播) #}
{% if currentCategory.Images %}
<div class="category-banner-area">
{# 这里是一个简单的图片列表，实际轮播效果通常需要前端JS库辅助实现 #}
{% for image in currentCategory.Images %}
<img src="{{ image }}" alt="{{ currentCategory.Title }} 分类Banner" />
{% endfor %}
</div>
{% endif %}
{# 展示分类缩略图 (通常用于单个展示) #}
{% if currentCategory.Thumb %}
<div class="category-thumbnail">
<img src="{{ currentCategory.Thumb }}" alt="{{ currentCategory.Title }} 分类缩略图" />
</div>
{% endif %}
{# 您也可以获取分类大图，通常与缩略图是同一张但可能尺寸更大 #}
{% if currentCategory.Logo %}
<div class="category-logo">
<img src="{{ currentCategory.Logo }}" alt="{{ currentCategory.Title }} 分类Logo" />
</div>
{% endif %}
{# 继续展示分类名称、描述等其他信息 #}
<h1>{{ currentCategory.Title }}</h1>
<div>{{ currentCategory.Description }}</div>
{# 假设这里是该分类下的文档列表 #}
<div class="archive-list">
{% archiveList archives with type="page" categoryId=currentCategory.Id limit="10" %}
{% for item in archives %}
<div>
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
{% endif %}
<p>{{ item.Description }}</p>
</div>
{% endfor %}
{% endarchiveList %}
{% pagination pages with show="5" %}
{# 分页代码略 #}
{% endpagination %}
</div>
2. Display thumbnails in the category list
If you want to display a category list on the homepage, navigation menu, or other aggregated pages of the website, and have each category with its thumbnail, we can usecategoryListTag to loop and get information about multiple categories.
{# 获取所有顶级分类，或指定父分类下的子分类 #}
{% categoryList categories with moduleId="1" parentId="0" %}
<div class="category-list-section">
{% for category in categories %}
<div class="category-item">
<a href="{{ category.Link }}">
{% if category.Thumb %}
{# 使用缩略图作为分类的代表图片 #}
<img src="{{ category.Thumb }}" alt="{{ category.Title }}" class="category-list-thumb" />
{% endif %}
<h3>{{ category.Title }}</h3>
<p>{{ category.Description }}</p>
</a>
</div>
{% endfor %}
</div>
{% endcategoryList %}
Description of Banner Carousel effect:
The Anqi CMS provides you with the function to upload multiple banner images in the background, and this is displayed in the template.currentCategory.ImagesAn array format is provided to you.To achieve a real Banner carousel effect, it usually requires depending on front-end JavaScript libraries (such as Swiper.js, Owl Carousel, etc.) and the corresponding CSS styles.