How to get the thumbnail and background Banner image of the `categoryDetail` tag?

In AnQi CMS, the visual presentation of a website is crucial for attracting visitors and conveying the brand image.The thumbnail and background Banner image play an important role in web page design, as they can intuitively display the category content and enhance the aesthetics and user experience of the page.AnQi CMS provides flexible and easy-to-use template tagscategoryDetailHelp us easily obtain and display these visual elements.

UnderstandingcategoryDetailTag

categoryDetailThe tag is a powerful tool in the Anqi CMS template system for obtaining detailed information of specific categories.Whether it is the category the current page is in, or any category specified by ID or alias, you can obtain its title, description, link, as well as the thumbnail and background Banner image we focus on today through this tag.

Its basic usage form is usually like this:{% categoryDetail 变量名称 with name="字段名称" id="分类ID" %}

Among them,变量名称Can be any variable name you customize to store the data obtained.name="字段名称"Then it specifies the specific information you want to obtain, such as category titles, category links, etc.;id="分类ID"ortoken="分类别名"It is used to precisely specify which category of information you want to obtain. If omittedidortokenparameter,categoryDetailThe label automatically retrieves the detailed information of the category to which the current page belongs, which is very convenient on the category list page or category detail page.

Get the category thumbnail

In the AnQi CMS category settings, you can upload a thumbnail for each category, which is usually used for an overview display in the category list.categoryDetailTags providedThumbandLogoTwo fields to get these images.

• Thumbfield: Typically used to obtain the category's thumbnail, suitable for small-sized icons or list images.
• LogofieldUsed to obtain the larger thumbnail size of a category, which may be used as the category header image in some designs.

To get and display the category thumbnail in a template, you can use the following method.categoryDetailTags:

{# 获取当前分类的普通缩略图 #}
<img src="{% categoryDetail with name='Thumb' %}" alt="{% categoryDetail with name='Title' %}" />

{# 获取当前分类的较大尺寸缩略图 #}
<img src="{% categoryDetail with name='Logo' %}" alt="{% categoryDetail with name='Title' %}" />

{# 如果需要获取指定ID分类的缩略图，例如分类ID为5的缩略图 #}
<img src="{% categoryDetail with name='Thumb' id='5' %}" alt="{% categoryDetail with name='Title' id='5' %}" />

Please note,altThe attribute is very important for images, as it not only improves SEO friendliness but also provides text descriptions when the image cannot be loaded. We usually combinecategoryDetail with name='Title'to dynamically fill in.altProperty.

These thumbnails are usually uploaded and set in the 'Content Management' -> 'Document Category' section when editing categories in the 'Thumbnail' field in the background.

Get the background Banner image of the category

In addition to thumbnails, the category page sometimes needs a background Banner image with stronger visual impact, especially at the top of the category or for carousel display.The Anqi CMS category management supports uploading multiple images as the Banner group image for the category.categoryDetailTag throughImagesfield to get these Banner images.

ImagesThe field returns an array of image URLs, therefore, if you need to display all Banner images (such as for a carousel), you can usefora loop to iterate over these images:

<div class="category-banner-carousel">
    {% categoryDetail categoryBanners with name="Images" %}
    {% for imageUrl in categoryBanners %}
        <img src="{{ imageUrl }}" alt="{% categoryDetail with name='Title' %}" />
    {% endfor %}
</div>

However, in many cases, we may only want to select one image (such as the first one) as the background Banner for the category page. At this time, you can getImagesThe first element in the array is applied to the HTML element.background-imageStyle:

{# 获取当前分类的Banner组图，并取出第一张作为背景图 #}
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %} {# 确保有图片上传，避免报错 #}
    {% set firstBanner = bannerImages[0] %}
    <div class="category-hero-banner" style="background-image: url('{{ firstBanner }}'); background-size: cover; background-position: center; height: 300px;">
        {# 这里可以放置Banner上的文字内容，如分类标题等 #}
        <h1>{% categoryDetail with name='Title' %}</h1>
        <p>{% categoryDetail with name='Description' %}</p>
    </div>
{% endif %}

In the above example, we first take theImagesfield to assign the image array tobannerImagesthe variable, then throughbannerImages[0]Access the first element of the array (i.e., the first uploaded Banner image). Then, we use adivelement, through inline stylesbackground-image: url('...')Set the background image. To make the background image better adapt, you may also need to addbackground-size: cover;andbackground-position: center;CSS properties.

These Banner images are also edited in the "Content Management" -> "Document Category" section when editing categories in the "Banner Image" field for uploading and setting multiple images.

By using the above method, you can flexibly obtain and display category thumbnails and background Banner images in the Anqi CMS template, bringing more possibilities to website design.

Frequently Asked Questions (FAQ)

1. Ask: Where in the backend are the thumbnail and Banner image for the category set?Answer: You can select 'Document Category' under the 'Content Management' module in the Anqi CMS backend and then edit the specific category.In the category editing page, you will see the fields "Thumbnail" and "Banner image", which are used to upload a single thumbnail and multiple Banner images.

2. Why did I follow the example code, but the thumbnail or Banner image did not display on the page?There may be several reasons:

   • Image not uploaded:Please check if the thumbnail or Banner image has been uploaded for the corresponding category in the background.
   • The template file location is incorrect:Make sure your template file is correctly placed in/templatethe current theme folder under the directory.
   • Cache problem:If you change the template or background settings without refreshing the page in time, old content may be displayed.Please try clearing your browser cache or click the 'Update Cache' button in the Anqi CMS backend.
   • CSS style occlusion or impact:Check if there are unexpected occlusion or size issues with the CSS style of the page, which may cause the image to display incorrectly.

3. Ask: If my category has uploaded multiple Banner images, but I want to display different Banner images in different positions, such as one for the background and one for the list cover, can it be done?Yes, it can be. BecauseImagesThe field returns an array of image URLs. You can access different images according to your needs. For example,{{ bannerImages[0] }}You can get the first image,{{ bannerImages[1] }}Get the second image, and so on. You can also combine it with the template.forLoop, displaying images selectively according to their order in the array or by other logical judgments.