How to get the thumbnail or the first image of the slideshow group in the `pageDetail` tag?

In website operation, well-designed single pages (such as "About Us", "Service Introduction", etc.) are the key to showcasing the brand image and conveying core information.These pages often require rich visual elements to attract visitors, and the effective use of images is an indispensable part of it.For users of AnQiCMS, the ability to flexibly obtain and display the first image from a thumbnail or a slideshow group on a single page is an important capability to achieve this goal.

AnQi CMS provides a powerful template tag system, wherepageDetailThe tag is used to retrieve detailed information about a single page. Through this tag, we can easily access various properties of a single page, including text content, links, and image resources. UnderstandingpageDetailHow to handle the image field will help you control the presentation of page content more accurately.

Get to knowpageDetailLabel and image field

pageDetailThe main function of the tag is to retrieve all related data according to the single page ID or URL alias (token). In terms of image processing, it provides several key fields, includingLogo/ThumbandImagesThey represent different image types for different purposes.

Get the main thumbnail (Logo)

Generally,LogoThe field is designed to store the main thumbnail or a larger cover image for a single page, which you can understand as the page's 'main visual' or 'large thumbnail'. If you upload a 'thumbnail large image' when editing the single page in the background, then throughpageDetailin the labelname="Logo"Parameters can be easily used to obtain the URL of this image.

For example, if you want to display the main thumbnail of the current page in a template, you can write the code in this way:

<img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />

If you need to specify the main thumbnail of a single page for a specific ID (for example, ID 5)idparameters:

{% set mainPageLogo = pageDetail with name="Logo" id="5" %}
<img src="{{ mainPageLogo }}" alt="特定页面的主图" />

In this way, the image will load and display on your page.

Retrieve a standard thumbnail (Thumb)

withLogoThe field is similar,ThumbThe field is used to store the general thumbnail of a single page. It may be a smaller size, faster loading version, suitable for list pages or other scenarios that require small-sized image display.When editing a single page in the background, it corresponds to the 'thumbnail upload option.'

ObtainThumbThe usage of the field is similar toLogoSimilar, just need tonamethe parameter toThumband it is done:

<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />

Similarly, it can also be done throughidortokenParameter to get the specified pageThumb:

{% set pageThumbnail = pageDetail with name="Thumb" id="5" %}
<img src="{{ pageThumbnail }}" alt="特定页面的缩略图" />

Get the first image in the slide set (Images)

For those pages configured with multiple images as slideshows or carousels, Anqi CMS stores these images inImagesThis field contains. This field returns an array (or list) of image URLs.You can loop through this array to display all the images, but in many cases, we may only need to show the first image as a cover or preview.

To obtainImagesThe first image in the field, you can combine the features of the Anqi CMS template engine, firstImagesAssign the value of the field to a variable, and then get the first image through the array index[0]to obtain the first image.

The following is the method to achieve this goal:

{% pageDetail pageImages with name="Images" %}
{% if pageImages %} {# 检查是否存在幻灯片组图 #}
    {% set firstCarouselImage = pageImages[0] %}
    <img src="{{ firstCarouselImage }}" alt="{% pageDetail with name="Title" %}" />
{% endif %}

This code first usespageDetailObtainImagesField and store the result inpageImagesVariable. Next, throughif pageImagesDetermine if there is a slide image. If it exists, use{% set firstCarouselImage = pageImages[0] %}Assign the first element of the array (i.e., the URL of the first image) tofirstCarouselImagea variable, then display it in a<img>in the tag.

You can also use this image as a CSS background image:

{% pageDetail pageImages with name="Images" %}
{% if pageImages %}
    {% set firstCarouselImage = pageImages[0] %}
    <div class="page-banner" style="background-image: url('{{ firstCarouselImage }}');">
        <!-- 其他页面内容 -->
    </div>
{% endif %}

This method provides you with great flexibility, whether the single-page configuration is a single main image or multiple slides, you can accurately extract and use the required images according to your needs.

Image upload and processing prompt

Please note the following points when using these tags to retrieve images:

• Backend configuration:Make sure you have uploaded images for the corresponding page in the "Page Management" section of the Anqi CMS backend, and that these images have been associated withLogo/ThumborImagesfield.
• Automatically extract:If you have not manually uploaded a thumbnail but the single-page content contains images, Anqi CMS may automatically extract the first image in the content according to the settings.
• Image processing:AnQi CMS provides image auto-compression, WebP format conversion, thumbnail size and processing methods, and other functions in the "Content Settings".These settings will affect the final display effect and loading speed of the image on the front end, and it is recommended to optimize according to the website requirements.

by masteringpageDetailFlexible calls for image fields, your safe CMS website will be able to present visual content better, enhance user experience, and bring more possibilities for website operations.

Frequently Asked Questions (FAQ)

1. If I haven't uploaded any images for the single page,LogoorThumbwhat will the field display?

If the single page hasn't explicitly uploaded 'thumbnail large image' or 'thumbnail', thenLogoorThumbThe field may be empty. However, AnQi CMS usually has an intelligent recognition feature, if the text content of a single page contains images, the system may try to automatically extract the first image in the content as the default thumbnail.It is recommended that you always add a judgment (such as when using these image fields in the template){% if item.Logo %}To avoid the page display error that may occur when the image link is empty, or provide a default placeholder image.

Can I directly obtain the content of a single page (ContentField) pictures?

pageDetaillabel'sContentThe field returns single-page HTML content, which may contain multiple images. To retrieve all the image URLs in this content, you need toContentThe field returns HTML strings that need to be parsed. This usually requires some JavaScript code or more complex backend template processing logic to extract all of the<img>tags and theirsrcProperty. The template tags of AnQi CMS are mainly used to obtain structured field data, and for the deep parsing of internal elements of unstructured content (such as正文HTML), developers need to perform secondary processing.

Why does my uploaded image appear blurry or the wrong size on the website?

This is likely related to the global image processing strategy in the 'Content Settings' of AnQi CMS backend.In the "Content Settings", you can configure whether to automatically compress large images, automatically convert to WebP format, and set the "processing method" (such as scaling proportionally by the longest side, cropping by the shortest side, etc.) and "thumbnail size" of the thumbnails.If your image looks blurry or the size does not match your expectations, please check these settings to ensure they match your website design and display requirements.Sometimes, after changing the settings, you may need to regenerate thumbnails in bulk to apply the new configuration.