In website operation, the category page is not only a directory of content, but also a key entry for users to explore and discover your website's services or products.An beautifully designed, visually rich category page can significantly enhance user experience, inspire their interest, and guide them to delve deeper into browsing.AnQiCMS (AnQiCMS) provides flexible and powerful features, allowing you to easily display eye-catching banner slideshow images or exquisite thumbnails on the category page to enrich the visual effect and attract visitors' attention.
Anqi CMS Overview of Visual Richness Capabilities
The design philosophy of AnQi CMS focuses on the flexibility and customizability of content display.It allows users to customize content models based on business needs, which means you can set unique display styles for different content types (such as articles, products) and categories.In the category management, you will find options specifically for uploading 'Banner images' and 'thumbnails', which are designed to enhance the visual appeal of the category page.Through reasonable configuration, you can enable each category page to have its unique visual elements, thus better conveying the theme of the category and guiding user behavior.
Add Banner Carousel on Category Page
To display a set of Banner carousel images on the category page, you first need to configure it using the category management function of the Anqi CMS backend.
Enter the AnQi CMS backend, find "Document Classification" under "Content ManagementEdit the category you want to add for Banner, and on the edit page, you will see an option for 'Banner Image'.Here you can upload multiple images to form a picture group.To achieve the **visual effect, we recommend that you upload images of the same size to ensure that the height of the images is uniform during the carousel, and avoid page jumping.
When the image upload is complete, the next step is to show these images in the front-end template. The Anqi CMS template system uses syntax similar to Django template engine, and the files are usually named.html为后缀，并存放在 English/templateThe catalog. The template files of the category page are usually named{模型table}/list.htmlor{模型table}/list-{文档分类ID}.html.
In your category list template (for examplearticle/list.html), you can usecategoryDetailLabel to get the detailed information of the current category, including the uploaded Banner image group. Here is a basic template code snippet showing how to get and iterate over these images:
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
<div class="banner-carousel">
{% for item in categoryImages %}
<a href="javascript:void(0);" class="carousel-item"> {# 可以根据需要添加链接 #}
<img src="{{item}}" alt="分类轮播图片" />
</a>
{% endfor %}
</div>
{% endif %}
In this code,categoryDetail categoryImages with name="Images"It will get all the Banner images associated with the current category and assign themcategoryImagesThen, we loop through each parameter.{% for ... %}Loop through this image array and embed the URL of each image into<img>Label in.In order to achieve the carousel effect, you also need to introduce a front-end JavaScript library (such as Swiper.js or Slick.js) and the corresponding CSS styles to handle image switching, animation, and responsive layout.The CMS provides data, and the front-end code is responsible for the dynamic display.
Show thumbnails on the category page
In addition to the Banner carousel, configuring a representative thumbnail for the category page itself is also an effective way to enhance the visual effects.This is especially applicable to some categories where only a fixed image is needed instead of a carousel.
On the category management page, there is usually a 'thumbnail' option adjacent to the 'Banner image'.You can upload a carefully designed image as a thumbnail for each category.This image can be used as a category marker at the top of the category list, or as a visual guide to the subcategory on the parent category page.
Calling category thumbnails in the template is still simple, it iscategoryDetailTags:
{% categoryDetail categoryThumb with name="Thumb" %}
{% if categoryThumb %}
<img src="{{categoryThumb}}" alt="分类缩略图" class="category-thumbnail" />
{% endif %}
This code will retrieve the thumbnail URL of the current category and display it on the page. Please note,categoryThumbthe variable will contain the full path of the thumbnail.
In addition, the document (article or product) list displayed on the classification page can also be further enriched visually through their respective thumbnails.archiveListin the tag,item.ThumbField can directly obtain the thumbnail of each document, you can display it together with the document title, introduction, and other information: English
{% archiveList archives with type="page" categoryId="当前分类ID" limit="10" %}
{% for item in archives %}
<div class="article-item">
{% if item.Thumb %}
<a href="{{item.Link}}">
<img src="{{item.Thumb}}" alt="{{item.Title}}" class="article-thumbnail" />
</a>
{% endif %}
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description}}</p>
</div>
{% endfor %}
{% endarchiveList %}
Through this method, the classification page not only has its exclusive visual elements, but the article list below it can also be presented in a richly illustrated form, greatly enhancing the page's attractiveness.
The key elements and techniques of template creation
It is crucial to understand the template creation conventions of AnQi CMS when customizing templates. Template files should follow/templateThe directory structure and naming conventions, for example, the template of the category list page should be placed in the corresponding model directory, and may use suchlist.htmlorlist-{分类ID}.htmlname. Proficient in usingforLooping tags to iterate over the image array, andifConditional judgment tags to ensure that rendering only occurs when the image exists, making your template more robust.
Considering page loading speed and user experience, image optimization is an indispensable part.The "Content Settings" in AnQi CMS provides various image processing options, such as enabling WebP image format, automatically compressing large images, and setting thumbnail sizes.You can configure these options in the background to have the system automatically process images, reducing the burden on frontend optimization.For existing images, the system also supports batch regeneration of thumbnails, which is convenient for you to manage image resources uniformly.
Summary
An easy-to-use and powerful tool is provided by AnQi CMS for website operators to create engaging visual experiences on category pages.Whether it is to build a Banner carousel by uploading multiple images, or to specify a unique thumbnail for each category, these features are designed to help you better organize and present content, thereby attracting users and enhancing the overall professionalism and user engagement of the website.By flexibly using backend settings and frontend template tags, you can fully utilize the potential of Anqi CMS to create a beautifully and efficiently categorized page.
Common Questions (FAQ)
1. Why does my category page only show one or none of the Banner images I uploaded?This is usually caused by the front-end template not being correctly written to iterate over the image array. The 'Banner image' field uploaded on the Anqi CMS backend is represented as an image URL array in the template, and you need to use{% for item in categoryImages %}such loop tag to iterate over this array and generate the corresponding for each image<img>Label. If only one is displayed, it may be that you only took the first element of the array. If none are displayed, please check that your template file is correctly referenced.categoryDetaillabels, andname="Images"Is it spelled correctly.
2. How to make the Banner image or thumbnail of the category page look better on mobile and tablet devices?This involves responsive design and image optimization.In the 'Content Settings' of the AnQi CMS backend, you can configure image automatic compression, enable WebP format, and set thumbnail size. These all help to reduce the image size and speed up loading.object-fit属性。For the carousel, it is recommended to use a responsive design JavaScript carousel library, which usually automatically adapts to the device screen.
3. Can I set completely different Banner or thumbnail layout for different categories?Of course, you can.The CMS supports specifying a custom template for individual categories.my_category_banner.html）。This category will use the template file you specify, and you can freely design the layout and style of its Banner or thumbnail according to the characteristics of the category, without affecting other categories.