How to call and display the Banner image of categories in AnQiCMS template?

In website operation, configuring unique banner images (Banner) for different category pages is an important means to enhance user experience and brand recognition.AnQiCMS (AnQiCMS) provides an intuitive way to manage and call these category banners, making your website more rich and professional in terms of visual appearance.

Set Banner image for categories in the background

Firstly, we need to upload a Banner image for the target category in the AnQi CMS backend. This process is very simple:

  1. Log in to your AnQi CMS backend management interface.
  2. Navigate to the 'Content Management' menu under the 'Document Category' option.
  3. In the category list, find the category you want to add a Banner image to, and click the corresponding 'Edit' button.
  4. Enter the category editing page, scroll down to find the 'Other Parameters' section, and you will see the settings for 'Banner Image'.
  5. Here, you can click the upload button and select the Banner image you have prepared.The CMS supports uploading multiple images, which will be displayed as a carousel.To maintain a consistent page style, it is recommended that you upload images of the same size.

Complete the image upload and remember to click the 'Save' button at the bottom of the page to ensure your settings take effect.

Call and display the category Banner image in the template

When the Banner image is set up in the background, the next step is to display it in the website's frontend template.The template system of Anqi CMS is flexible and powerful, we can easily achieve this goal through specific tags.

To call the Banner image of the classification, we mainly usecategoryDetailTag, and specifyname="Images"The parameter. This tag will return an array containing all the uploaded image URLs.

An example scenario is to display a Banner at the top of the category page. Suppose you are editing the template of the category list page or category detail page, you can add the following code snippet at an appropriate position on the page to loop through and display all Banner images: 

{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
<div class="category-banner-carousel">
    {% for imageUrl in categoryBanners %}
    <img src="{{ imageUrl }}" alt="分类Banner图片" class="responsive-banner">
    {% endfor %}
</div>
{% endif %}

In this code block:

  • {% categoryDetail categoryBanners with name="Images" %}This line assigns the array of Banner images for the current category (or one specified byidortokennamedcategoryBanners.
  • {% if categoryBanners %}Used to determine if the category has uploaded a Banner image, to avoid displaying an empty area when there is no image.
  • {% for imageUrl in categoryBanners %}to iteratecategoryBannersArray,imageUrlThe variable will get a Banner image URL in each loop.
  • <img src="{{ imageUrl }}" alt="分类Banner图片" class="responsive-banner">Then, render the image to the page.altAttributes are very important for SEO and accessibility, it is recommended to fill in meaningful text.class="responsive-banner"is an example class name, you can adjust it according to your own CSS style to ensure that the image displays well on different devices.

Only display the first Banner image

Sometimes, you may only need to display a Banner on the page, such as a background or a main visual image. In this case, you can use the index of the array to get the first image:

{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
    {% set firstBanner = categoryBanners[0] %}
    <div class="category-hero-section" style="background-image: url('{{ firstBanner }}');">
        <!-- 这里可以放置分类标题或其他内容 -->
    </div>
{% endif %}

Here,{% set firstBanner = categoryBanners[0] %}The array's first image URL is assigned tofirstBannera variable. After that, we can use it as a CSS background image or directly as<img>Tagssrc.

Call a specific Banner on a specific category page

If you wish to display the Banner image of a specific category page (such as the 'Product Display' category with ID 5) even if the current page is not that category, you can do so by incategoryDetailspecify in the tag.idTo implement:

{% categoryDetail productCategoryBanners with name="Images" id="5" %}
{% if productCategoryBanners %}
    {% set productHeroBanner = productCategoryBanners[0] %}
    <img src="{{ productHeroBanner }}" alt="产品展示分类的Banner">
{% endif %}

Through this method, we can precisely control where the Banner images of which categories are displayed, thus achieving a more refined page layout and content presentation.

Summary

The AutoCMS simplifies the backend operations and flexible template tags, making it easy and pleasant to add and display banner images on category pages.No matter how many images you need to scroll through, or just display one main visual image, Anqi CMS provides a convenient implementation path.Make full use of these features to effectively enhance the visual appeal and professionalism of your website.

Common Questions (FAQ)

1. I uploaded the Banner image on the backend, but the front-end page did not display. What's the matter?

Firstly, make sure you clicked the "Save" button after uploading an image on the category editing page. Secondly, confirm that the correct template file has been added.categoryDetaillabel to callImagesField. If your template has just been modified or is being used for the first time, please try to clear the security CMS system cache to ensure that the latest modified template file is loaded.

2. How to set different Banner images for different subcategories?

The Banner image of AnQi CMS is set independently for each category.This means that you only need to enter each specific sub-category editing page, upload its exclusive Banner image in the "Other Parameters".Each subcategory can have its own unique Banner without any additional complex configuration.

3. After uploading the Banner image, the display effect is not good, is there any way to optimize?

You can optimize from several aspects:

  • Consistency in image sizeEnsure that all Banner images within the same category have consistent dimensions, so that they can have better visual effects when displayed in a carousel or side by side.
  • Image Compression：In the background "Content Settings", SafeCMS provides options for "Whether to automatically compress large images" and "Whether to enable Webp image format".Turning on these features can automatically optimize image size, speeding up page loading.
  • CSS Style AdjustmentResponsive handling of Banner images using CSS (e.g.)max-width: 100%; height: auto;）and centered cropping, ensuring perfect display on different devices and screen sizes.