How to obtain the Logo image and Banner group image of a specified article or category in Anqi CMS, and apply them flexibly in templates?

Master visual content: Flexible invocation and display of article and category logo images and Banner group images in Anqi CMS

At the time of building and operating a website, eye-catching visual content is the key to attracting users and conveying the brand image.AnQi CMS knows this point and therefore provides powerful and flexible image management and call functions in system design, whether it is for the cover Logo of articles, the representative thumbnail of categories, or the Banner group pictures used to create atmosphere, they can all be easily realized and applied to website templates.

This article will delve into how to obtain the logo image and banner group image of specified articles or categories in Anqi CMS, and present these visual elements ingeniously on your website template.

Understand the image resource management of AnQi CMS

In AnQi CMS, image resources are divided into several categories, and their settings and calling methods in the background are slightly different:

• Logo image (cover image/thumbnail)This usually refers to a single representative image, such as the cover image of an article, the icon of a category, or a thumbnail.They are usually uploaded directly on the edit page of articles, categories, or single pages or selected from the media library.The Anqi CMS will automatically handle thumbnails, even extracting them from the article content.
• Banner group imageThis type of image is usually a collection of pictures used for carousel or display of multiple visual contents, commonly found at the top of category pages or in single-page introduction areas.They are also set through multi-image upload in the category or single-page editing pages.
• Home page banner group imageThis is the global Banner setting for the entire website homepage or specific area, usually configured through the "Navigation Settings" or independent "Banner Management" function in the background, allowing administrators to create different Banner groups.

These images once uploaded and configured on the backend, we can flexibly call and display them in the front-end template using the template tags provided by AnQi CMS.

Second, retrieve and display the logo image and group image of the specified article

For specific articles on the website, we may need to display a unique cover logo image or a selection of group images to enrich the content. Anqi CMS providesarchiveDetailLabel to retrieve this information.

1. Get the article's Logo image (cover image)

The article's Logo image is inarchiveDetailthe corresponding field in the tag isLogo. If you want to get the logo image of the article you are currently browsing, you can use the following method:

<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />

If you need to get the logo image of an article with a specific ID, for example, an article with ID 10, you can do it like this:

{% archiveDetail articleLogo with name="Logo" id="10" %}
<img src="{{ articleLogo }}" alt="指定文章标题" />

Here, we will assign the URL of the obtained logo image toarticleLogovariable, then use it as<img>label'ssrcproperty. At the same time, for SEO friendliness, it is recommended to use the article title asaltthe value of the attribute.

2. Get the group photo (multiple photos) of the article

The group photo of the article, inarchiveDetailthe corresponding field in the tag isImages. It is different from the Logo image,Imagesfield returns an array of image URLs, so we need to usefora loop to iterate and display them.

{% archiveDetail articleImages with name="Images" %}
{% if articleImages %} {# 确保组图存在才渲染 #}
<div class="article-gallery">
    {% for imgUrl in articleImages %}
    <img src="{{ imgUrl }}" alt="文章图片描述" />
    {% endfor %}
</div>
{% endif %}

In the above code, we first obtained the article list through{% archiveDetail articleImages with name="Images" %}get the article's group image list and assign it toarticleImagesTo avoid empty content when there is no group image, we use{% if articleImages %}to make a judgment. Then,{% for imgUrl in articleImages %}Loop through each image URL in the array and useimgUrlas<img>label'ssrc.

The third, get and display the Logo image and Banner group image of the specified category

For the category page of a website, it is usually also necessary to have representative visual elements, such as category Logo images and Banner groups used at the top of the page. At this time, we can usecategoryDetail.

1. Obtain the category's Logo image (thumbnail)

The category's Logo image is incategoryDetailthe corresponding field in the tag is alsoLogo. If you want to obtain the current category's Logo image:

<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />

If you need to retrieve the logo image of a specified category ID, for example, the category with ID 5:

{% categoryDetail categoryLogo with name="Logo" id="5" %}
<img src="{{ categoryLogo }}" alt="指定分类标题" />

This is similar to the method of retrieving the article logo image, make sure to fill in thesrcandaltproperties correctly.

2. Get the Banner group image of the category

The Banner group image of the category is located incategoryDetailthe corresponding field in the tag isImages. Just like the article group image, it is also an array of image URLs.

{% categoryDetail categoryBanner with name="Images" %}
{% if categoryBanner %}
<div class="category-banner-slider">
    {% for bannerUrl in categoryBanner %}
    <img src="{{ bannerUrl }}" alt="分类Banner图片" />
    {% endfor %}
</div>
{% endif %}

Here, we getcategoryBannerImage list, and throughforLoop to display each image.

Flexible application: Use the image list as a background image.

Sometimes, we want the Banner image to be the background of a certain block, rather than direct<img>Label. At this point, we can obtain the first image of the group and apply it to the CSS style:

`twig {% categoryDetail category