How to display a category thumbnail (`item.Thumb`) or Banner image (`item.Logo`) next to the category list?

As an experienced website operations expert, I am well aware of the importance of the visual presentation of website content for user experience and information communication.In a powerful and flexible system like AnQiCMS, we have multiple ways to achieve fine-grained control over content, especially in key navigation areas such as category lists. How to effectively display category thumbnails or Banner images is an important factor in enhancing the professionalism and attractiveness of the website.Today, let's delve into how to ingeniously integrate these visual elements into the category list in Anqi CMS.

AnQiCMS Practical Guide: Display thumbnails or Banner images elegantly next to the category list

In the navigation design of a website, the category list is not just a pile of text, but it is also a key entry point for users to quickly understand the website structure and find content of interest. Adding representative visual elements to the category list, whether it is a small thumbnail (item.ThumbIs it more attractive Banner imageitem.LogoIt can greatly enhance user experience, making the website interface more vivid and lively, and the information transmission more intuitive.AnQi CMS provides great flexibility, making all this easy and efficient.

Backend configuration: Add visual elements to categories

In AnQi CMS, the operation to set thumbnails or Banner images for categories starts from the content management backend. The system reserves a dedicated image upload area for each category, and you can complete the configuration with just a few easy steps:

  1. Log in to the Anqi CMS backend: Log in to your website management interface.
  2. Navigate to category management: Find 'Content Management' in the left menu and click on 'Document Category'.
  3. Select or create a categoryYou can edit an existing category or create a new one.
  4. Upload imageIn the category editing page, scroll down to the "Other Parameters" section. Here, you will see the "Banner Image" and "Thumbnail" options.
    • ThumbnailThis is usually used in list or card displays as a small representative image. It is recommended to upload images of moderate size and clear content.
    • Banner image: These are usually larger, more visually striking images that can serve as the top banner of a category page or as the main visual element in a category list in some layouts.The system supports uploading multiple Banner images, but please note that the image dimensions should be consistent to ensure a unified and beautiful display effect.
  5. Save ChangesAfter uploading, be sure to click Save to ensure that your image settings take effect.

Through such configuration, the classified data includes the URLs of these visual elements, waiting for us to call them in the front-end template.

Front-end display: unlock the visual power in the template.

AnQi CMS uses a template engine syntax similar to Django, which makes it intuitive and easy to understand to call category data in front-end templates. We mainly use this to display these images next to the category list.categoryListTemplate label.

When we use{% categoryList categories ... %}Such a label loops to output categories,categorieseach variable initemrepresenting a category will includeitem.Thumbanditem.LogoThese properties correspond to the thumbnail and Banner image URLs you upload on the backend.

Here are some key calling tips and注意事项:

  • Directly access the propertyInforloop, you can access it directly through{{ item.Thumb }}or{{ item.Logo }}To get the image address.
  • Conditional judgment: Not all categories need or will upload images. To avoid exceptions in page display caused by empty image links, it is strongly recommended to use{% if item.Thumb %}or{% if item.Logo %}Perform a conditional judgment, only render the image tag when the image exists.
  • Choose the appropriate image: Decide where to display the category list based on your design requirements.item.Thumb(更适合紧凑布局) oritem.Logo(More suitable for highlighting visual effects or as a Banner). It can also be used together, for example, displaying thumbnails first, and if not available, try to display the Logo.
  • addaltpropertyTo optimize for SEO and accessibility, it is necessary to<img>tagsaltset the content as the title of the category{{ item.Title }}.

Complete example: Freshen up the category list

Now, let's demonstrate how to elegantly display category images next to a category list using a specific template code example:

{# 假设我们想获取ID为1的文章模型下的所有顶级分类 #}
{% categoryList categories with moduleId="1" parentId="0" %}
    <ul class="category-list-with-images">
        {% for item in categories %}
            <li class="category-item">
                <a href="{{ item.Link }}" class="category-link">
                    <div class="category-content">
                        {# 优先展示缩略图，如果存在 #}
                        {% if item.Thumb %}
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }} 缩略图" class="category-thumb">
                        {# 如果没有缩略图，但存在Banner图，则展示Banner图 #}
                        {% elif item.Logo %}
                            <img src="{{ item.Logo }}" alt="{{ item.Title }} Banner图" class="category-banner-fallback">
                        {% else %}
                            {# 如果没有任何图片，可以显示一个占位符或者默认图标 #}
                            <span class="no-image-placeholder">🎨</span>
                        {% endif %}
                        <h3 class="category-title">{{ item.Title }}</h3>
                        <p class="category-description">{{ item.Description }}</p>
                    </div>
                </a>
            </li>
        {% else %}
            {# 如果没有任何分类 #}
            <p>暂无分类数据。</p>
        {% endfor %}
    </ul>
{% endcategoryList %}

In this code, we first usecategoryListThe tag obtained the specified model(moduleId="1") under all top-level categories(parentId="0")). Then,forIn the loop, we create a list item for eachitem(category) created a list item.

The key point is{% if item.Thumb %}and{% elif item.Logo %}Judgment logic. It ensures that:

  1. If the category has uploaded a thumbnail (item.Thumb) it is displayed first.
  2. If there is no thumbnail but there is an uploaded Banner image (item.Logo) then display the Banner image as an alternative.
  3. If both images are not available, a simple text placeholder is displayed to avoid the embarrassment of whitespace on the page or failed image loading.

By such logic, you can flexibly display visual elements next to the category list based on the actual image upload situation, while also considering the beauty and robustness of the page.

A温馨提示 with **practice

  • Image optimizationMake sure to compress and optimize the size of the image before uploading.The 'Content Settings' in AnQi CMS backend provides functions such as 'whether to enable Webp image format', 'whether to automatically compress large images', and more, which can help you automate image processing and speed up page loading speed.
  • Responsive DesignIn CSS styles, add responsive styles forcategory-thumborcategory-banner-fallbackand other image classes, such as `max-width: