How to implement batch management and classification of image resources in AnQiCMS for easy front-end calls?

In today's content-driven era, images as an important carrier of information, their management and call efficiency directly affect the user experience and operation efficiency of the website.For AnQiCMS users, batch management and flexible invocation of image resources is not a difficult task.This system not only provides intuitive and convenient background operations, but also through intelligent image processing and rich template tags, makes the image resources shine on the front end.

Establish a comprehensive image library: from batch upload to precise classification

The richness of website content is inseparable from a large amount of image materials, and how to organize these materials efficiently is the primary task of image management.The "Page Resources" module under AnQiCMS, the "Image Resource Management" feature is the tool to solve this pain point.

Enter the image resource management interface, and you will find that all images and video resources uploaded to the website are collected here. One of the core functions here is to performCategorization management. You can create different categories based on content type, items, usage, etc., such as 'Product Display', 'News Illustration', 'Team Photo' etc.This is like creating clear folders for your images, making search and management organized.

When it is necessary to upload a large number of images, AnQiCMS supportsbatch upload, it saves the麻烦 of uploading one image at a time. After the image is uploaded, you can easilybatch transferTo the preset categories, it greatly improves the efficiency of initial organization.Of course, you can click at any time to view the details of the uploaded images, including the file name, file type, upload time, file size, image resolution, and access address, etc.If the image needs to be updated, do it directlyimage replacementIt can be, and its URL address remains unchanged for easy maintenance. Unused images can also be easily deleted to keep the image library tidy.

Optimize image resources: Speed up front-end loading and ensure quality protection

After uploading and categorizing the images, AnQiCMS provides a series of intelligent image processing options in the "Content Settings" section of the backend, aimed at optimizing image performance, protecting copyright, and adapting to different front-end display needs.

First, you can choose whetherDownload remote images. If you reference images from external links in your content, enabling this feature will pull them to the local server, which is convenient for centralized management and CDN acceleration.Secondly, to improve website loading speed and save storage space, the system supportsEnabled WebP image format. Once enabled, all subsequently uploaded JPG, PNG, and other image files will be automatically converted to WebP format. For images that have already been uploaded and are not in WebP format, AnQiCMS also providesWebP conversion toolPerform batch conversion.

Furthermore,Automatically Compress Large ImageThe feature can ensure that the uploaded image will not slow down the page loading due to its size.You can set a maximum width, such as 800 pixels, the system will automatically resize images that exceed this width during upload.For thumbnail generation, AnQiCMS providesScale proportionally to the longest side/Fill the longest sideandTrim according to the shortest edgeThree processing methods, allowing you to choose the most suitable thumbnail style and size according to the front-end design. If you need to adjust the thumbnail size later,batch regenerate thumbnailsThe feature can update the thumbnails of all site images with one click.

These backend settings lay a solid foundation for the efficient and beautiful calls of the front-end, without the need for additional front-end code intervention, and can achieve image performance optimization and standardized processing.

Flexible and diverse front-end calls: make images vivid

AnQiCMS template engine provides powerful tags and filters, making it extremely flexible to call image resources on the front end

InContent EditingAt the moment, AnQiCMS' rich text editor supports inserting images directly from the 'image library' into articles, product descriptions, and other content, achieving the effect of seeing it as it is, with convenient operations.

Forlist pageanddetail pageThe image is usually presented in the form of a thumbnail or a main image.archiveList/categoryListIn the loop of list tags, eachitemobject may containLogo(usually referring to the main image) andThumb(Thumbnail) field, you can directly go through{{item.Logo}}or{{item.Thumb}}to call.

When you need to display multiple images on a page, such as the product detail pagegroup images, or category, single page'sBanner imageAt the same time, AnQiCMS also provides a convenient solution. For example, inarchiveDetail/categoryDetailorpageDetailTagged,Imagesfield usually returns an array of image addresses. You can simplyforLoop statement, display these pictures one by one, and layout according to design requirements. For example:

{% archiveDetail archiveImages with name="Images" %}
<div class="product-gallery">
    {% for imgUrl in archiveImages %}
        <img src="{{imgUrl}}" alt="产品图片">
    {% endfor %}
</div>

And for the website's carousel banner,bannerListThe tag can help you easily retrieve and display a set of Banner images.

Even though we only uploaded one original large image, the front end needs different thumbnail sizes to adapt to different layouts, AnQiCMS'sthumbThe filter can be put to use. You do not need to manually generate various sizes of images, just call the original image address in the template, and cooperate with|thumbThe filter, the system will automatically generate and return the corresponding thumbnail address based on the thumbnail size preset in the background, greatly reducing the burden on image processing. For example:

<img src="{{item.Logo|thumb}}" alt="{{item.Title}}的缩略图">

In addition, to further optimize the user experience and reduce the page load burden, AnQiCMS also takes into account the rendering of document content.Image lazy loading. When calling image content, it can be配合lazy="data-src"such parameters, so that the front-end image lazy loading library can identify and optimize image loading.

Summary

Through the image resource management function of AnQiCMS, the entire process from the initial batch upload and classification, to the intelligent image optimization processing on the backend, and then to the flexible and diverse template calls on the frontend, appears natural, smooth, efficient, and convenient.This allows operation personnel to easily maintain a large amount of image materials, while developers can also quickly implement various image display requirements, jointly providing website users with a better visual experience and smoother access speed.AnQiCMS truly makes image resource management no longer a burden, but a powerful tool to help with content marketing.

Frequently Asked Questions (FAQ)

1. Q: Why does my uploaded image automatically shrink or convert to WebP format? A:This is usually because you have enabled the 'Auto Compress Large Images' or 'Enable Webp Image Format' feature in the 'Background Settings' -> 'Content Settings' of the AnQiCMS backend.These features are designed to optimize image loading speed and save server storage space.If you want the image to remain unchanged, you can turn off or adjust these options in the content settings.

2. Q: How to display a set of images in a frontend template (e.g., multiple photos on a product detail page), rather than just a thumbnail or the main image? A:AnQiCMS's document, category, single page detail tags (such asarchiveDetail/categoryDetail/pageDetail) usually provide a name forImagesThe field, it returns an array of image addresses. You can render each image in the template through aforLoop through thisImagesarray, to display multiple images, thus achieving multi-image display.

3. Q: Why does the old image still display when accessed on the front end, even though I replaced it in the background? A:This could be due to browser cache or AnQiCMS system cache.You can try clearing the browser cache, or log in to the AnQiCMS backend, click the "Update Cache" button at the bottom of the left menu, clear the system cache, usually the problem can be resolved.