In the era where content is king, images act as an important carrier for information transmission, and their management and call efficiency directly affect the user experience and operational 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 backend operations, but also makes the image resources shine on the frontend through intelligent image processing and rich template tags.
Establish a comprehensive image library: from batch upload to detailed classification
The richness of website content is inseparable from a large number of images, and how to organize these materials efficiently is the primary task of image management.AnQiCMS's 'Page Resources' module under '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 performCategorize management.You can create different categories based on content type, items, purposes, etc., such as "Product DisplayThis 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, which saves the麻烦 of uploading one image at a time. After the image is uploaded, you can easilyin bulkTransfer to the preset category, greatly improves the efficiency of initial organization.Of course, for the images uploaded, you can view their details at any time, including the filename, file type, upload time, file size, image resolution, and access address, among other key information.replace imagesIt can be maintained conveniently, while its URL address remains unchanged. Unwanted images can also be deleted conveniently, keeping the image library tidy.
Optimize image resources: Speed up front-end loading and ensure quality
After the image is uploaded and categorized, AnQiCMS also 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 frontend display requirements.
Firstly, you can choose whetherdownload remote images.If your content references images from external links, enabling this feature can pull them to the local server uniformly, which is convenient for centralized management and CDN acceleration.Enable WebP image format。Once enabled, all uploaded JPG, PNG, and other image files will be automatically converted to WebP format. AnQiCMS also providesWebP conversion toolPerform batch conversion.
In addition,Automatic compression of large imagesFunction can ensure that the uploaded image will not slow down the page loading due to its large size.You can set a maximum width, for example, 800 pixels. The system will automatically resize images that exceed this width in proportion.Scale proportionally by the longest side/Scale proportionally by the longest side with paddingand[en] : Crop to the shortest edge.Three processing methods, allowing you to choose the most suitable thumbnail style and size according to the frontend design. If you need to adjust the thumbnail size later,Batch regenerate thumbnailsThe function can one-click update the thumbnails of all site images.
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, it can achieve image performance optimization and standardized processing.
Flexible and diverse front-end calls: make images vivid
AnQiCMS's template engine provides powerful tags and filters, making it extremely flexible to call image resources on the front end.
InContent EditingWhen, AnQiCMS's rich text editor supports inserting uploaded images directly from the 'image library' into articles, product descriptions, and other content, with what you see is what you get, and convenient operations.
ForList pageandDetails page, images are usually presented in the form of thumbnails or featured images in.archiveList/categoryListIn the loop of list tags such as,itemeach object may containLogo(usually refers to the featured image) andThumbThumbnail field, you can directly access{{item.Logo}}or{{item.Thumb}}to call it.
When you need to display multiple images on a page, such asgallery, or category, single page'sBanner imageWhen, AnQiCMS also provides a convenient solution. For example,archiveDetail/categoryDetailorpageDetailin the tag,Imagesfield usually returns an array of image addresses. You can use simpleforLoop statements, display these images one by one, and lay them out according to the 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,bannerListLabels can help you easily retrieve and display a set of Banner images.
Even if we only uploaded one original large image, but the front-end needs different sizes of thumbnails to adapt to different layouts, AnQiCMS'sthumbThe filter can be put to use. You do not need to manually generate images of various sizes, just call the original image address in the template, and cooperate with|thumbThe system will automatically generate and return the corresponding thumbnail address based on the thumbnail size preset in the background, greatly reducing the burden of image processing. For example:
<img src="{{item.Logo|thumb}}" alt="{{item.Title}}的缩略图">
In addition, in order to further optimize the user experience and reduce the page loading burden, AnQiCMS also considers it during the rendering of document content.EnglishWhen calling image content, it can be配合lazy="data-src"Such parameters allow the front-end image lazy loading library to recognize and optimize image loading.
Summary
Through the image resource management function of AnQiCMS, the entire process from initial batch upload and categorization, to intelligent image optimization processing in the background, and finally to flexible and diverse template calls on the front-end, all appear to be natural, smooth, efficient, and convenient.This enables operators to easily maintain a large number of image materials, and developers can also quickly implement various image display requirements, jointly providing website users with a better visual experience and faster access speed.AnQiCMS truly makes image resource management a powerful tool that no longer burdens content marketing.
Common Questions (FAQ)
Q: Why do the images I upload automatically shrink or convert to WebP format? A:This is usually because you have enabled the 'Automatic compression of large images' or 'Enable Webp image format' feature under 'Content Settings' in the 'Background Settings' of AnQiCMS.These features are designed to optimize image loading speed and save server storage space.If you want to keep the image unchanged, you can turn off or adjust these options in the content settings.
Q: How to display a group of images (such as multiple photos on a product detail page) on the front-end template, instead of just showing a thumbnail or the first image? A:AnQiCMS's document, category, single page detail tags (such as
archiveDetail/categoryDetail/pageDetail) usually provide a name ofImagesThe field, it returns an array of image addresses. You can render each image in the template to achieve a multi-image display.forLoop through thisImagesarray, and render each image to achieve a multi-image display.Q: Why do I still see the old image when accessing it from the front end, even though I replaced the image in the background? A:This may 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-hand menu, clean up the system cache, and the problem is usually resolved.