How to get and display the custom Banner image group of the `categoryDetail` tag?

In website operation, configuring unique visual elements for different category pages, such as custom Banner image groups, is crucial for enhancing user experience and strengthening brand recognition.AnQiCMS (AnQiCMS) takes advantage of its flexible content management capabilities, allowing users to easily set up exclusive Banners for each category and provides intuitive template tags for conveniently displaying these contents on the frontend page.

We all know that when users browse the website, the category page is the key entry point for them to explore the content.A meticulously designed category Banner, which can instantly attract the attention of visitors and guide them visually to quickly understand the theme and features of the category.For example, a technology product category can showcase the latest electronic equipment Banner, while a fashion clothing category can present images of the latest trends of the season.This personalized visual presentation undoubtedly makes the website content more attractive and more in line with the psychological expectations of users.

In AnQi CMS, setting up a custom Banner image group for categories is a very direct process.First, you need to log in to the back-end management interface, find the 'Content Management' under 'Document Classification' feature.Here, select the specific category of Banner you want to configure, click edit.On the category editing page, you will see a field named "Banner Image".This field allows you to upload multiple images to form a Banner image group.To ensure consistency and aesthetic appeal in the front-end display, it is recommended that you upload images of the same size or maintain the same aspect ratio as much as possible.After the image upload and save, these banner image data are successfully associated with the category.

Next, it's time to display these carefully prepared Banner images on the website's frontend. Anqi CMS provides powerfulcategoryDetailThe label is specifically used to obtain detailed information about a specified category, including the Banner image group we uploaded.

To get the Banner image group of the category, we usually use it in the template of the category list page or the category detail pagecategoryDetaillabel. You can get it like this:

{% categoryDetail categoryData with name="Images" %}
{% if categoryData %}
  <div class="category-banner-container">
    {% for image_url in categoryData %}
      <img src="{{ image_url }}" alt="{% categoryDetail with name='Title' %}" class="category-banner-image">
    {% endfor %}
  </div>
{% endif %}

In the above code example,{% categoryDetail categoryData with name="Images" %}This tag is used to get the current category (if you are using it on the category page, it will automatically get the current category; you can also use it by the way,id="分类ID"The parameter specifies a specific category) where the field named "Images" is located, which is the Banner image group uploaded to our backend, and it is assigned to a variable namedcategoryDataThe variable. It is important to note that hereImagesfield will return an array containing all Banner image URLs.

We usually use it to ensure that related content is displayed only when there is a Banner image{% if categoryData %}Make a judgment. If the category has indeed uploaded a Banner image, the code will enter the inner loop.{% for image_url in categoryData %}This will iterate over this image URL array, each time the loop will assign the URL of a pictureimage_urlVariable.

In the loop body, we use<img src="{{ image_url }}" alt="{% categoryDetail with name='Title' %}" class="category-banner-image">This line of code to generate the actual image tag. Here,{{ image_url }}The actual link for displaying the banner image.alt="{% categoryDetail with name='Title' %}"It is a good practice that it dynamically retrieves the current category title as the alternative text for the image, which is not only beneficial for search engine optimization (SEO), but also improves the accessibility of the website.class="category-banner-image"It can conveniently allow you to control the layout and display effects of the Banner image through CSS styles.

In this way, you can not only flexibly control the Banner images of each category, but also make use of the powerful template engine of Anqi CMS to display these contents in a structured and semantic way on the website front-end, thereby providing visitors with a beautiful and informative browsing experience.

Frequently Asked Questions (FAQ)

Q1: What will the front-end display if a category does not upload a Banner image?A: If you use the example code as shown{% if categoryData %}To judge, then when this category does not upload any Banner images,categoryDatathe variable will be empty, the entire containing Banner images ofdivThe container will not be rendered on the page, meaning that no Banner images will be displayed on the frontend.This helps to keep the page neat and avoid blank areas.{% else %}Insert the default Banner HTML code in the branch.

Q2: How can I display only the first image among the multiple Banner images I uploaded?A: You can easily implement it through array indexing. First, use{% categoryDetail categoryData with name="Images" %}Get the entire Banner image group. Then, at the place where you need to display the first image, use{% if categoryData and categoryData[0] %}Check if the array exists and contains at least one image, then use{{ categoryData[0] }}to get the URL of the first image. For example:

{% categoryDetail categoryData with name="Images" %}
{% if categoryData and categoryData[0] %}
  <img src="{{ categoryData[0] }}" alt="{% categoryDetail with name='Title' %}" class="single-category-banner">
{% endif %}

Q3: What are the recommended dimensions and file formats for Banner images?A: There is no absolute standard for the recommended Banner image size, it mainly depends on your website design layout and the screen size of your target audience.But it is usually recommended that the width be between 1200px and 1920px, and the height should be adjusted flexibly according to the design requirements, with common sizes ranging from 300px to 600px.It is important to maintain the responsive display effect of the Banner image on different devices.As for file formats, JPEG format is suitable for photos and complex images, providing smaller file sizes and good quality; PNG format is suitable for images that require transparent backgrounds; WebP format is a modern image format that provides better compression efficiency and quality, it is recommended to enable Webp image format in the content settings of the Anqi CMS backend to optimize loading speed.Always remember to compress images appropriately to reduce file size and speed up page loading.