How to render the background category Banner image in front-end templates?

In AnQi CMS, displaying the category Banner image on the front-end template is a common operation that can effectively enhance the visual effects of the page.AutoCMS 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

Firstly, we need to upload a Banner image for 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 then 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 section labeled 'Other Parameters.' 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 have the same size. This will make the visual effect better when displayed on the front end.
  6. In addition, you will see the "thumbnail" and "thumbnail large image" options, which are usually used to display a single category image, such as in the icons or main image of the category list page.Although the "Banner image
  7. Complete the image upload and remember to save your category settings.

Step 2: Understand the principle of front-end template rendering

The frontend template system of Anqi CMS is designed to be very flexible, it uses syntax similar to Django template engine. This means that in the template file, you will use double curly braces{{变量}}Output data, as well as single curly braces and percentage signs.{% 标签 %}Execute logical judgments or loop operations.

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

To render the background settings of the category Banner image, the core lies in using the template tags built into the Anqi CMS to obtain detailed information about the category.categoryDetailThe tag is the key tool to get details of a single category, it can access all category attributes including the Banner image.

Third step: Call the category Banner image in the front-end template

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

1. In the current category page, display Banner images

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

For example, in/template/{您的模板目录}/{模型table}/list.htmlIn the (or custom category template) 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 the array of all Banner images in the current category backend settings and assign it tocategoryBannersa variable.
  • {% if categoryBanners %}Used to determine whether 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 it is the direct image URL.
  • {% categoryDetail with name='Title' %}Used to get the current category title, as the image'saltAttribute, which is helpful for SEO.
  • name="Logo"You can get the "thumbnail full image" you uploaded on the backend.

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

If you need to display a specific category's Banner on the homepage or other non-category pages,categoryDetailTagsidyou can specify which category's data to retrieve by parameter.

假设您想在首页展示ID为5的“产品展示”分类的Banner：

{# 调用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 %}

这段代码展示了如何通过指定idGet Banners for specific categories and how to get and display them when iterating over multiple categories.Logo(usually the main category image or small Banner).

Fourth step: Optimization and Advanced Application

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