How to display the Banner or carousel image for a category on the category page?

In website operation, the category page is an important entry for users to browse content and understand the website structure.A visually appealing, clear-themed category page banner image or carousel, which can significantly improve 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 category pages.

This article will elaborate on how to add a dedicated Banner image or slideshow to your category page in AnQiCMS from two aspects: backend settings and frontend template calls.

The first step: Set the Banner image for categories in the background

One of the design philosophies of AnQiCMS is its high degree of customization, and setting a Banner image for categories is a manifestation of this advantage.

First, please log in to your AnQiCMS backend management interface. Navigate to the left menu'sContent ManagementSelect thenDocument Category. Here, you can see the list of all content categories on the website.

Find the specific category you want to set the Banner. You can click on the category on the right side of the “EditModify the button or, if you are creating a new category, you can also complete the settings in the process of adding the category.

At the bottom of the category editing page, you will find a collapsible area named “.. Expand this area to see a named “Banner imageThe settings item. This is the key position for uploading and managing category Banner images.

You can upload one or more images as needed. AnQiCMS supports uploading multiple images as a carousel, 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 of the same size and proportion.After uploading, don't forget to click on the link below the pageConfirmButton to save your changes.

Step two: Call and display the Banner image in the front-end template

The upload of the background images has been completed, next we will let these images 'shine' on the classification page of the website's front end.The AnQiCMS template system uses syntax similar to Django, which is very intuitive.

Generally, the template files of the category page are stored in the template directory you are currently using{模型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 will mainly use{% categoryDetail %}This tag is used to obtain 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 upload multiple Banner images for categories in the background and want to implement a carousel display on the front end, you can call 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 code above:

• {% categoryDetail categoryImages with name="Images" %}This line of code assigns the array of Banner image URLs for the current category tocategoryImagesVariable.
• {% if categoryImages %}This is a conditional judgment to ensure that the related HTML is rendered only when the category has indeed uploaded the Banner image, to avoid blank pages or errors on the page.
• {% for imageUrl in categoryImages %}：TraversecategoryImagesarray,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,altProperties used{% categoryDetail with name='Title' %}to dynamically obtain 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 an example of the HTML structure for the Swiper carousel plugin.If you use another carousel plugin, 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 of 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] %}BysetLabels willcategoryImagesAssign the URL of the first image in the array tofirstBannera variable, and then use this variable directly 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 will use the image URL as a CSSbackground-imageattribute value to apply. By adjustingheight/background-sizeetc CSS properties, you can flexibly control the display effect of the background image.

By using the above simple backend configuration and front-end template tag call, you can easily display exquisite banner images or slide shows on the AnQiCMS category page.This can make your website more visually appealing and effectively convey the classification theme, enhancing the user's browsing experience.

Frequently Asked Questions (FAQ)

1. Why did I upload a Banner image but it didn't display on the front page?When encountering this situation, please check two core points first:

• Backend configuration:Confirm that you have logged in to the AnQiCMS backend, entered "Content Management" -> "Document Category" and edited the corresponding category, uploaded an image in the "Banner Image" area under "Other Parameters", and clicked the save button.
• Template call:Check your classification template file (for examplearticle/list.htmlor the custom classification template you added) to see if the correct one was included{% categoryDetail %}tags have been added to the template file.Imagesfield