As a website operator deeply understanding the essence of security CMS content management, I know the importance of image content in attracting and retaining users.For your concern about whether the Anqi CMS document classification supports uploading banner images and thumbnails, and how to call these resources on the front end, I can clearly tell you that Anqi CMS provides comprehensive support for this and has flexible front-end calling methods.
What are the image support features of AnQi CMS document classification?
At the design stage of Anqi CMS, full consideration was given to the diverse display needs of website content.In the document classification management interface, the system allows operators to upload various types of visual materials for each category.
Specifically, when you enter the background of AnQi CMS, in the 'Content Management' module under 'Document Category', you will find that the 'Other Parameters' area provides options specifically used to manage the visual elements of the category.
The "Banner image" feature allows you to set a set of carousel images for category pages, which are usually used to display at the top of the page or in a specific area to convey the category theme or attract users.The system supports uploading multiple images, and it is recommended that you use images of the same size when uploading to ensure the consistency and beauty of the front-end display.
In addition, the 'thumbnail' upload option is provided by the Anqi CMS.The category thumbnail is not required, but it can be displayed as a representative image of the category in certain scenarios on the website frontend, such as category lists, navigation menus, or aggregate pages, helping users quickly identify and understand the category content.You can choose whether to upload according to your actual page design requirements.
The method to call the front-end classification image resource
The AutoCMS uses the Django template engine syntax, which makes the development and maintenance of front-end templates very intuitive and flexible.For document classification banner images and thumbnails, you can easily call them on the website's frontend by using built-in template tags.
Call the classification thumbnail (Thumb and Logo)
In the template system of AnQi CMS, the thumbnails of categories usually have two forms of expression:Thumb(General thumbnail) andLogo(Generally refers to a thumbnail that is larger or more representative). You can obtain the thumbnail path of the current category or a specified category bycategoryDetailthe label.
For example, on the category detail page, if you need to display the thumbnail of the current category, you can write the template code like this:
{# 调用当前分类的通用缩略图 #}
<div>
<img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />
</div>
{# 调用当前分类的Logo（大缩略图） #}
<div>
<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
</div>
If you want to call the thumbnail of each category item in the category list, you can callcategoryListit directly in the loopitem.Thumboritem.LogoProperties:
{% categoryList categories with moduleId="1" parentId="0" %}
<ul>
{% for item in categories %}
<li>
<a href="{{ item.Link }}">
<h3>{{item.Title}}</h3>
{# 在分类列表中调用每个分类的缩略图 #}
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}" />
{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% endcategoryList %}
Call the category Banner group image (Images)
The Banner group images of the category usually consist of a set of pictures that need to be displayed in a loop.categoryDetailTags provideImagesThe field returns an array containing multiple image URLs. You can iterate over this array to build a carousel or other multi-image display effect.
The following is an example of the code used to call the Banner group image on the category detail page:
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %} {# 确保有图片才渲染 #}
<div class="category-banner-carousel">
{% for imageUrl in categoryImages %}
<div class="carousel-item">
<img src="{{imageUrl}}" alt="分类：{% categoryDetail with name="Title" %}" />
</div>
{% endfor %}
</div>
{% endif %}
{% endcategoryDetail %}
If you only need to use the first Banner image as the background of the category page or for a single display, you can handle it like this:
{% categoryDetail bannerImages with name="Images" %}
{% set firstBanner = "" %}
{% if bannerImages|length > 0 %}
{% set firstBanner = bannerImages[0] %}
{% endif %}
{% if firstBanner %}
<div class="category-header" style="background-image: url('{{firstBanner}}');">
{# 其他分类标题或内容 #}
<h1>{% categoryDetail with name="Title" %}</h1>
</div>
{% endif %}
{% endcategoryDetail %}
Through these flexible template tags and attributes, you can freely display category thumbnails and Banner images on the front page of the Anqi CMS according to the design requirements of the website, achieving rich visual effects and better user experience. In actual operation, please ensure that your template file is encoded in UTF-8 and correctly placed in/templateThe corresponding template folder under the catalog.
Common Questions and Answers (FAQ)
1. I uploaded the classified Banner image, but it did not display on the front page. Why is that?The reasons why the category Banner image may not be displayed on the front-end page may be various. First, please check if your front-end template includes the callcategoryDetailLabel and output in a loopImagesField code.If the code exists, please confirm that you have uploaded and saved the image in the "Document Category" settings on the backend.Additionally, if your website uses caching, please try to clear the system cache and browser cache.Finally, check the browser console for any error messages, which can help locate the problem.
2. What is the difference between the 'Logo' and 'Thumb' in category thumbnails, and which one should I use?In the Anqi CMS, “Logo” usually refers to a larger or more visually striking category representative image, while “Thumb” is a smaller general thumbnail.It depends on the design requirements of your website's frontend page.Logo, and in compact category lists or breadcrumb navigation,ThumbIt would be more suitable. You can choose to use it according to the actual image size and importance of the display scene.
3. How to set different links or titles for classified Banner images? Does Anqi CMS support it?According to the current document, the 'Document Category' 'Banner Image' function of Aiqi CMS is mainly used to upload a collection of images and does not directly provide an option to set links or titles for each Banner image separately.These images are usually a pure list of image URLs when called on the front-end.If you need to set independent links and titles for each Banner image, you may need to consider using the 'Single Page Management' feature, and create a single page for each Banner image, then set its link and title in the single page, or customize fields through template secondary development to meet more complex carousel image needs.