alt=

In the daily operation of AnQiCMS, the refined display of content is a key factor in improving user experience and the professionalism of the website.The importance of images as visual elements is self-evident.categoryListThis label may call category information and may encounter a situation where the category has not set the Logo or Thumb image, leading to blank or broken images being displayed on the front end.Today, let's delve into this issue and provide an elegant solution.

AnQiCMS incategoryListimage path behavior

In AnQiCMS,categoryListTags are used as a core tool for dynamically retrieving and displaying a website's category list. It allows us to easily traverse through various categories and obtain their related properties, including those we commonly use for visual display.LogoAnd usually refers to category large picture or Banner imageThumbField for category thumbnail.

So, when a category is in the background management interface, and the “thumbnail” or “Banner image” field has not uploaded any images,categoryListthe tag is called in the front-end templateitem.Logooritem.ThumbWhat will be returned? The answer is:An empty string path.

This means that if your template code directly uses{{ item.Logo }}or{{ item.Thumb }}as<img>label'ssrcProperty value, when the actual image path is empty, the browser will try to load an image with an empty path. This usually leads to the following kinds of adverse consequences:

  1. Browser displays a broken image icon:This is the most common phenomenon, seriously affecting the visual beauty and professionalism of the website.
  2. 404 error occurred:Browser is trying to load emptysrcWhen an image is requested, it may send a request to the server, causing the server to record a large number of 404 error logs, which may interfere with the troubleshooting of the website's real problems, and may also have a negative impact on search engine optimization (SEO).
  3. User experience is受损:Broken images are not only unattractive, but also make users feel that the website content is incomplete or improperly maintained.

To better understand, let's look at a simple template call example:

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <li>
            {# 如果item.Logo为空，这里会渲染成 <img src="" alt="分类名称 Logo"> #}
            <img src="{{ item.Logo }}" alt="{{ item.Title }} 分类Logo"> 
            {# 如果item.Thumb为空，这里会渲染成 <img src="" alt="分类名称 缩略图"> #}
            <img src="{{ item.Thumb }}" alt="{{ item.Title }} 分类缩略图">
            <h3>{{ item.Title }}</h3>
        </li>
    {% endfor %}
{% endcategoryList %}

Whenitem.Logooritem.ThumbWhen the field content is empty,srcThe attribute will eventually be empty, triggering the above problem.

An elegant solution: how to set the default image?

AnQiCMS provides two main default image settings that can work together, ensuring that the website maintains beauty and functionality in any situation.

Method one: Use the global content settings of AnQiCMS (recommended)

AnQiCMS has designed an intelligent default image processing mechanism, allowing you to set a global default thumbnail for website content.When the image of specific content is missing, the system will automatically use this global default image to fill in.

Set path:Log in to the AnQiCMS backend and navigate to"Backend settings" -> "Content settings".

Specific operations:In the "Content Settings" page, you will find an option named "Default thumbnail".Here, you can upload a placeholder image that you want to use as the default for the entire site.This image can be a company logo, a general category icon, or any image that can represent the content of your website.

Principle of effectiveness:Once you upload and save a default thumbnail here, AnQiCMS will intelligently use it as the default for all unsetLogoorThumbThe category (and documents, products, and other content) placeholder image. This means, regardless of which categoryitem.Logooritem.ThumbThe field is empty in the database, AnQiCMS will automatically convert it when rendering on the front endsrcThe attribute points to the path of this globally set default thumbnail, thereby effectively avoiding broken image phenomena and enhancing the consistency of the website.

The benefits of this method are:

  • Global coverage:One-time setting, effective throughout the site, greatly reduces maintenance costs.
  • System-level intelligent filling:No need to modify any template code, AnQiCMS will automatically handle it at the bottom level.
  • Consistency:Ensure that all missing image categories are displayed in a unified style.

Method two: make conditional judgments in the front-end template (flexible customization)

Although the global default thumbnail can solve most problems, in certain specific scenarios, you may want a category list to have its own unique default image, or use different placeholders for different list styles.At this time, we can use conditional judgment logic in the front-end template.

Setting method:Through Django template engine{% if ... %}and{% else %}tags, judgmentitem.Logooritem.ThumbIf it does not exist, specify a default image path manually.

Template code example:

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <li>
            {# 对Logo字段进行判断处理 #}
            {% if item.Logo %}
                <img src="{{ item.Logo }}" alt="{{ item.Title }} 分类Logo">
            {% else %}
                {# 自定义该列表的默认Logo图片，例如存放在 /public/static/images/ 目录下 #}
                <img src="/static/images/default_category_logo.jpg" alt="{{ item.Title }} 分类Logo (默认)"> 
            {% endif %}
            
            {# 或者对Thumb字段也进行类似处理 #}
            {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }} 分类缩略图">
            {% else %}
                {# 自定义该列表的默认Thumb图片 #}
                <img src="/static/images/default_category_thumb.png" alt="{{ item.Title }} 分类缩略图 (默认)">
            {% endif %}
            <h3>{{ item.Title }}</h3>
        </li>
    {% endfor %}
{% endcategoryList %}

The advantage of this method lies in:

  • Highly customized:Different default images can be set according to different category lists or page requirements.
  • Flexibility:The default image can be an image resource within the site or an external link.

Please note:Specified in the template:/static/images/default_category_logo.jpgAt the following path, you need to manually upload the image file to AnQiCMS./public/static/images/Under the directory (or your custom static resource directory), make sure the path is correct.

**Practice and Suggestions

Combine these two methods to achieve the most flexible and lowest maintenance cost image management strategy:

  1. Set the global default thumbnail first:Make sure that even if you forget to make conditional judgments in the template, the website will not display broken images, which is the foundation of website stability.
  2. Use template conditional judgments for specific scenarios:When a category list needs a more personalized default image, use the template's`