How to categorize image resources and display them on the front end according to categories?
Images are an indispensable part of website content, they can not only beautify the page but also effectively convey information and improve the user experience.However, with the increase in the number of images on a website, how to efficiently manage these image resources and flexibly display them on the front page as needed has become a challenge for many website operators.AnQiCMS (AnQiCMS) is well-versed in this field, providing a user-friendly and powerful image resource management system that helps us easily handle these visual elements.
Back-end classification management of image resources: Keep everything in order
In Anqi CMS, the classification management of image resources is the foundation for efficient operation.By reasonable classification, we can quickly locate the required image, avoiding the need to search for a needle in a haystack of massive images.
First, you need to log in to the Anqi CMS backend and navigate to"Page Resources"and then click“Image Resource Management”. This is the core hub of all your images and video resources.
Create and organize categories:On the image resource management interface, you will see a "Category Management" area.Click here, you can easily add new image categories.For example, based on the type of website content, you can create categories such as 'Product Display', 'Company Activities', 'Team Style', or 'Article Illustrations'.The AnQi CMS supports multi-level categorization, which means you can create subcategories under the main category, such as 'Mobile Series' and 'Computer Accessories' under 'Product Display', thereby building a clear picture organization structure.
Upload and categorize:When you upload a new image, you can directly select the category it belongs to.For images that have been uploaded but not yet categorized, or images that need to be adjusted for classification, the system provides a convenient batch operation function.You can select multiple images and then transfer them in bulk to the specified category with one click, or delete the images you no longer need.This flexibility greatly improves the efficiency of image management.
Image details and replacement:Click any image, you can enter the detail page to view all the metadata including the filename, file type, upload time, file size, image resolution, and image address.It is worth mentioning that AnQi CMS also provides an image replacement feature.When you need to update an image (such as product image update), you do not need to delete the old image and upload a new one to modify the reference link. Just select Replace on the detail page, the image URL will remain unchanged, but the content will be updated to the new image, which is extremely beneficial for the website's SEO and daily maintenance.It is recommended to clear the local browser cache after replacing or updating images to ensure that the latest images are displayed on the front end.
Image processing options in global content settings:The Anqi CMS provides multiple global configurations for image processing under the 'Content Settings' in the 'Background Settings'.You can choose according to the website requirements whether to 'enable WebP image format' to optimize image size, whether to 'automatically compress large images' and set the compression width, and choose the appropriate 'thumbnail processing method and size' and so on.These settings will be automatically applied to the images you upload, helping the website to improve loading speed while ensuring image quality.
Flexible display of images by category on the front end: Light up your website
After the background image resources are carefully categorized and managed, the next step is how to elegantly present them on the front page.The AnQi CMS template tag system makes this process intuitive and powerful.
The AnQi CMS adopts a template engine syntax similar to Django, using specific tags to call back-end data. In terms of image display, we mainly usearchiveList(Document list),archiveDetail(Document Details),categoryList(Category list) andcategoryDetail(Category Details) and combine image fields such asThumb/Logo/Images) to display images.
Display a collection of category images on a specific page:Suppose you want to create a "company album" page, dedicated to displaying all the pictures under the "company activities" category.You can first create a single page in the background and specify a dedicated template file for it.In this template file, you can usearchiveListLabel to call documents under a specified category (if the image is uploaded as the cover image or content image of the document), or to call the image resource directly.
For example, if you upload an image as a thumbnail (Thumb) for a document and want to display all images in the "Company Activity" category with ID 10, your template code might look like this:
{# 假设我们创建一个名为 "photo_gallery.html" 的模板文件 #}
{% archiveList photoArchives with type="list" categoryId="10" limit="20" %}
<div class="photo-grid">
{% for item in photoArchives %}
<div class="photo-item">
<a href="{{item.Link}}"> {# 可点击进入图片对应的文档详情页 #}
<img src="{{item.Thumb}}" alt="{{item.Title}}" loading="lazy" />
<p>{{item.Title}}</p>
</a>
</div>
{% empty %}
<p>此分类下暂无图片。</p>
{% endfor %}
</div>
{% endarchiveList %}
If your image is uploaded as the "cover image set" (Images) of a document, and you need to display multiple images, you will need toforNested a loop inside a loop:
{# 显示文档的封面组图 #}
{% archiveList documentArchives with type="list" categoryId="10" limit="10" %}
{% for doc in documentArchives %}
<div class="document-item">
<h3><a href="{{doc.Link}}">{{doc.Title}}</a></h3>
<div class="document-images">
{% if doc.Images %} {# 检查是否有组图 #}
{% for imgUrl in doc.Images %}
<img src="{{imgUrl}}" alt="{{doc.Title}}" loading="lazy" />
{% endfor %}
{% else %}
<p>暂无图片</p>
{% endif %}
</div>
</div>
{% endfor %}
{% endarchiveList %}
Display the image of the category on the category page (such as the Banner image):When you want to display the category at the top of a category list page: