How to determine if a thumbnail of a single page exists in the template before displaying?

As a senior CMS website operation personnel in the cybersecurity field, I am well aware of the importance of the details of content presentation for user experience and brand image.In daily work, we often encounter the need to flexibly adjust the display method based on the characteristics of the content, which includes the judgment and display of single-page thumbnails.<img>Tags are not only unattractive but may also affect the page loading performance. Therefore, it is crucial to make conditional judgments in the template.

Now, I will elaborate on how to determine if the thumbnail of a single page exists in the AnQiCMS template and how to display it based on the judgment result.

In AnQiCMS, single pages (such as 'About Us', 'Contact Us', etc.) usually have a thumbnail field for display in lists or navigation.However, not all single-page applications will upload thumbnails.To avoid broken image icons or blank areas on the frontend page, we can cleverly use conditional judgment logic in the template to ensure that thumbnails are only displayed when they actually exist.

Firstly, we need to obtain the thumbnail data of the current single page detail template (usuallypage/detail.htmlor a custom single page template, such aspage/detail-{{单页ID}}.html). AnQiCMS providespageDetailGet details of a single page, including its thumbnail field, by using tags.

We will usepageDetailTranslate the label to get the thumbnail address of a single page and assign it to a variable. For example, we can assign the thumbnail address to a variable namedpageThumb. 

{% pageDetail pageThumb with name="Thumb" %}

In this code block:

  • {% pageDetail ... %}This is the tag used by AnQiCMS to obtain detailed information of a single page.
  • pageThumbThis is a custom variable name we use to store the thumbnail URL obtained.
  • with name="Thumb"Specified that we need to obtain the 'thumbnail' field of a single page.

After obtaining the thumbnail address, the next step is to make a conditional judgment. AnQiCMS template engine supports{% if %}Labels, we can use it to checkpageThumbwhether the variable contains valid content. IfpageThumbthe variable is not empty (i.e., the thumbnail has been uploaded and has a URL), then display<img>[en]Label; otherwise, you can choose to display a default placeholder image, or not display the image at all to keep the page clean.

{% pageDetail pageThumb with name="Thumb" %}

{% if pageThumb %}
    <img src="{{ pageThumb }}" alt="{% pageDetail with name='Title' %}" />
{% else %}
    <!-- 如果没有缩略图，可以显示一个默认占位图，或者不显示任何图片 -->
    <img src="/public/static/images/default-fallback-thumb.png" alt="无缩略图" />
{% endif %}

[en]In this complete template snippet:

  • We first go through{% pageDetail pageThumb with name="Thumb" %}Store the thumbnail URL of a single page inpageThumbthe variable.
  • Immediately following,{% if pageThumb %}JudgmentpageThumbCheck if the variable has a value.pageThumbIf it exists and is not an empty string, the condition is true, enterifthe block.
  • InifInside the block, we use<img src="{{ pageThumb }}" ... />to display thumbnails. For SEO and user experience,altthe attribute is dynamically used{% pageDetail with name='Title' %}to obtain the title of a single page as the image description.
  • IfpageThumbIf empty, the condition is false, enter{% else %}the block.
  • Inelseinside the block, I provided an example, showing a named/public/static/images/default-fallback-thumb.pngcommon placeholder image. You can replace this path according to your actual needs, or directly omit itelseBlocks, leaving space on the page when there are no thumbnails.

This way, we can handle the thumbnail display problem on single pages in the AnQiCMS template flexibly and elegantly, ensuring the professionalism and consistency of the website interface.

Common Questions (FAQ)

Q1: What will be displayed on the frontend of the page if I haven't set a thumbnail for the single page?

A1:If you have made conditional judgments like above in the template and haven't setelseIf a block is set, no images will be displayed. If you have setelseIf a block is specified with a default image, the default image will be displayed.In addition, AnQiCMS backend also provides a 'default thumbnail' option in the 'Content Settings' section. If the document or single page does not have a specific thumbnail, the system may use the default image set here as an alternative.

Q2: BesidesThumba field, does the single page have any other image fields available as alternatives?

A2:Yes, AnQiCMS single page usually also has a 'Single Page Slide Group Image' field, whose data is stored in an array form.ImagesYou can find the field inThumbThe field is empty, further judgment is madeImagesThe field exists and is not empty, and an attempt is made to displayImagesThe first image in the array as a backup. This can be done by{% pageDetail pageImages with name="Images" %}retrieving, and then using{% if pageImages %}{% set fallbackImage = pageImages[0] %}{% endif %}the following method to handle.

Q3: I would like all web pages without thumbnails to display a unified default thumbnail instead of setting it individually in each template. Is this possible?

A3:Can be realized.In AnQiCMS backend, you can navigate to the "Backend Settings" -> "Content Settings" page.There is an option called 'Default thumbnail' on this page.You can upload an image as the default thumbnail for the entire site.When any page (including single pages) does not specify its own thumbnail after configuration, the system will automatically use the default thumbnail you set here.This can greatly simplify the maintenance of templates.