How to retrieve and display the Logo, thumbnail, and slideshow group on a single page?

In Anqi CMS, a single page (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.Retrieve and display the Logo, thumbnail, and slide group image of a single page, which is a key step to optimize the page display effect.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 types:

  1. Single page logo (or main image)This is usually the core visual representation of the page, possibly a large image used to highlight the theme or brand of the page.In AnQi CMS, it is usually referred to as 'Single Page Thumbnail Image'.
  2. Single-page thumbnailThis is a simplified preview image of the page content, relatively small in size, often used as a preview image in list pages, sharing, or as an auxiliary visual element in the local page.
  3. Single-page slide group image: If you wish 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 slideshow feature.

How to set these images in the background management

Before starting the template call, make sure you have uploaded the corresponding images to the single page in the background:

  1. Log in to the Anqi CMS background, go toPage Resources>Page Management.
  2. Edit or create a single page.
  3. In the editing interface of the single page, you will see named"Thumbnail"and"Banner Image".
    • "Thumbnail"This is what we commonly call a single-page thumbnail. You can upload one or choose an existing image.
    • "Banner Image"It corresponds to the logo (main image) and the slide group image of a single page.You can upload multiple images, which will be used as a slide group, and the first image is usually used as the main Logo or Banner image for the page.

Make sure you have uploaded the required images as per your requirements, so that they can be correctly called on the front end.

BypageDetailLabel to get single page information

Anqi CMS passedpageDetailTemplate 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 ID or URL alias of a single page.

Generally, if you are visiting a single-page,pageDetailThe tag will default to fetching information from the current page, no additional ID is needed. However, if you need to call specific single page information from other pages, you will need to go throughidortokenThe parameter to specify by the URL alias.

The basic syntax of the tag is as follows:{% pageDetail 变量名 with name="字段名称" %}

Among them,nameThe parameter is used to specify the fields you want to retrieve, for example.Logo/ThumborImages.

Retrieve the logo (main image) of a single page.

The logo of a single page is usually its most important visual symbol, which is obtained throughLogothe field, 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 goes throughpageDetailThe tag assigns the logo image address of the single page topageLogoa variable, and then in a<img>tag, use this variable to display the image.altThe attribute called the title of the single page, which is very helpful for SEO and accessibility.

Get the thumbnail of the single page.

Thumbnail of a single page is usually used in list or preview scenarios. It passes throughThumbthe field.

The following is a code example of obtaining and displaying a thumbnail of a single page

{# 获取当前单页面的缩略图 #}
<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 an additionifConditional judgment to deal with the situation where some single-page may not have uploaded thumbnails, thereby avoiding invalid image links on the page.You can also set the 'default thumbnail' in the 'Content Settings' backend, so that when no thumbnail is uploaded, the system will automatically use the default image.

Obtaining a slide group image of a single page

The slide group image is obtained throughImagesthe field, it returns an array of image addresses. Since it is an array, you need to usefora loop to iterate through and display each image.

Here is an example of code to display a single-page slide group image:

{# 获取当前单页面的幻灯片组图 #}
<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 traversepageImagesFor each image address in the array, generate one<li>and<img>Label. Combine with front-end JavaScript carousel libraries (such as Swiper.js, Owl Carousel, etc.), and you can achieve dynamic slide effects.The second example shows how to only get the first image of the group photo as a cover image.

By combining these template tags, you can use them flexibly in Anqi CMS to obtain and display the logo, thumbnail, and slide group on a single page, bringing more visual presentation and a better user experience to your website.

Frequently Asked Questions (FAQ)

1. Why did I upload a single-page image but it did not display on the frontend?First, please check if you have indeed uploaded an image for this single page in the background "Page Management". Second, confirm that your template file is using the correctpageDetailLabel and field names (for exampleLogo/ThumborImagesto call. Finally, clear the browser cache and the SafeCMS system cache to ensure that the latest data and templates are loaded.

2. What is the difference between the "Logo" and "Thumbnail" on a single page? How should I choose which to use?In AnQi CMS'spageDetailTagged,LogoIt usually refers to 'single-page thumbnail large image', representing the main, larger-sized image on the page, suitable for the main visual or Banner. AndThumbIs a 'single-page thumbnail', usually the system is based on the preset