In website content display, images, especially thumbnails, play a crucial role.They can not only attract readers' attention, but also enhance the beauty and information transmission efficiency of the page.However, in actual operation, we often encounter situations where certain 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, and at worst, it may affect the page layout and even the user experience.
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 if a content has a thumbnail in the frontend and display it conditionally based on the result.
Identify the thumbnail field in the content
In the AnQi CMS, whether it's articles, products, single pages, or categories, the core content data usually includesLogoandThumbtwo fields to represent image information.LogoThis usually refers to the main image or cover large image, andThumbit focuses more on the thumbnail processed by the system, which may be smaller in size and suitable for display on list pages or recommendation areas.
In the template, when you get the content object (such as a list of items), you can directly access the thumbnail URL withitemor the detail page'sarchive).{{item.Thumb}}or{{archive.Thumb}}to access the thumbnail URL.
Use conditional judgment tags to achieve conditional display
The template system of Anqi CMS is based on Django template engine syntax, which means we can take advantage of its powerful conditional judgment tags{% if %}Check in.ThumbDoes the field have a value.ThumbWhen the field has content (i.e., not an empty string), the condition is true; otherwise, it is false.
1. Determine and display thumbnails on the content list page:
Assuming you are usingarchiveListto cycle through articles in a list. In each cycle, you can check if the current article objectitemhas 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.ThumbThere is, and it will display a thumbnail of the article; if not, it will display a preset default placeholder.You can choose not to display the image area according to your design requirements, or use CSS to hide the area.
2. In the content detail page, judge and display the thumbnail:
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 on the detail page, ifarchive.Thumbthe 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 attempt 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.So, when there is no explicit thumbnail for any content, the system will automatically use this default image.
This means that in many cases,item.ThumbFields may already contain the URL of an automatically extracted image or the global default image, even if no thumbnail has been uploaded. However, in the template, use{% if item.Thumb %}Judging is still **practice; it ensures that the page can degrade gracefully in any unforeseen situations (for example, when the system fails to automatically extract the image or the global default image is not set).
If your business logic is very complex, you need to display it on the front end based on multiple conditions (for example, if there is no thumbnail, prioritize displaying the category thumbnail, followed by