How to add categories to image resources in AnQiCMS and manage the frontend display according to categories?

In AnQiCMS (AnQiCMS), effectively organizing and managing your website image resources is the key to improving operational efficiency and front-end display quality.The image classification feature not only makes the background management work orderly, but also provides a flexible foundation for the presentation of front-end page content.Below, we will take a detailed look at how to add categories for image resources in AnQiCMS and巧妙ly manage the display on the front end.

Background operation: Add categories for image resources

AnQiCMS provides an intuitive classification management function for image resources, which helps you classify images as you manage articles, making it convenient to search and use them.

Firstly, you need to log in to the AnQiCMS backend management interface.In the left navigation bar, find and click "Page ResourcesAfter entering the image resource management page, you will see the list of all uploaded images.

To create categories for image resources, please click the 'Category Management' button at the top of the page.Here, you can add new image categories.Give a clear name to the category, such as "Product Display Images", "News Illustrations", "Website Logo", "Banner Images", etc., so that it is clear at a glance during subsequent management.Currently, AnQiCMS supports flat management of image resource categories, allowing you to focus on building practical category hierarchies.

When you have created the category, return to the "Image Resource Management" page.You can select the images you need to categorize in bulk, and then click the 'Batch transfer images to specified category' function at the top of the page.Select the category you previously created, and these images can be moved to the corresponding category.This process is very efficient, especially when you have a large number of images to organize, it can save a lot of time.

The main purpose of image classification is to facilitate the convenience of backend management.Through classification, you can quickly filter out the images you need, such as only viewing 'Product Display Images' or 'Banner Images'. This is extremely important basic work for content creation and updates.

Front-end display: How to use categories to organize image display

In AnQiCMS, images are usually displayed as part of a specific content on the front end, such as the pictures of a news article, multi-angle images on a product page, a banner on a single page, etc.Therefore, the "Display Management by Category" of the front-end images is more about how to associate these images with your website content (articles, products, single pages, content categories themselves) and achieve the display of image collections through content categories.

Although the image resource classification of AnQiCMS is mainly used for background organization, you can combine it with the 'Document Classification' feature in content management to achieve flexible image display on the front end. Here are several common front-end display strategies:

1. In content, call images and display them according to content categories.

When you create a "documentThese images will be bound to specific content.

  • Call images in the content.

    • In an article or single page detail page, you can usearchiveDetailorpageDetailtags to get the images associated with the current content.
    • For example, to display the cover image and group images of a document, you can write template code like this:.
    {% archiveDetail currentArchive with name="Images" %} {# 获取当前文档的组图 #}
{% if currentArchive %}
<div class="image-gallery">
    {% for imageUrl in currentArchive %}
    <img src="{{ imageUrl }}" alt="文档图片" />
    {% endfor %}
</div>
{% endif %}


<img src="{% archiveDetail with name='Logo' %}" alt="文档封面首图" /> {# 获取文档封面首图 #}

  • Organize the image collection by content category:

    • If you want to display a "image gallery" or "portfolio" on the front end, you can manage each group of images as the content of an "article" or a "product".
    • Then, organize these "galleries" or "collections" through "document classificationFor example, create a "portfolio
    • In the front-end template, you can usecategoryListtags to iterate over these “portfolio” categories, and then use them under each categoryarchiveListLabel to get and display the corresponding content (i.e., the "works" containing images").

    `twig {# Traverse the portfolio categories #} {% categoryList galleryCategories with moduleId=“Your portfolio model ID” parentId=“0” %}

    {% for category in galleryCategories %}
<h2 class="category-title"><a href="{{ category.Link }}">{{ category.Title }}</a></h2>
<div class="category-galleries">
    {# 获取该分类下的作品（文档）列表 #}
    {% archiveList artworks with categoryId=category.Id type="list" limit="