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

As a senior CMS website operator for a safety company, I fully understand 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 according to the characteristics of the content, including the judgment and display of single-page thumbnails.A page without a thumbnail if forced to display an empty<img>The label is not only unattractive but may also affect the page loading performance. Therefore, conditional judgments in the template are crucial.

I will now detail how to determine if the thumbnail of a single page exists in the AnQiCMS template and display it based on the 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 pages will upload thumbnails. To avoid broken image icons or blank areas on the front-end page, we can cleverly use conditional judgment logic in the template to ensure that thumbnails are displayed only when they actually exist.

Firstly, we need to obtain the thumbnail data of the current single page in the single page detail template (usuallypage/detail.htmlor a custom single page template, such aspage/detail-{{单页ID}}.html). AnQiCMS providespageDetailTag to get the detailed information of a single page, including its thumbnail field.

We will usepageDetailTag 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 ... %}Is the tag used by AnQiCMS to obtain detailed information of a single page.
  • pageThumbIt is a custom variable name we use to store the thumbnail URL obtained.
  • with name="Thumb"We specified that we want to retrieve the thumbnail field on a single page.

After obtaining the thumbnail address, the next step is to make a conditional judgment. The AnQiCMS template engine supports{% if %}The tag, we can use it to checkpageThumbWhether the variable contains valid content. IfpageThumbThe variable is not empty (i.e., the thumbnail has been uploaded and there is a URL), then display<img>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 %}

In this complete template snippet:

  • We first pass through{% pageDetail pageThumb with name="Thumb" %}Store the thumbnail URL of a single page topageThumbthe variable.
  • Immediately thereafter,{% if pageThumb %}the judgment.pageThumbDoes the variable have a value. IfpageThumbExists and is a non-empty string, if the condition is true, enterifthe block.
  • InifBlock, we use<img src="{{ pageThumb }}" ... />To display the thumbnail. For SEO and user experience,altThe property dynamically used{% pageDetail with name='Title' %}to obtain the title of a single page as the image description.
  • IfpageThumbIf it is empty, the condition is false, enter{% else %}the block.
  • Inelsewithin the block, I provided an example showing a named/public/static/images/default-fallback-thumb.pngThe generic placeholder. You can replace this path according to your actual needs, or simply omit it.elseBlock, leaving whitespace on the page when there are no thumbnails.

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

Frequently Asked Questions (FAQ)

Q1: What will the frontend display on the single page if I haven't set a thumbnail?

A1:If you have made conditional judgments in the template as shown above and have not setelseIf you do not set it, no images will be displayed. If you have setelseA block has specified a default image, and it will display the default image.In addition, the AnQiCMS backend also provides a 'default thumbnail' option in the 'Content Settings', 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: BesidesThumbfield, does the single-page have other image fields available as alternatives?

A2:Yes, the single page of AnQiCMS usually has another field called "Single Page Slideshow Group Image", and its data is stored in an array.ImagesYou can access it in the field.ThumbWhen the field is empty, further judgment is madeImagesIf the field exists and is not empty, try to displayImagesThe first picture in the array is used as a backup. This can be done by{% pageDetail pageImages with name="Images" %}obtained, and then used{% if pageImages %}{% set fallbackImage = pageImages[0] %}{% endif %}way to deal with.

Q3: Can I make all web pages without thumbnails display a unified default thumbnail instead of setting it separately in each template, is it possible?

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