How to render the category Banner image set in the backend in the front-end template?

In Anqi CMS, displaying the Banner images of categories on the front-end template is a common operation that can effectively enhance the visual effects of the page.AnQi CMS provides flexible backend settings and powerful front-end template tags, making this process simple and intuitive.

Step 1: Set the category Banner image in the backend

First, we need to upload a Banner image to the target category in the Anqi CMS backend management system. This operation is very intuitive:

  1. Log in to your Anqi CMS backend.
  2. Navigate to the "Content Management" section and click on "Document Category".
  3. Here, you can choose to edit an existing category or create a new one. After entering the category editing page, you will see various settings related to categories.
  4. Scroll down the page to find the "Other parameters" section. After expanding this section, you will see an option named "Banner image".
  5. Click the upload button, you can upload one or more Banner images for this category.If you need to display a carousel effect, it is recommended to upload multiple images and ensure that all images are of the same size, so that the visual effect will be better when displayed on the front end.
  6. Moreover, you will also see the 'thumbnail' and 'thumbnail large image' options, which are usually used to display a single category image, such as in the icon or main image of the category list page.Although the 'Banner Image' is mainly used for large horizontal banners at the top of the page, in some designs, you can also use the 'Thumbnail Large Image' as a single Banner.
  7. After uploading the image, remember to save your category settings.

Step two: Understand the principle of front-end template rendering.

The Anqi CMS front-end template system is designed to be very flexible, it adopts a syntax similar to the Django template engine. This means that in the template file, you will use double curly braces{{变量}}To output data, as well as single curly braces and percentages{% 标签 %}To perform logical judgments or loop operations.

Template files are usually named with.htmlsuffix and stored in/templateUnder the directory. For pages related to categories, such as category list pages, template files may be named as{模型table}/list.html, or you can customize templates for specific categories, such as{模型table}/list-{分类ID}.html.

To render the background-set category Banner image, the core is to use the built-in template tags of Anqi CMS to obtain the detailed information of the category. Among them,categoryDetailThe tag is a key tool for obtaining detailed information about a single category, it can access all category attributes including the Banner image.

Step 3: Call the Category Banner image in the frontend template

The way to call it will be slightly different depending on which page you want to display the Category Banner.

1. Display Banner Image on Current Category Page

If you want to display a category-specific Banner at the top of a list page or detail page for a category, you can use thecategoryDetailtag to get the data for the current category.

For example, in/template/{您的模板目录}/{模型table}/list.html(Or custom category template) in the file, you can call it like this:

{# 获取当前分类的Banner组图 #}
{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %} {# 判断是否存在Banner图片 #}
<div class="category-banner-slider">
    {# 遍历Banner组图中的每一张图片 #}
    {% for item in categoryBanners %}
    <img src="{{ item }}" alt="{% categoryDetail with name='Title' %}" class="banner-image">
    {% endfor %}
</div>
{% else %}
{# 如果没有设置Banner图，可以显示一个默认图片或留空 #}
<div class="default-banner">
    <img src="/public/static/images/default-banner.jpg" alt="默认分类横幅">
</div>
{% endif %}

{# 如果只需要显示分类的“缩略图大图”（Logo），可以这样调用： #}
{% categoryDetail categoryLogo with name="Logo" %}
{% if categoryLogo %}
<div class="category-main-image">
    <img src="{{ categoryLogo }}" alt="{% categoryDetail with name='Title' %}" class="logo-image">
</div>
{% endif %}

In this code block:

  • {% categoryDetail categoryBanners with name="Images" %}It will get all the Banner image arrays set in the background of the current category and assign them tocategoryBannersVariable.
  • {% if categoryBanners %}Used to determine if the Banner image has been uploaded, to avoid errors or blank displays when there is no image.
  • {% for item in categoryBanners %}Loop through the image array,itemHere is the image URL directly.
  • {% categoryDetail with name='Title' %}Used to get the current category title, as the image'saltattribute, which is helpful for SEO.
  • name="Logo"Then you can get the thumbnail and full image you uploaded on the backend.

2. On other pages (such as the homepage) call the specified category of Banner images

If you need to display a specific category Banner on the homepage or other non-category pages, you cancategoryDetaillabel'sidspecify the parameter to get the data of which category.

Assuming you want to display the Banner of the "Product Display" category with ID 5 on the homepage:

{# 调用ID为5的分类的Banner组图 #}
{% categoryDetail productCategoryBanners with name="Images" id="5" %}
{% if productCategoryBanners %}
<div class="homepage-product-banner">
    {% for item in productCategoryBanners %}
    <img src="{{ item }}" alt="{% categoryDetail with name='Title' id='5' %}" class="banner-image">
    {% endfor %}
</div>
{% endif %}

{# 也可以结合categoryList标签，遍历多个分类并显示它们的Logo或Banner #}
{% categoryList featuredCategories with moduleId="2" parentId="0" limit="3" %} {# 假设模型ID为2是产品模型，获取3个顶级分类 #}
<div class="featured-categories-banners">
    {% for category in featuredCategories %}
    <div class="category-card">
        <h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
        {# 获取每个分类的Logo作为小Banner展示 #}
        {% if category.Logo %}
        <img src="{{ category.Logo }}" alt="{{ category.Title }}" class="category-card-logo">
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endcategoryList %}

This code demonstrates how to specifyidTo get the Banner of a specific category and how to iterate over multiple categories to fetch and display theirLogo(usually the main category image or small Banner).

Step 4: Optimization and Advanced Application

  • Style control:The above code provides only the basic HTML structure. You need to combine CSS to beautify the Banner display effects, such as setting width, height, margin, animation, etc.
  • Carousel effect:If you upload multiple Banner images, you may need to introduce JavaScript libraries (such as Swiper.js, Owl Carousel, etc.) to implement automatic scrolling, switch buttons, and pagination indicators for interactive effects to enhance the user experience.
  • Responsive design: