In website operation, the category page is not only the classification display of content, but also the key entry for users to explore the website and gain a deeper understanding of products or services.A well-designed category banner that can effectively enhance the visual appeal of the page, strengthen the brand image, and guide users to the next step.AnQiCMS as an efficient content management system provides a flexible way to manage and call these banner images.
Next, we will discuss in detail how to set up a Banner image for the category page in AnQiCMS and display it on the website frontend.
One, backend management: configure Banner image for category
First, you need to upload and configure the Banner image for your category page in the AnQiCMS backend management interface.
- Enter category managementLog in to the AnQiCMS backend, navigate to the 'Content Management' module, select 'Document Category' or 'Product Category', find the specific category where you want to add a Banner image, click 'Edit' to enter its detailed settings page.
- Upload Banner ImageIn the category editing page, you will see a feature option named "Banner image".Here you can upload one or more images.Generally, it is recommended to upload banner images of consistent dimensions to maintain the neatness and professionalism of the page.These images can be static images, or used as slide show materials.
- Save SettingsAfter uploading, be sure to click the "OK" or "Save" button at the bottom of the page to ensure that your configuration takes effect.
After completing this step, your categorized data will include Banner image information, and the next step is to call them in the front-end template.
Second, template call: Display Banner image on the category page
We need to edit the corresponding template file to display these banner images on the category page of the website (usually the article list page or product list page).The AnQiCMS category page template is usually namedlist.htmlor more specificlist-{分类ID}.htmlfor examplearticle/list.htmlorproduct/list-10.html)
AnQiCMS provides a namedcategoryDetailThe powerful template tag, specifically used to retrieve the details of the current category or a specified category, which includes the Banner image we just uploaded to the backend.
1. Get the Banner image data of the category
In the template of the category page, you can obtain the list of Banner images of the current category in the following way:
{% categoryDetail categoryImages with name="Images" %}
here,categoryImagesIs a variable name you define, used to store the obtained Banner image array.name="Images"It tells the system that you need to get the category Banner image group. Because you are already on the current category page, socategoryDetailThe label will automatically identify and retrieve data from the current category without additional specificationidortokenParameter.
ObtainedcategoryImagesis an array of image URLs, you can iterate through the array as needed, or simply take the first image.
2. Display multiple Banner images (carousel)
If you have uploaded multiple Banner images and want to display them as a carousel on the front end, you can combine AnQiCMS'sforloop tags to iterate:
<div class="category-banner-carousel">
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %} {# 判断是否有图片上传 #}
{% for item in categoryImages %}
<div class="carousel-item">
<img src="{{ item }}" alt="{% categoryDetail with name="Title" %} Banner" />
</div>
{% endfor %}
{% else %}
{# 如果没有Banner图，可以显示一个默认占位图或者不显示 #}
<img src="/static/images/default-banner.jpg" alt="默认分类Banner" />
{% endif %}
{% endcategoryDetail %}
</div>
In this example,itemthe variable will get a picture URL from the array in each loop.altthe attribute usescategoryDetail with name="Title"the tag dynamically retrieves the current category title to enhance SEO friendliness..category-banner-carouseland.carousel-itemare some custom CSS classes, you may also need to use JavaScript libraries (such as Swiper, Owl Carousel, etc.) to implement the carousel effect.
3. Display a single Banner image (as the page top background)
If your design only needs to display a Banner image at the top of the category page, for example, as the background image of the page, then you can only get the first image in the array:
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set firstBanner = bannerImages[0] %} {# 获取第一张图片URL #}
<div class="page-top-banner" style="background-image: url('{{ firstBanner }}');">
<h1>{% categoryDetail with name="Title" %}</h1>
<p>{% categoryDetail with name="Description" %}</p>
</div>
{% else %}
{# 如果没有Banner图，可以显示一个默认的背景或者占位内容 #}
<div class="page-top-banner default-bg">
<h1>{% categoryDetail with name="Title" %}</h1>
<p>欢迎访问我们的{% categoryDetail with name="Title" %}分类</p>
</div>
{% endif %}
{% endcategoryDetail %}
Here, we use{% set firstBanner = bannerImages[0] %}Assign the URL of the first image obtained tofirstBannerVariables, then use them as CSS background images. This method is flexible and common, and can integrate well with page design. Similarly,altThe logic of properties and default placeholders should also be considered.
Summary
By using the simple category management feature of AnQiCMS backend, combined with flexible and powerful template tags, you can easily add and display banner images on the website's category page.Whether it is a multi-image carousel or a single-image background, AnQiCMS can provide a convenient implementation method to help you create a visually attractive and excellent user experience website.
Frequently Asked Questions (FAQ)
1. Why did I upload the category Banner image on the backend, but it doesn't display on the front page?This is usually because your current category page template (for examplelist.htmlorlist-{分类ID}.htmlThe corresponding template call code was not added. Please check your template file to ensure it has been used.{% categoryDetail categoryImages with name="Images" %}This tag is used to retrieve and display images. If the template does not contain this code, or the code is incorrect, the Banner image will not be displayed.
2. What will be displayed on the page if no Banner image is set under the category?This depends on how you handle the case of no Banner image in the template. In the above example code, we used{% if categoryImages %}to determine if there is image data. IfcategoryImagesEmpty, you can choose to display a default placeholder image, a preset background color, or simply not display the Banner area to maintain the integrity and design consistency of the page content.
3. Can I set different Banner display modes for different categories? For example, one category uses a carousel, and another category only uses a single image?Of course, you can.The template mechanism of AnQiCMS is very flexible.
A method is to specify different template files for different categories.article/list-carousel.htmlorarticle/list-single-banner.htmlThen write the carousel or single image call code in these templates.
Another method is to dynamically determine the display logic within the same category template by judging certain characteristics of the current category (such as category ID, custom fields, etc).ifConditional statements are used for judgment and rendering.