In AnQiCMS template development, displaying list content is a common requirement, and how elegantly to handle the images in these lists, especially thumbnails, is directly related to the visual effect and user experience of the website.archiveListTags as one of the content calling tags in AnQiCMS core, it can help us flexibly obtain various document lists.However, in practical application, we often encounter situations where certain documents do not have a thumbnail set. If used directly, it may lead to the appearance of 'broken images' or disorganized layout.ifConditional judgment is particularly important.
UnderstandingarchiveListTag and thumbnail fields
archiveListTags are powerful tools for cyclic output of document lists. When we use it to retrieve a set of documents, for example:
{% archiveList archives with type="list" categoryId="1" limit="10" %}
{# ... 循环内容 ... #}
{% endarchiveList %}
In{% for item in archives %}Each of these loops represents a document object, which contains rich field information for display on the front end. There are mainly two keyword fields related to thumbnails:item.
item.Thumb：This typically represents the thumbnail address of a document.item.Logo：This may represent the main image or large image address of a document, and can also serve as a backup image in some cases.
It is worth noting that AnQiCMS handles document images very intelligently in the background. If we do not manually upload a thumbnail when publishing a document, but the document content contains images, the system will automatically extract the first image in the document content asitem.Thumb[en] Furthermore, in the "Content Settings", we can also configure a "Default Thumbnail", which the system will try to use to fill in when the document does not have an explicit thumbnail.item.ThumbField. Although there are these automatic processing mechanisms, in some extreme cases (for example, document content without images, and no default thumbnail set),item.Thumboritem.Logoit may still be an empty value.
Why is it needed?ifCondition judgment?
Whenitem.Thumboritem.Logois empty, if the template code directly uses it as<img>TagssrcThe attribute value, the browser will not be able to load images, usually displaying a 'broken image' icon. This is not only unattractive but also affects the professionalism of the website and the trust of users in the content.
UseifThe purpose of conditional judgment is:
- Avoid 'broken image':Only render when the image address exists and is valid:
<img>Label. - Provide graceful degradation:When there is no thumbnail, we can choose to display a generic placeholder or simply not display the image to keep the page clean.
- Enhance flexibility:Allow switching between different display logic between with image and without image according to different business needs.
ingeniously utilizeifLabel judgment and display thumbnail
AnQiCMS template engine supports similar to Django'siflogical judgment tags. We can use{% if condition %} ... {% endif %}such a structure to judgeitem.Thumbwhether the field has a value.
Example 1: Display image only when there is a thumbnail.
This is the most basic and most commonly used judgment method.
{% archiveList archives with type="list" categoryId="1" limit="10" %}
{% for item in archives %}
<div class="archive-item">
{% if item.Thumb %}
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
</a>
{% endif %}
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description }}</p>
</a>
</div>
{% endfor %}
{% endarchiveList %}
In the above code,{% if item.Thumb %}will checkitem.ThumbWhether there is a value. Ifitem.Thumbit exists (i.e., not empty, not zero, not false), then<img src="{{ item.Thumb }}" ...>This part of the code will be rendered on the page. Otherwise, the image part will be completely ignored, and the page will not show the 'broken image'.
Example 2: Placeholder image is displayed when there is no thumbnail
If you want to display a unified placeholder image when there is no document thumbnail, you can combineelsethe statement to achieve this.
{% archiveList archives with type="list" categoryId="1" limit="10" %}
{% for item in archives %}
<div class="archive-item">
<a href="{{ item.Link }}">
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
{% else %}
{# 这里是占位图的地址，可以是一个默认图片，也可以是一个由系统标签获取的全局默认图 #}
<img src="/public/static/images/default-thumbnail.jpg" alt="{{ item.Title }} - 无图">
{% endif %}
</a>
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description }}</p>
</a>
</div>
{% endfor %}
{% endarchiveList %}
Here we introduce a hypothetical placeholder image/public/static/images/default-thumbnail.jpg[en] The actual usage can be replaced with the actual placeholder image address of the website.
[en] Example 3: Multi-level backup image judgment (priority thumbnail, followed by Logo, then placeholder image)
In some scenarios, it may be desirable to have more complex fallback logic, such as displaying firstitem.ThumbIfitem.ThumbIf it does not exist, try to displayitem.LogoIfitem.LogoAlso does not exist, a generic placeholder is displayed finally. At this time, you can useelifstructure.
{% archiveList archives with type="list" categoryId="1" limit="10" %}
{% for item in archives %}
<div class="archive-item">
<a href="{{ item.Link }}">
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
{% elif item.Logo %}
{# 如果 Thumb 为空，检查 Logo 是否存在 #}
<img src="{{ item.Logo }}" alt="{{ item.Title }}">
{% else %}
{# Thumb 和 Logo 都为空，显示占位图 #}
<img src="/public/static/images/default-placeholder.jpg" alt="{{ item.Title }} - 无图">
{% endif %}
</a>
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description }}</p>
</a>
</div>
{% endfor %}
{% endarchiveList %}
Through such multi-level judgment, it can ensure that the page maintains beauty and consistency regardless of the condition of the document image.
Advanced consideration: combined with backend settings
The 'Content Settings' in AnQiCMS backend has an option called 'Default Thumbnail'. After configuring this option, the system will generateitem.ThumbIf the document itself does not have a thumbnail and no images can be extracted from the content, this default thumbnail is automatically used. This means that in many cases,item.ThumbThe field may not be completely empty.
If your website is already configured with a global default thumbnail and you want the template to rely entirely on this backend logic, then the template in theif item.ThumbJudgment will be more used to confirm whether it is a "custom" thumbnail, rather than to determine whether "any thumbnail exists". In this case, usually only a simple{% if item.Thumb %}[Show], becauseitem.ThumbThere will almost always be a value (custom image or default image). However, for **compatibility and fault tolerance, it is retainedifJudging is still a good habit, in case the backend logic is adjusted in the future or some special content bypasses the default image settings.
Summary
Used in AnQiCMS templatearchiveListDisplay document list when the tag is shownifLogical judgmentitem.ThumbIs the field exists, it is a key technique to ensure the beauty of the page and enhance the user experience. Whether it is a simple judgment of existence or a complex logic of multi-level backup images, masteringifThe flexible use of tags can help us build more robust and user-friendly website interfaces.
Common Questions (FAQ)
Q1: Ifitem.Thumbanditem.Logoall are empty, will the page appear 'broken image'?A1: If you have used such a conditional judgment in the template{% if item.Thumb %}or{% elif item.Logo %}and finally in theelsebranch, no output was made<img>Label, or if an effective placeholder is output, the page will not display the "broken image" icon. It will render an emptysrcof<img>label, which will cause a "broken image".
Q2: Besides direct judgmentitem.Thumbare there more rigorous ways to determine if an image exists?A2: At the AnQiCMS template level, direct judgmentitem.Thumboritem.Logowhether there is a value (i.e.,){% if item.Thumb %}) Usually is sufficient to be rigorous.This is because the AnQiCMS backend tries to ensure that the value is either a valid image path or an empty string when generating these fields.The depth of rigor (such as determining if the image path is actually accessible, if the image file exists, etc.) belongs to the scope of front-end JavaScript error handling or backend logic, and exceeds the judgment capability of template tags themselves.
Q3: How can I display a fixed placeholder image when there is no thumbnail?A3: You can useif-elsethe structure to achieve this goal. In{% if item.Thumb %}ofelseIn the branch, directly output a link to the placeholder image you have set up<img>by labeling it. For example:
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
{% else %}
<img src="/path/to/your/placeholder.jpg" alt="默认图片">
{% endif %}
Please replace/path/to/your/placeholder.jpgReplace it with the actual path to the placeholder image.