How to determine if a content has a thumbnail in the front-end template and display it conditionally?

In the display of website content, images, especially thumbnails, play a crucial role.They not only attract the reader's attention, but also enhance the beauty and information transmission efficiency of the page.However, in actual operation, we often encounter cases where some content may not have uploaded thumbnails.If the front-end template tries to display without distinction, it may result in an ugly blank area or a damaged image icon at best, or it may affect the page layout and even the user experience at worst.

AnQi CMS as an efficient and flexible content management system fully considers such needs.With its powerful and easy-to-use template engine, we can easily determine on the front end whether a piece of content has a thumbnail and display it conditionally based on the result.

Identify the thumbnail field in the content

In Anqi CMS, whether it is articles, products, single pages, or categories, the core content data usually includesLogoandThumbtwo fields to represent image information.LogoIt usually refers to the main image or cover large image, whileThumbit focuses more on the thumbnail processed by the system, which may be smaller in size and suitable for display on list pages or in recommended areas.

In the template, when you get the content object (such as the items in the listitemor the details pagearchive), you can directly access{{item.Thumb}}or{{archive.Thumb}}the thumbnail URL.

Use conditional judgment tags to display conditionally

The Anqi CMS template system is based on Django template engine syntax, which means we can take advantage of its powerful conditional judgment tags{% if %}To checkThumbDoes the field exist and have a valueThumbThe condition is true when the field has content (i.e., not an empty string); otherwise, it is false.

1. Determine and display the thumbnail on the content list page:

Suppose you are usingarchiveListTag loop to display the article list. In each loop, you can check the current article objectitemWhether there is a thumbnail.

{# 使用 archiveList 标签获取文章列表 #}
{% archiveList archives with type="list" limit="6" %}
    {% for item in archives %}
    <div class="article-item">
        {# 首先判断 item.Thumb 是否有值 #}
        {% if item.Thumb %}
            <a href="{{ item.Link }}" class="article-thumb">
                <img src="{{ item.Thumb }}" alt="{{ item.Title }} 缩略图">
            </a>
        {% else %}
            {# 如果没有缩略图，可以显示一个默认的占位图，或者干脆不显示图片区域 #}
            <a href="{{ item.Link }}" class="article-thumb-placeholder">
                <img src="/public/static/images/default-placeholder.webp" alt="{{ item.Title }} 无图">
            </a>
        {% endif %}
        <div class="article-info">
            <a href="{{ item.Link }}">
                <h3 class="article-title">{{ item.Title }}</h3>
            </a>
            <p class="article-description">{{ item.Description|truncatechars:100 }}</p>
        </div>
    </div>
    {% empty %}
        <p>暂时没有文章内容。</p>
    {% endfor %}
{% endarchiveList %}

In the above example, ifitem.ThumbIf it exists, it will display the thumbnail of the article; if it does not exist, it will display a preset default placeholder image.You can choose not to display the image area according to your design needs, or use CSS to hide the area.

2. Determine and display the thumbnail on the content detail page:

When you visit the detail page of an article, usuallyarchivethe object is directly accessible. You can also judge itsThumbfields.

{# 假设这是文章详情页模板，archive 对象直接可用 #}
<article class="post-detail">
    <h1 class="post-title">{{ archive.Title }}</h1>

    <div class="post-meta">
        <span>发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{{ archive.Views }}</span>
    </div>

    {# 判断详情页的缩略图 #}
    {% if archive.Thumb %}
        <div class="post-thumbnail">
            <img src="{{ archive.Thumb }}" alt="{{ archive.Title }} 封面图">
        </div>
    {% endif %}

    <div class="post-content">
        {{ archive.Content|safe }}
    </div>
</article>

In this example of the detail page, ifarchive.ThumbIf the field has a value, a thumbnail will be displayed below the article title; ifarchive.Thumbit is empty, the entirepost-thumbnailarea will not be rendered, keeping the page simple.

Enhance thumbnail display logic using backend settings and filters

The Anqi CMS considers thumbnail processing very thoroughly.If you do not manually upload a thumbnail when posting content, the system will automatically try to extract the first image from the content as a thumbnail.Further, you can also upload a default thumbnail in the "System Settings" -> "Content Settings" on the backend.This, when any content does not have an explicit thumbnail, the system will automatically use this default image.

This means, in many cases,item.ThumbThe field may already contain the URL of an automatically extracted image or a global default image, even if no thumbnail has been uploaded. However, it is used in the template despite this.{% if item.Thumb %}Judging remains **practical, as it ensures that the page can degrade gracefully in any unforeseen circumstances (such as the system failing to automatically extract images or not setting a global default image).

If your business logic is very complex, you need to display it on the front end based on various conditions (for example, when the content has no thumbnail, the category thumbnail is displayed first, followed by the next one