In AnQi CMS, single pages (such as 'About Us', 'Contact Us', etc.) can not only carry rich text information but also greatly enhance the attractiveness and professionalism of the page through visual elements.Obtain and display the logo, thumbnail, and slide group image on a single page, which is a key step to optimize the page display effect.The AnQi CMS provides flexible template tags, allowing you to easily implement these features.
Understand the composition of visual elements on a single page
In Anqi CMS, each single page can have exclusive visual elements to meet different display needs. We usually use the following several types:
- Single-page Logo (or Main Image)This is typically the core visual representation of the page, possibly a larger image used to highlight the theme or brand of the page.In AnQi CMS, it is usually referred to as 'Single Page Thumbnail Full Image'.
- Single-page ThumbnailThis is a simplified preview image of the page content, relatively small in size, commonly used as a preview image on list pages, when sharing, or as an auxiliary visual element in the page局部.
- Single-page slide group imageIf you want to display a set of carousel images on a single page, such as team photos, product series images, or environmental displays, you will need to use the slide group feature.
How to set these images in the background management
Before calling the start template, make sure you have uploaded the corresponding images to the single page in the background:
- Log in to the Anqi CMS background, go toPage Resources>Page Management.
- Edit or create a single page.
- In the editing interface of the single page, you will see an option named"Thumbnail"and"Banner Image".
- "Thumbnail"Corresponds to what we commonly call a single-page thumbnail. You can upload one or select an existing image.
- "Banner Image"Then it corresponds to the Logo (main image) and slide group image of a single page.You can upload multiple images, which will be displayed as a slideshow set. The first image is usually used as the main logo or banner image for the page.
Ensure that you have uploaded the required images according to the needs, so that they can be correctly called on the front-end.
PasspageDetailRetrieve single page information by label
Secure CMS throughpageDetailUse template tags to retrieve detailed information about a specific single page, including its visual elements. This tag is very flexible and can retrieve data based on the single page's ID or URL alias.
Usually, if you are visiting a single-page, pageDetailThe label will automatically retrieve information from the current page without the need to specify an ID. However, if you need to call specific single page information from other pages, you must go throughidparameters ortokenThe parameter for specifying the alias of the URL.
The basic syntax of the tag is as follows:{% pageDetail 变量名 with name="字段名称" %}
Among them,nameThe parameter is used to specify the field you want to retrieve, for example:Logo/ThumborImages.
Get the logo (main image) of a single page
The single-page logo is typically its most important visual symbol, representing itsLogothumbnail, representing the 'thumbnail full image' of the page content.
You can use the following code to get and display it:
{# 假设您正在访问ID为1的单页面，或者当前页面就是目标单页面 #}
<div>
{# 获取当前单页面的Logo #}
{% pageDetail pageLogo with name="Logo" %}
<img src="{{ pageLogo }}" alt="{% pageDetail with name='Title' %}" />
</div>
{# 如果要获取指定ID的单页面Logo，例如ID为5的单页面 #}
<div>
{% pageDetail page5Logo with name="Logo" id="5" %}
<img src="{{ page5Logo }}" alt="{% pageDetail with name='Title' id='5' %}" />
</div>
This code first retrieves the latest 5 articles bypageDetailAssign the address of the logo image of the single page topageLogoa variable, and then in<img>use this variable to display the image.altThe title of a single page is called, which is very helpful for SEO and accessibility.
Get the thumbnail of a single page
Single-page thumbnails are commonly used in list or preview scenarios. It is accessed throughThumbfields.
The following is an example of code to retrieve and display a single-page thumbnail:
{# 获取当前单页面的缩略图 #}
<div>
{% pageDetail pageThumb with name="Thumb" %}
{% if pageThumb %} {# 建议添加条件判断，如果缩略图不存在则不显示 #}
<img src="{{ pageThumb }}" alt="{% pageDetail with name='Title' %}" />
{% else %}
<img src="/static/images/default-thumb.jpg" alt="默认图片" /> {# 如果没有缩略图，可以显示一个默认图片 #}
{% endif %}
</div>
{# 获取指定ID的单页面缩略图，例如ID为5的单页面 #}
<div>
{% pageDetail page5Thumb with name="Thumb" id="5" %}
{% if page5Thumb %}
<img src="{{ page5Thumb }}" alt="{% pageDetail with name='Title' id='5' %}" />
{% endif %}
</div>
Here is addedifCondition judgment to deal with the case where some single-page may not have uploaded thumbnails, thus avoiding invalid image links on the page.You can also set the "default thumbnail" in the "Content Settings" on the backend, so that the system will automatically use the default image when no thumbnail is uploaded.
Retrieve a single page of slide group images
Slide group images are throughImagesfields obtained, it returns an array of image addresses. Since it is an array, you need to useforLoop to iterate and display each image.
The following is an example code to display a group of slides on a single page:
{# 获取当前单页面的幻灯片组图 #}
<div class="swiper-container"> {# 假设您使用Swiper或其他轮播库 #}
<ul class="swiper-wrapper">
{% pageDetail pageImages with name="Images" %}
{% for item in pageImages %}
<li class="swiper-slide">
<img src="{{ item }}" alt="{% pageDetail with name='Title' %}" />
</li>
{% endfor %}
</ul>
</div>
{# 如果您只需要获取幻灯片组图中的第一张作为页面的主图，可以这样做： #}
{% pageDetail pageImages with name="Images" %}
{% if pageImages %}
{% set firstImage = pageImages[0] %} {# 获取数组中的第一个元素 #}
<img src="{{ firstImage }}" alt="{% pageDetail with name='Title' %}" />
{% endif %}
This code will iteratepageImagesthrough each image address in the array and generate a<li>and<img>Tag.Combine with front-end JavaScript slider libraries (such as Swiper.js, Owl Carousel, etc.), you can achieve dynamic slide effects.The second example shows how to use only the first image in the group as the cover image.
With the combination of these template tags, you will be able to very flexibly obtain and display the logo, thumbnail, and group slide images on a single page in the Anqi CMS, bringing richer visual presentation and a better user experience to your website.
Common Questions (FAQ)
1. Why did I upload a single-page image, but it didn't display on the frontend?Firstly, please check if you have indeed uploaded an image for this single page in the background "Page Management". Secondly, confirm that you are using the correct template file.pageDetailTag and field names (such asLogo/ThumborImages) to call. Finally, clear the browser cache and the system cache of the CMS to ensure that the latest data and templates are loaded.
What is the difference between the 'Logo' and 'Thumbnail' on a single page? How should I choose which one to use?In the Anqi CMS.pageDetailin the tag,LogoIt typically refers to 'single-page thumbnail full-size image', representing the main, larger-sized image on the page, suitable as the main visual or Banner.ThumbIt is a 'single-page thumbnail', usually based on the system's presets