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

In the Safe CMS, the visual presentation of the website is crucial for attracting visitors and conveying the brand image.Category thumbnails and background banners play an important role in web page design, as they can directly display the category content and enhance the aesthetics and user experience of the page.categoryDetailHelp us easily obtain and display these visual elements.

UnderstandingcategoryDetailtags

categoryDetailLabels are powerful tools in the AnQi CMS template system used to obtain 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 information we focus on today through this tag.

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

Among them,变量名称It can be any custom variable name you use to store the obtained data;name="字段名称"Then it specifies the specific information you want to retrieve, such as category title, category link, etc;id="分类ID"ortoken="分类别名"It is used to precisely specify which category's information you want to retrieve. If omittedidortokenparameters,categoryDetailLabels will automatically retrieve the detailed information of the current page category, which is very convenient on the category list page or category detail page.

Get the thumbnail of the category

In the category settings of Anqi CMS, you can upload a thumbnail for each category, which is usually used to display an overview in the category list.categoryDetailTags provideThumbandLogoTwo fields are used to obtain these images.

  • ThumbFieldEnglish: Usually used to obtain the general thumbnail of the category, suitable for small icons or list images.
  • LogoField：It is usually used to get the larger thumbnail of the category, which may be used as the category header image in some designs.

To get and display the category thumbnail in the template, you can use it like this: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 populatealtproperties.

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

Get the background Banner image of the category

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

ImagesThe field returns an array of image addresses, so if you need to display all Banner images (such as for carousels), you can useforYou may need to use a 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 of the classification page. At this time, you can getImagesThe first element in the array, and apply it 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 convert the.Imagesfield to get the image array assigned tobannerImagesthe variable, and then pass throughbannerImages[0]Access the first element of the array (i.e., the first uploaded Banner image). Then, we use andivelement 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;these CSS properties.

These Banner images can also be edited in the "Content Management" -> "Document Category" section in the background, where multiple images can be uploaded and set in the "Banner Image" field.

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

Common Questions (FAQ)

  1. 问：Where in the backend can the thumbnail and Banner image for categories be set?答：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 respectively.

  2. 问：Why doesn't the thumbnail or Banner image appear on the page even though I followed the example code?答：There may be several possible reasons:

    • 图片未上传：Please check if the thumbnail or Banner image has been uploaded in the corresponding category in the background.
    • The location of the template file is incorrect:Make sure your template file is correctly placed in/templateThe current theme folder under the catalog.
    • Cache issue:If the template or background settings are changed and the page is not refreshed in time, outdated content may be displayed.Please try clearing your browser cache or click the 'Update Cache' button in the Security CMS backend.
    • CSS Style Obstruction or Impact:Check if there are any unexpected obstructions or size issues with the CSS style on the page, causing the image to not display normally.

  3. 问：If my category uploads 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, is it possible?答：可以的。SinceImages字段返回的是一个图片地址数组，您可以根据需求访问数组的不同索引来获取不同的图片。For example,{{ bannerImages[0] }}Can obtain the first image,{{ bannerImages[1] }}Obtain the second image, and so on. You can also combine it with the template.forLoop, display images selectively based on their order in the array or through other logical judgments.