How to implement conditional judgment in a template, for example, whether to display an image based on whether the article has a thumbnail?

In website content presentation, images play a crucial role.However, not all content has corresponding thumbnails, or for design aesthetics and loading speed considerations, we may need to decide according to the actual situation whether to display images, even different placeholder images.AnqiCMS provides a flexible and powerful template engine, allowing us to easily implement this conditional image display logic, thereby enhancing the flexibility and user experience of website content.

This article will focus on how to determine whether to display an image based on whether an article has a thumbnail in the AnqiCMS template and will explain the implementation method in detail.

Basic conditional judgment in AnqiCMS template

AnqiCMS template system has borrowed the syntax of Django template engine, and its conditional judgment is mainly through{% if 条件 %}and{% endif %}Tag to implement. WhenifWhen the condition expression in the tag is true (True), the content inside it will be rendered and displayed; otherwise, the content will be ignored.

For example, to judge a variablemyVariableIs or non-empty, can be used directly:

{% if myVariable %}
    {# myVariable 存在且非空时显示这里的内容 #}
{% else %}
    {# myVariable 不存在或为空时显示这里的内容 #}
{% endif %}

This concise syntax makes handling various logical judgments in templates very intuitive.

Scenario one: Determine if a single article has a thumbnail on the article detail page

In the article detail page, the data of the current article is usually directly exposed in the template.archiveIn the object. Therefore, we can directly pass througharchive.Thumbfield to determine whether the current article has a thumbnail.archive.ThumbThe path string of the thumbnail image will be returned, if the article does not have a thumbnail set, this field will usually be an empty string.

Here is an example of a code snippet that determines and displays a thumbnail on an article detail page:

{# 假设这是文章详情页的模板（例如 detail.html） #}

<div class="article-content">
    <h1>{{ archive.Title }}</h1> {# 文章标题 #}
    <div class="article-meta">
        <span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{{ archive.Views }}</span>
    </div>

    {# 判断文章是否有缩略图 #}
    {% if archive.Thumb %}
        <div class="article-thumbnail">
            <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" loading="lazy">
        </div>
    {% else %}
        {# 如果没有缩略图，可以显示一个默认的占位图 #}
        <div class="article-thumbnail-placeholder">
            <img src="/public/static/images/default-thumb.png" alt="无图" loading="lazy">
        </div>
        {# 或者，如果不想显示任何图片，可以直接省略 else 部分 #}
    {% endif %}

    <div class="article-body">
        {{ archive.Content|safe }} {# 文章内容，使用 safe 过滤器防止 HTML 被转义 #}
    </div>
</div>

In this example, we first check:archive.ThumbIs there a value. If it exists, display the thumbnail; if not, display a preset default placeholder image.

Scenario two: Loop through each article on the article list page to determine if it has a thumbnail

On the article list page, we usually use{% archiveList %}Tag to get the list of articles and loop through them. In the loop, the data of each article item will be accessed through a variable (such asitemorarticle) to access. Similarly, we can also throughitem.ThumbTo determine the thumbnail status of each article.

Here is an example of a code snippet that implements conditional judgment and displays thumbnails on the article list page:

{# 假设这是文章列表页的模板（例如 list.html） #}

<div class="article-list">
    {% archiveList articles with type="page" limit="10" %} {# 获取分页文章列表，每页10篇 #}
        {% for article in articles %}
            <div class="article-item">
                {# 判断当前文章是否有缩略图 #}
                {% if article.Thumb %}
                    <div class="item-thumbnail">
                        <img src="{{ article.Thumb }}" alt="{{ article.Title }}" loading="lazy">
                    </div>
                {% else %}
                    {# 如果没有缩略图，显示一个列表页的默认占位图 #}
                    <div class="item-thumbnail-placeholder">
                        <img src="/public/static/images/default-list-thumb.png" alt="无图" loading="lazy">
                    </div>
                {% endif %}

                <div class="item-info">
                    <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
                    <p>{{ article.Description|truncatechars:120 }}</p> {# 截取文章描述 #}
                    <a href="{{ article.Link }}" class="read-more">阅读详情</a>
                </div>
            </div>
        {% empty %}
            {# 如果文章列表为空，显示提示信息 #}
            <p class="no-articles">目前还没有文章发布。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 列表页的分页导航 #}
    <div class="pagination">
        {% pagination pages with show="5" %}
            {# 分页代码，此处省略具体实现，参考 AnqiCMS 分页标签文档 #}
        {% endpagination %}
    </div>
</div>

In this example on the list page, we traversearticlesEach one in the collectionarticleObject, and for eacharticle.ThumbPerform conditional judgment, thereby dynamically displaying thumbnails or placeholders for each article.

More flexible image judgment: Logo, Images and custom fields

exceptThumbField, AnqiCMS also provides other fields related to images, you can judge according to your needs:

1. archive.Logo(Cover Main Image)It usually represents the cover image or main image of an article. Its judgment method isarchive.ThumbSimilar.

   {% if archive.Logo %}
       <img src="{{ archive.Logo }}" alt="{{ archive.Title }}">
   {% endif %}
   

2. archive.Images(Group photo)If the article has uploaded multiple images as a group photo,archive.ImagesIt will be an array of image paths (Slice). You can check if the collage exists by checking the length of this array.“`twig {% if archive.Images|length > 0 %}

   <div class="article-gallery">
       <img src="{{ archive.Images[0] }}" alt="{{ archive.Title }} - 第一张图片"> {# 显示组图的第一张图片 #}
       {# 如果需要，也可以循环显示所有组图 #}
       {% for image_url in archive.