In website content operation, images are an indispensable element that attracts users and conveys information.Efficiently manage these image resources and be able to flexibly call them on the front page, which is crucial for improving the user experience and operational efficiency of the website.AnQiCMS provides a comprehensive and flexible solution in this aspect, making the management and calling of image resources simple and orderly.
Unified management and categorization of image resources
AnQiCMS provides a centralized management platform for website image resources, allowing you to easily upload, store, and organize all visual content.In the background management interface, through the "Page Resources" menu under the "Image Resource Management" entry, you will find an intuitive image library.
This image library not only displays all uploaded images and video resources, but more importantly, it provides powerful classification functions.You can create various custom categories based on actual operational needs, such as 'product display images', 'news illustrations', 'special theme banners', 'team photos', and so on.After creating a category, you can directly assign new uploaded images to the corresponding category, or adjust the classification of existing images on the image detail page.In addition, AnQiCMS also supports batch operations, you can select multiple images at once, perform batch deletion, or batch transfer to the specified category, which greatly improves management efficiency.
In the image detail page, you can view various detailed information of the image, including the file name, file type, upload time, file size, resolution, and most importantly, the image address (URL).It is worth mentioning that when you need to update an image, AnQiCMS allows you to perform the 'image replacement' operation.This feature is very practical because it keeps the original image URL unchanged after replacing the image, which means you do not need to modify all the code that refers to this image on the front-end page. You only need to update the image content in the background, and the front-end page will automatically display the new image, effectively avoiding link failures or front-end modifications due to image updates.
Front-end Page Invocation: Multi-scene and Flexible Display
The purpose of image resource management is to facilitate the calling and display of the front-end page.AnQiCMS provides various methods for you to flexibly display images on the website according to different scenarios.
Image Invocation in Document/Article
When editing articles, product details, news, and other content, the built-in rich text editor allows you to directly select and insert images from the image library. In addition to the images in the main content, AnQiCMS also sets a special image field for documents:
- Cover first image (
Logo) and Thumbnail (Thumb)In the document editing page, you can specify a cover image and a thumbnail for each document. These images are often used for visual presentation on list pages, such as in article lists or product lists pages.{{item.Logo}}or{{item.Thumb}}This template tag can be easily called, providing a overview of the content for users. - Gallery (
Images)If a document needs to display multiple images, such as detailed images of products from different angles, behind-the-scenes of an event, or a set of travel photos, AnQiCMS supports the "gallery display" function. You can upload multiple images during document editing and go through{% for item in archiveImages %}<img src="{{item}}" />{% endfor %}This loop tag is used to implement carousel or gallery effects on the front-end page. - Image in custom fieldAnQiCMS's content model is highly flexible.You can add custom image fields for specific content models (such as "real estate model" or "car modelThrough this method, you can provide structured management and invocation methods for images according to the unique needs of content types.
Image call in category and single page
The category pages (such as product category pages, news category pages) and single pages (such as "About UsBanner image (Images)andThumbnail (Thumb)For example, by{% categoryDetail with name="Images" %}you can get the category banner image group, used for the visual decoration at the top of the page, or by{% pageDetail with name="Thumb" %}Get the thumbnail of a single page, convenient for referencing in navigation or other blocks.
Advanced usage of template tags and filters
AnQiCMS's template system provides powerful flexibility for image calls. You can usearchiveDetail/categoryDetail/pageDetailDetails label, retrieve the image field of a specific document, category, or single page by ID or URL alias, such as{% archiveDetail with name="Logo" id="1" %}.
In the loop of the list, such asarchiveList，You can also directly access the loop variable (item) by accessing{{item.Logo}}/{{item.Thumb}}、`{{item.Images