How to add categories for image resources in AnQiCMS and manage the front-end 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 function not only makes the background management work organized, but also provides a flexible foundation for the presentation of front-end page content.Below, let's take a detailed look at how to add categories for image resources in AnQiCMS and manage display on the front end巧妙ly.

Background operation: Add image resource categories

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

First, you need to log in to the AnQiCMS admin interface.In the left navigation bar, find and click on 'Page Resources', then select 'Image Resource Management.'After entering the image resource management page, you will see a list of all uploaded images.

To create a category 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 Image', 'News Illustration', 'Website Logo', 'Banner Image', etc., so that it is clear during subsequent management.Currently, AnQiCMS supports flat management of image resource categories, allowing you to focus on building practical category hierarchies.

After you create 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' feature at the top of the page.Select the category you created earlier to move these images to the corresponding category.This process is very efficient, especially when you need to organize a large number of images, it can save a lot of time.

The main purpose of image classification is for the convenience of backend management.By categorizing, you can quickly filter the required images, such as only viewing "product display images" or "Banner images", which is extremely important basic work for content creation and updates.

Front-end display: How to organize image display by category

In AnQiCMS, images are usually displayed as part of specific content on the front end, such as illustrations for news articles, multi-angle display images for product pages, banners on single pages, and so on.Therefore, the 'Categorized Display Management' of front-end images is more about how to associate these images with your website content (articles, products, single pages, content categories themselves) and display the image collection through content categories.

Although the image resource classification of AnQiCMS is mainly used for background organization, you can combine the "document classification" feature in content management to achieve flexible image display on the front-end. Here are some common front-end display strategies:

1. Call images within content and display them by content category

When you create a "document" (such as an article, product) or a "single page", you will select or upload an image as part of the content, such as a thumbnail, featured image, or collage.These images will be bound to specific content.

• Call images within the content:

  • You can use it in article or single page detail pages,archiveDetailorpageDetailtags to get the associated images of the current content.
  • For example, to display the cover image and group images of a document, you can write the 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 "picture gallery" or "portfolio" on the front end, you can manage each set of pictures as the content of an "article" or a "product".
  • Then, organize these 'galleries' or 'collections' through 'document classification'.For example, create a "portfolio" content model, with categories such as "photographic works", "illustration design", and others.
  • In the front-end template, you can usecategoryListtags to iterate through these 'portfolio' categories, and then use them under each categoryarchiveListLabel to retrieve and display the corresponding content (i.e., the "works" containing images).

  `twig {# Traverse the portfolio category #} {% 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="