Play with visual content: Flexible invocation and display of article, category logo images, and banner group images in Anqi CMS
Attractive visual content is the key to attracting users and conveying the brand image when building and operating a website.AutoCMS understands this point and therefore provides powerful and flexible image management and call features in system design. Whether it is the cover logo of articles, the representative thumbnails of categories, or the Banner group images used to create an atmosphere, they can be easily realized and applied to website templates.
This article will delve into how to obtain the logo image and banner group images of specified articles or categories in the Anqi CMS, and present these visual elements ingeniously on your website template.
一、Understanding the CMS Image Resource Management
In CMS, image resources are divided into several categories, and their settings locations 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 to the editing page of articles, categories, or single pages, or selected from the media library.The default AutoCMS will automatically handle thumbnails, and even extract them from the article content automatically.
- Banner group imageThis type of image is usually a set of pictures used for carousel or display multiple visual content, commonly seen at the top of a category page or in a single-page introduction area.They are also set using the multi-image upload method on the category or single-page editing pages.
- Home page Banner group imageThis is the global Banner setting for the entire website homepage or a specific area, usually configured through the 'Navigation Settings' or an independent 'Banner Management' feature in the backend, 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 through the template tags provided by the Anqi CMS.
English, get 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 set of selected group photos to enrich the content. Anqi CMS providesarchiveDetailLabel to get this information.
1. Get the article's Logo image (cover image)
The article's Logo image, inarchiveDetailthe corresponding field in the tag isLogoIf you want to get the logo image of the article you are currently browsing, you can use the following method directly:
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
If you need to get the Logo image of a specified article ID, for example, the 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 obtained Logo image URL toarticleLogovariable, then use it as<img>Tagssrcproperty. To make it SEO-friendly, it is recommended to use the article title asaltthe value of the attribute.
2. Get the article's group photos (multiple photos)
the article's group photos,archiveDetailthe 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 through 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 obtain{% archiveDetail articleImages with name="Images" %}to get the list of group photos in the article and assign it toarticleImages. To avoid displaying empty content when there is no group image, we use{% if articleImages %}to make a judgment. Subsequently,{% for imgUrl in articleImages %}to iterate over each image URL in the array and useimgUrlas<img>Tagssrc.
English translation: Obtain and display the Logo image and Banner group image of the specified category
For the website's category page, it usually also needs representative visual elements, such as category logo images and banner groups for the page header.categoryDetailLabel.
1. Get the category Logo image (thumbnail)
The category Logo image, incategoryDetailthe corresponding field in the tag isLogo.
<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
If you need to obtain the logo image for a specified ID category, 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 obtaining the logo image of an article, make sure to fill in the properties correctly.srcandaltCorrectly.
2. Get the Banner group image of the category
The Banner group image of the category,categoryDetailthe corresponding field in the tag isImages. 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 getcategoryBannerGroup image list, and throughforCycle display each image.
Flexible application: Use the group image as a background image
Sometimes, we hope that the Banner image can be used as the background image 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:
English categoryDetail category