In website operation, well-designed single-page (such as "About UsThese 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 retrieve and display the first image from a single page or a group of slides is an important capability to achieve this goal.
AutoCMS provides a powerful template tag system, wherepageDetailThe label is used to retrieve the detailed information of a single page. Through this label, we can easily access various properties of a single page, including text content, links, and image resources. UnderstandingpageDetailHow to handle the image field, which will help you more accurately control the presentation of page content.
KnowpageDetailTags and their image fields
pageDetailThe main function of the label is to retrieve all related data based on the single page's ID or URL alias (token). In terms of image processing, it provides several key fields, namely,Logo/ThumbandImagesThey represent different types of image formats for various purposes.
Get the main thumbnail (Logo)
Usually,Logo字段被设计用来存储单页的主要缩略图或较大的封面图片，您可以将其理解为页面的“主视觉图”或“大缩略图”。如果您在后台编辑单页时上传了“缩略图大图”，那么通过pageDetailthe tag inname="Logo"The parameter allows you to easily 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 like this:
<img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />
If you need to get the main thumbnail of a single page with a specific ID (such as ID 5), you can specifyidParameters:
{% set mainPageLogo = pageDetail with name="Logo" id="5" %}
<img src="{{ mainPageLogo }}" alt="特定页面的主图" />
In this way, the image will be loaded and displayed on your page.
Get a normal thumbnail (Thumb)
WithLogoField similar,ThumbField is used to store the general thumbnail of a single page.It may be a smaller, faster-loading version, suitable for list pages or other scenarios that require the display of small-sized images.When editing a single page in the background, it corresponds to the 'thumbnail upload option'.
getThumbUsage of the field is like,LogoSimilar, just need to,nameparameter settingsThumbas follows:
<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />
Similarly, you can alsoidortokenParameters are retrieved for the specified pageThumb:
{% set pageThumbnail = pageDetail with name="Thumb" id="5" %}
<img src="{{ pageThumbnail }}" alt="特定页面的缩略图" />
Get the first image in the slide group image (Images)
For pages that have configured multiple images as slideshows or carousels, Anq CMS stores these images inImagesField.This field returns an array (or list) of image URLs.Although you can loop through this array to display all images, in many cases, we may only need to show the first image as a cover or preview.
To getImagesField of the first picture, you can combine the characteristics of the Anqi CMS template engine, firstImagesAssign the value of the field to a variable, and then get the first picture through array indexing[0].
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 usespageDetailgetImagesfield and store the result inpageImagesVariable in. Then, throughif pageImagesdetermine if there is a slide image. If it exists, use{% set firstCarouselImage = pageImages[0] %}Assign the value of the first element in the array (i.e., the URL of the first image) tofirstCarouselImagea variable, then display it in a<img>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 you are configuring 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 retrieving images using these tags:
- Backend configuration:Ensure that you have uploaded images for the corresponding single page in the "Page Management" section of the Anqi CMS backend, and that these images are associated with
Logo/ThumborImagesfield. - Automatically extract:If you do not manually upload a thumbnail but there are images in the single-page content, Safe CMS may automatically extract the first image in the content as a thumbnail according to the settings.
- Image processing:The "Content Settings" in AnQi CMS provides features such as automatic image compression, WebP format conversion, thumbnail size, and processing methods.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 needs.
By masteringpageDetailLabeling image fields with flexibility, your security CMS website will be able to present visual content better, enhance user experience, and bring more possibilities for website operation.
Common Questions (FAQ)
1. If I have not uploaded any images for a single page,LogoorThumbwhat will the field display?
If a single page has not explicitly uploaded “Thumbnail Full Image” or “Thumbnail”, thenLogoorThumbField may be empty.However, Anqi CMS usually has intelligent recognition features, if the text content of a single page contains images, the system may attempt to automatically extract the first image in the content as the default thumbnail.{% if item.Logo %}），to avoid the page display exception when the image link is empty, or provide a default placeholder image.
2. Can I directly obtain the content of a single page (Content字段）中所有的图片？
pageDetailTagsContent字段返回的是单页的HTML内容，其中可能包含多张图片。要获取这些内容中所有的图片URL，您需要对ContentThis typically requires parsing the HTML string returned by the field, which usually involves some JavaScript code or more complex backend template processing logic to extract all of<img>Tags and theirsrcProperty.The template tags of Anqi CMS are mainly used to obtain structured field data. For the in-depth analysis of internal elements of unstructured content (such as HTML text), developers need to perform secondary processing.
3. Why do the images I upload to the website appear blurry or with incorrect sizes?
This is likely related to the global image processing strategy in the "Content Settings" of the 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 proportional scaling by the longest side, cropping by the shortest side, etc.) and "thumbnail size" of thumbnails.If your image looks blurry or is not the expected size, 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.