In AnQiCMS template development, we often encounter situations where the content may not contain images.For example, a news article may not have an illustration, or a certain product in a product list may not have uploaded the main image temporarily.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.
1. Useiftag for conditional judgment
The most direct and most commonly used method is to use the AnQiCMS template syntax similar to Django'sifThe tag performs conditional judgment. By determining whether the image variable contains valid content, we can output either the actual image or a default placeholder.
Assuming we are on an article detail page, we need to display the thumbnail of the article (Thumbfield). IfThumbthe field has a value, it should be displayed; if not, a preset default image should be displayed.
First, we can usearchiveDetailTag 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 thisarticleThumbWhether the variable 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 code above:
{% archiveDetail articleThumb with name="Thumb" %}Attempts to obtain the thumbnail path of the current article and assign it toarticleThumb.{% if articleThumb %}the judgment.articleThumbCheck 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 actual image.{% else %}block is in,articleThumbIf empty, execute and display the default image path we have预设/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 pageLogoorThumbas well as the single page detail pageLogoorThumbAll fields that may contain image paths.
Part two, clever use.defaultThe filter realizes a more concise writing style.
AnQiCMS templates also provide.defaultA filter that provides a fallback value when a variable is empty. This makes the judgment and default value setting of the image variable more concise.
defaultThe usage of the filter is to add it after the variable|default:''Fill in the default value you want within the quotes.
Continue using the thumbnail of the above article as an example, to usedefaultThe filter can be implemented in this way:
<img src="{{ archive.Thumb|default:'/public/static/images/default-thumb.webp' }}" alt="文章缩略图">
Herearchive.ThumbIt directly refers to the article object on the current pagearchiveofThumbfield. Ifarchive.ThumbIs empty or undefined,defaultThe filter will replace it with/public/static/images/default-thumb.webp.
This style combines conditional judgment and default value specification in a single line, making the code more concise, especially suitable for scenarios where only a simple default value is needed. AnQiCMS also providesdefault_if_noneFilter if the variable may benil(Null pointer) rather than just an empty string, it provides a more accurate default value, but when dealing with string types like image paths, defaultThe filter is usually sufficient.
3. Special cases in handling image groups (Images)
Some content models may support image groups (such as product detail page sliders),ImagesThe field usually returns an array of image paths (or what is known as a slice).In this case, we may need to determine if the image group exists, as well as whether there is at least one image in the image group.
Assume we want to display the first image of a product, if there is no image group or the image group 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 group data toproductImages.{% if productImages and productImages|length > 0 %}Made a double check: first make sureproductImagesThe variable itself exists and is not empty, next through|lengthThe filter determines whether the length of the array is greater than 0 to ensure that there is at least one image.- If the condition is met, display the first image in the image group
productImages[0]. - Otherwise, display the preset default product image.
If your image group is displayed in a loop and you want to display a placeholder when the entire image group 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 %}
**Practice and Precautions
- Unified default image path:Place all default images in
/public/static/images/the directory and name them consistently, for exampledefault-thumb.webp/default-logo.webpetc., for easy management and maintenance. - Set meaningful
altattribute:No matter whether the image exists or not, it should be<img>tagsaltProperty. For the default image,altThe property should specify its default nature, for example"默认缩略图"It is very important for SEO and accessibility. 3.