Images are an indispensable part of a website, they can not only beautify the page, but also effectively convey information and enhance the user experience.However, with the increase in the number of images on the website, how to efficiently manage these image resources and flexibly display them on the front page as needed has become a challenge faced by many website operators.Auto CMS (AutoCMS) is well-versed in this, providing a set of intuitive and powerful image resource management system that helps us easily control these visual elements.
Back-end classification management of image resources: Keep everything in order
In the AnQi CMS, the classification management of image resources is the foundation for efficient operation.By reasonable classification, we can quickly locate the required images, avoiding the needle in a haystack in a vast number of images.
Firstly, 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:In 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 content type of the website, you can create categories such as 'Product Display', 'Company Activities', 'Team Style', or 'Article Illustrations'.Supports multi-level categories, which means you can create subcategories under the main category, such as 'Mobile Series' and 'Computer Accessories' under 'Product Display', to build a clear image organization structure.
Upload and categorize:When you upload a new image, you can directly select its category.For images that have been uploaded but not categorized, or images that need to be adjusted in terms of category, the system provides a convenient batch operation function.You can select multiple images, then "batch transfer" them to the specified category, or batch delete images you no longer need.This flexibility greatly improves the efficiency of image management.
Image details and replacement:Click any image, and you can enter its detail page to view all metadata, including the filename, file type, upload time, file size, image resolution, and image address.It is worth mentioning that the Anqi CMS also provides image replacement functionality.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. Simply select 'replace' on the detail page, and the URL address of the image will remain unchanged, but the content will be updated to the new image. This is extremely beneficial for the website's SEO and daily maintenance.It is recommended that you clear the local browser cache after replacing or updating the image to ensure that the latest image is displayed on the front end.
Image processing options in global content settings:The "auto" CMS under "Background Settings" provides multiple global configurations related to image processing.You can choose whether to 'enable WebP image format' to optimize image size, whether to 'automatically compress large images' and set the compression width, and select the appropriate 'thumbnail processing method and size' etc.These settings will be applied automatically to the images you upload, helping the website to improve loading speed while ensuring image quality.
Flexible image display by category on the front end: Light up your website
The background image resources are carefully categorized and managed, and the next step is how to present them elegantly on the front page in English.The template tag system of AnQi CMS makes this process intuitive and powerful.
The Antsafe CMS adopts a template engine syntax similar to Django, using specific tags to call backend data. In terms of image display, we will mainly usearchiveList(Document List),archiveDetail(Document Details),categoryList(Category List) andcategoryDetail(Category details) and tags, combined with image fields (such asThumb/Logo/Images) to display the image.
Display a collection of category images on a specific page:Assuming you want to create a "Company AlbumYou can create a single page first in the background and specify a dedicated template file for it.archiveListCall the label to specify the document under the specified category (if the image is uploaded as the cover image or content image of the document), or directly call the image resource.
For example, if you upload an image as a thumbnail (Thumb) of a document and wish to display all images under the "Company Event" category with ID 10, your template code may 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 must nested a loop inside another loop:for循环内部再嵌套一个循环：
{# 显示文档的封面组图 #}
{% 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 list page at the top of a certain category: