How to call and display the category Banner image 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 categorized banner images, making your website more visually rich and professional.

Set Banner image for category 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 and select the "Document Categories" option.
  3. In the category list, find the category you want to add the Banner image to, and click the corresponding 'Edit' button.
  4. After entering the category editing page, scroll down to find the "Other Parameters" section, where you will see the "Banner Image" settings option.
  5. Here, you can click the upload button and select the prepared Banner image you have.The Anqi CMS supports uploading multiple images, which will be displayed as a carousel.To maintain the consistency of the page style, it is recommended that you upload images of the same size.

After uploading the image, 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.

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

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

A common scenario is to display a Banner at the top of a category page. Suppose you are editing the template of a category list page or a category detail page, you can add the following code snippet to the 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 current category (or the one specified byidortoken) the banner image array to the variable namedcategoryBanners.
  • {% if categoryBanners %}Used to determine whether the category has uploaded a Banner image, to avoid displaying empty areas when there is no image.
  • {% for imageUrl in categoryBanners %}Loop throughcategoryBannersarray,imageUrlThe variable will get a Banner image URL in each loop.
  • <img src="{{ imageUrl }}" alt="分类Banner图片" class="responsive-banner">Then the image is rendered onto the page.altProperties 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 just 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 picture:

{% 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] %}Assigned the URL of the first image in the array tofirstBannera variable. After that, we can use it as a CSS background image or directly as<img>label'ssrc.

Call a specific Banner on a specific category page

If you want to display the Banner image on a specific category page (such as the 'Product Display' category with ID 5), even if the current page is not the category page, you can do so by incategoryDetailExplicitly specify in the tagidParameter to implement:

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

In this way, we can accurately control where the Banner images of which categories are displayed, thus achieving a finer page layout and content presentation.

Summary

The AnQi CMS, with its clear backend operations and flexible template tags, makes it easy and pleasant to add and display banner images on category pages.No matter how many images you need to carousel, or just display a main visual image, Anqi CMS provides a convenient implementation path.Make the most of these features to effectively enhance the visual appeal and professionalism of your website.

Frequently Asked Questions (FAQ)

1. I uploaded the Banner image on the backend, but it didn't display on the front-end page, what's the matter?

First, make sure you have clicked the "Save" button after uploading the image on the category editing page. Second, confirm that the correctcategoryDetailtags have been added to the template file.ImagesField. If your template has just been modified or is being used for the first time, please try to clear the system cache of AnQi CMS to ensure that the latest modified template file is loaded.

How to set different Banner images for different subcategories?

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

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

You can optimize from several aspects:

  • Image size consistencyEnsure that all banner images within the same category maintain consistent dimensions, so that they can have better visual effects when displayed in a carousel or side by side.
  • Image compressionIn the background "Content Settings", Anqi CMS provides options such as "Whether to automatically compress large images" and "Whether to enable Webp image format".Turn on these features to automatically optimize image size and speed up page loading.
  • CSS style adjustmentUsing CSS to make Banner images responsive (for examplemax-width: 100%; height: auto;and centered cropping, ensuring they display perfectly on different devices and screen sizes.