In website operation, the category page is an important entry for users to browse content and understand the website structure.An aesthetically pleasing, theme-specific category page banner or carousel image, which can significantly enhance user experience, strengthen brand image, and effectively guide users to explore more content.AnQiCMS as an efficient and flexible content management system, provides a very convenient way to display these images on the category page.
This article will elaborate in detail from two aspects: backend settings and frontend template calls, on how to add a dedicated banner image or carousel image to your category page in AnQiCMS.
Step 1: Set Banner image for category in the background
One of AnQiCMS's design philosophies is its high degree of customization, and setting up a Banner image for categories is a demonstration of this advantage.
First, please log in to your AnQiCMS back-end management interface. Navigate to the left-hand menu'sContent management" option, then select "Document Category.
Find the specific category you want to set the Banner. You can click the "English" on the right side of the category.EditPress the button to modify, or you can also complete the settings in the process of adding a new category if you are creating a new category.
At the bottom of the category editing page, you will find a foldable area named “Other parameters”. Expand this area, and you will see a foldable area named “Banner imageThe settings item. This is the key location for uploading and managing category Banner images.
You can upload one or more images as needed.AnQiCMS supports uploading multiple images as sliders, and the system will automatically recognize them as a collection of images for that category.To ensure the beauty and consistency of the front-end page, I strongly recommend that you upload images with consistent size and proportion.OKThe button saves your changes.
第二步：In the front-end template, call and display the Banner image
Completed the upload of background images, and next we need to make these images 'shine' on the category page of the website's front end.AnQiCMS's template system uses syntax similar to Django, which is very intuitive.
通常情况下，分类页面的模板文件会存放在您当前使用的模板目录下{模型table}/list.html(For example,article/list.htmlorproduct/list.html），or you may have already specified a custom template file for this category.Please find the appropriate location in your template file and add the following code snippet to call the Banner image.
We mainly use it{% categoryDetail %}this tag to get the detailed information of the current category, which includes the Banner image data we uploaded.
1. Call multiple images to implement a carousel effect
If you have uploaded multiple Banner images for categories in the background and want to display them as a carousel on the front end, you can do it like this:
{# 获取当前分类的Banner图片列表 #}
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %} {# 检查是否有图片上传，避免空内容 #}
<div class="category-banner-carousel">
{# 这里可以集成您的前端轮播插件所需的HTML结构，例如Swiper或Owl Carousel #}
<div class="swiper-wrapper">
{% for imageUrl in categoryImages %}
<div class="swiper-slide">
<img src="{{ imageUrl }}" alt="{% categoryDetail with name='Title' %}" class="img-fluid" />
</div>
{% endfor %}
</div>
{# 如果需要，可以添加轮播的导航、分页器等控制元素 #}
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
{% endif %}
In the above code:
{% categoryDetail categoryImages with name="Images" %}This line of code assigns the array of current category Banner image URLscategoryImagesa variable.{% if categoryImages %}This is a conditional judgment to ensure that the related HTML is rendered only when the category has indeed uploaded a Banner image, to avoid blank pages or errors on the page.{% for imageUrl in categoryImages %}: Iterate overcategoryImagesArray,imageUrlThe variable will sequentially obtain the URL of each image.<img src="{{ imageUrl }}" alt="{% categoryDetail with name='Title' %}" class="img-fluid" />: Output the image tag,altThe attribute used is{% categoryDetail with name='Title' %}to dynamically get the current category title, which is very friendly to SEO.- Please note:in the above code snippet,
swiper-wrapper/swiper-slide/swiper-button-prevThis is the HTML structure example of the Swiper carousel plugin.If you use other carousel plugins, please replace it with the corresponding HTML structure of the plugin, and make sure to include the corresponding CSS and JavaScript files.
2. Only display one Banner image (e.g., as the category header cover)
If you only need to display the first uploaded image as the cover for the category page, you can do it like this:
{# 获取当前分类的Banner图片列表，并只取第一张 #}
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
{% set firstBanner = categoryImages[0] %} {# 使用set标签获取数组中的第一张图片 #}
<div class="category-single-banner">
<img src="{{ firstBanner }}" alt="{% categoryDetail with name='Title' %}" class="img-fluid" />
{# 您可以在图片上方或下方放置分类标题等 #}
<h1>{% categoryDetail with name='Title' %}</h1>
</div>
{% endif %}
Here,{% set firstBanner = categoryImages[0] %}Passsettags tocategoryImagesAssign the URL of the first image in the array tofirstBannerthe variable, and then use this variable to display the image.
3. Display the Banner image as a background image
Sometimes, you may want to use a Banner image as the background picture of a certain area on the page to achieve a more unique design effect. This is also very easy:
{# 将Banner图作为背景图片显示 #}
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
{% set firstBanner = categoryImages[0] %}
<div class="category-hero-banner" style="background-image: url('{{ firstBanner }}'); background-size: cover; background-position: center; height: 300px;">
{# 您可以在这里放置分类标题或其他内容，例如一个居中对齐的H1标题 #}
<h1 class="text-center text-white">{% categoryDetail with name='Title' %}</h1>
</div>
{% endif %}
Here we use the image URL as the CSSbackground-imageattribute value to apply. By adjustingheight/background-sizeetc. CSS properties, you can flexibly control the display effect of the background image.
Through the above simple background configuration and frontend template tag call, you can easily display exquisite banner images or carousel images on the AnQiCMS category page.This not only makes your website more visually appealing, but also more effectively conveys the classification theme, enhancing the user's browsing experience.
Common Questions (FAQ)
1. Why doesn't the front page display the Banner image I uploaded?When encountering this situation, please first check two core points:
- Backend configuration:Confirm that you have logged in to the AnQiCMS backend, entered "Content Management" -> "Document Category
- Template call:Check your classification template file (for example
article/list.htmlor the custom classification template you added{% categoryDetail %}label to callImagesField