How to decide whether to display the default image or placeholder in AnQiCMS template based on the existence of variables?

In AnQiCMS template development, we often encounter content that may not contain images.For example, a news article may not have any images, or a certain product in a product list may temporarily not have an uploaded main image.In this case, if the template directly calls the image address, it may display a broken image icon or leave a jarring blank space, which undoubtedly affects the overall aesthetics and user experience of the website.

To solve this problem, AnQiCMS provides flexible template tags and filters, allowing us to intelligently decide whether to display the actual image, a preset default image, or a placeholder based on the existence of the image variable.This not only improves the visual consistency of the page, but also maintains a good user experience when the content is not perfect.

First, useiftags for conditional judgments

The most direct and commonly used method is to use the syntax similar to Django in AnQiCMS templatesifLabel for conditional judgment. By determining if the image variable contains valid content, we can output the actual image or a default placeholder accordingly.

Assuming we are on an article detail page, we need to display the article's thumbnail (Thumbfield). If the field has a value, display it; if not, display a preset default image.Thumbfield has a value, display it; if not, display a preset default image.

Firstly, we can usearchiveDetailLabel to get the thumbnail information of the current article and assign it to a temporary variable, for examplearticleThumb:

{% archiveDetail articleThumb with name="Thumb" %}

Then, we can useiftag to determine thisarticleThumbvariable is empty:

{% archiveDetail articleThumb with name="Thumb" %}
{% if articleThumb %}
    <img src="{{ articleThumb }}" alt="文章缩略图">
{% else %}
    <img src="/public/static/images/default-thumb.webp" alt="默认缩略图" class="default-image">
{% endif %}

In the above code:

  • {% archiveDetail articleThumb with name="Thumb" %}Attempts to get the thumbnail path of the current article and assign it toarticleThumb.
  • {% if articleThumb %}JudgmentarticleThumbCheck if the variable is not empty. If it has a value (i.e., the article has a thumbnail), it will executeifthe code within the block to display the real image.
  • {% else %}A block thenarticleThumbExecuted when empty, displaying the default image path we set/public/static/images/default-thumb.webp.

This method is not only applicable to the article detail pageThumbfield, but can also be applied to the category detail pageLogoorThumb, as well as the single-page detail page'sLogoorThumbAll fields that may contain image paths.

II. Skillfully UtilizedefaultFilter to achieve a more concise writing style

AnQiCMS template also providesdefaultA filter that provides a fallback value when the variable is empty. This makes it possible to write the judgment of the image variable and the default value setting more succinctly.

defaultThe usage of the filter is to add it after the variable.|default:''Fill in the default value you want within the quotes.

Take the thumbnail of the above article as an example, to use.defaultThe filter can be implemented in this way:

<img src="{{ archive.Thumb|default:'/public/static/images/default-thumb.webp' }}" alt="文章缩略图">

Here are thearchive.ThumbIs directly referencing the article object of the current page.archiveofThumbfields. Ifarchive.ThumbIs empty or undefined.defaultThe filter will replace it with./public/static/images/default-thumb.webp.

This writing combines condition judgment and default value specification in one line, making the code more concise, especially suitable for scenarios where only a simple default value is needed. AnQiCMS also providesdefault_if_noneFilter, if a variable may benil(null pointer) rather than just an empty string, it will provide a default value more accurately, but when dealing with string types such as image paths, defaultThe filter is usually sufficient.

Section 3: Special Cases for Image Groups (Images)

Some content models may support image groups (e.g., product detail page carousel).ImagesThe field usually returns an array of image paths (or what is called slices).In this case, we may need to determine if the image group exists and if there is at least one image in the image group.

Assuming we want to display the first image of a product, if there is no image set or the image set is empty, then display a default image:

{% archiveDetail productImages with name="Images" %}
{% if productImages and productImages|length > 0 %}
    <img src="{{ productImages[0] }}" alt="产品主图">
{% else %}
    <img src="/public/static/images/default-product.webp" alt="默认产品图">
{% endif %}

Here:

  • {% archiveDetail productImages with name="Images" %}Assign the image set data toproductImages.
  • {% if productImages and productImages|length > 0 %}Carried out double judgment: first ensureproductImagesthe variable exists and is not empty, then through|lengththe filter to determine if the length of the array is greater than 0, to ensure that there is at least one image.
  • If the condition is met, the first image in the image group will be displayedproductImages[0].
  • Otherwise, the preset default product image will be displayed.

If your image set is displayed in a loop, and you want to display a placeholder when the entire image set is empty, you can handle it like this:

{% archiveDetail productImages with name="Images" %}
{% if productImages %}
    <div class="product-gallery">
    {% for imgUrl in productImages %}
        <img src="{{ imgUrl }}" alt="产品图">
    {% endfor %}
    </div>
{% else %}
    <div class="product-gallery-placeholder">
        <img src="/public/static/images/default-product-gallery.webp" alt="暂无图片">
        <p>此产品暂无图片展示。</p>
    </div>
{% endif %}

**Practical Tips and Considerations

  1. Set the default image path uniformly:Store all default images in/public/static/images/directory and name them according to standards, such asdefault-thumb.webp/default-logo.webpetc., for easy management and maintenance.
  2. Set meaningfulaltProperties:whether the image exists or not, it should be<img>Label addaltProperty. For the default image,altThe property should describe its default nature, for example,"默认缩略图", which is very important for SEO and accessibility. 3.