How to manage and display category Banner images and thumbnails?

In website operation, the category page is an important link to guide users to browse and deepen the brand impression.Configure a unique Banner image and thumbnail for the category page, which not only enhances the visual appeal of the website but also allows users to understand the category content more intuitively, effectively optimizing the user experience.Our company's CMS provides flexible and easy-to-use features in this aspect, helping us manage and display these visual elements efficiently.

One, efficiently manage the Banner images and thumbnails of categories

Managing the Banner image and thumbnail of the category is the first step in visualizing website content. The Anqi CMS backend design makes this process very intuitive.

When we enter the AnQi CMS backend management interface and navigate to the "Document Classification" module under "Content Management", we can start editing and setting the classification in detail.Whether it is to create a new category or edit an existing category, we will find a special area in the category editing form for uploading and setting the "Banner image" and "thumbnail".

1. Set Banner Image:The banner image is usually used at the top of the category page to display the theme or features of the category in a large image, creating a visual impact.Our company's Anqi CMS allows us to upload multiple Banner images for each category.This means we can design a carousel to be displayed at the top of the category page, bringing users a richer visual experience.When uploading, the system usually prompts us to select an image, we can upload a new image from the local, or directly choose from the existing image resource library on the website.A practical suggestion is to maintain the same size ratio of the uploaded Banner image to ensure uniformity of visual effects and loading performance.

2. Set Thumbnail:Category thumbnails are small representative images, not all categories need to be set, but for scenarios where category information needs to be displayed in a small image form in category lists, navigation menus, or other modules, the role of thumbnails is particularly important.For example, when displaying popular categories on the homepage of a website, a well-designed thumbnail can quickly attract the attention of users.We can upload or select an appropriate thumbnail for each category based on the actual front-end display requirements.

It is worth mentioning that all images uploaded through the backend will be uniformly collected under the "Page Resources" section under "Image Resource Management", which is convenient for us to carry out centralized management, classification, and reuse.In addition, to enhance website loading speed and user experience, AnQi CMS provides optimization options such as 'Whether to automatically compress large images', 'thumbnail processing method', and 'whether to enable Webp image format' under 'Background Settings' -> 'Content Settings', properly configuring these functions can effectively manage and optimize the website's image resources.

II. Flexible Display of Banner Images and Thumbnails for Categories

After setting up the Banner image and thumbnail for the category in the background, how to present it on the website front-end through template tags is the key to achieving the visual design effect.AnQi CMS provides a simple and powerful template tag, making this process flexible and controllable.

1. Display on Category Details Page (using)categoryDetailTag):When a user enters a specific category page, we may need to display a large banner image and detailed information for that category. At this point,categoryDetailLabels are our first choice.It can retrieve all detailed data for the current or specified category, including the Logo (usually used for large images), Thumb (thumbnail), and Images (Banner group images).

   • Display category logo (large image):

     {# 获取当前分类的大图Logo #}
     <img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
     
     {# 获取指定ID分类的大图Logo #}
     <img src="{% categoryDetail with name="Logo" id="1" %}" alt="{% categoryDetail with name="Title" id="1" %}" />
     

   • Display category thumbnail:

     {# 获取当前分类的缩略图 #}
     <img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />
     
     {# 获取指定ID分类的缩略图 #}
     <img src="{% categoryDetail with name="Thumb" id="1" %}" alt="{% categoryDetail with name="Title" id="1" %}" />
     

   • Display category Banner group image (multiple images):If the category is set with multiple Banner images, we need to combineforLoop to traverse and display them. These images can be designed as a slideshow or other multi-image display format.

     {% categoryDetail categoryImages with name="Images" %}
     {% if categoryImages %} {# 判断是否有Banner图存在 #}
     <div class="category-banner-slider">
         {% for item in categoryImages %}
         <img src="{{ item }}" alt="{% categoryDetail with name="Title" %}" />
         {% endfor %}
     </div>
     {% endif %}
     

     Sometimes we may only need the first Banner image as a fixed background, and it can be obtained like this:

     {% categoryDetail bannerImages with name="Images" %}
     {% if bannerImages %}
     {% set pageBanner = bannerImages[0] %} {# 获取第一张Banner图 #}
     <div class="page-header" style="background-image: url('{{ pageBanner }}');">
         <h1>{% categoryDetail with name="Title" %}</h1>
     </div>
     {% endif %}
     

2. Display on the category list page (usingcategoryListTag):In the navigation menu of the website, in the recommendation module, or in any list area displaying multiple categories, we often need to display a thumbnail or small logo for each category.categoryListThe label helps us get the list of child categories under a specified model or parent category, and access each category's Logo or thumbnail in a loop.

   {% categoryList categories with moduleId="1" parentId="0" %} {# 获取文章模型下的顶级分类 #}
   <ul class="category-overview-list">
       {% for item in categories %}
       <li>
           <a href="{{ item.Link }}">
               {# 显示分类的缩略图，例如用于卡片式列表 #}
               {% if item.Thumb %}
               <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
               {% else %}
               <img src="{% system with name="SiteLogo" %}" alt="{{ item.Title }}" /> {# 如果没有缩略图，显示网站Logo作为备用 #}
               {% endif %}
               <h3>{{ item.Title }}</h3>
               <p>{{ item.Description|truncatechars:50 }}</p>
           </a>
       </li>
       {% endfor %}
   </ul>
   {% endcategoryList %}
   

By using the above management and display methods, we can fully utilize the functions provided by Anqi CMS to create unique and user-friendly visual presentations for the various category pages of the website, which is undoubtedly of great significance for enhancing the professionalism and user stickiness of the website.

Frequently Asked Questions (FAQ)

1. Q: Why did I upload a category banner image but it did not display on the website front page?A: This is usually because the Banner image tag is not properly called in the template. Please check the template file you are using (for example{模型table}/list.htmlor{模型table}/detail.htmletc