When using AnQiCMS to manage website content, images are undoubtedly an important element to enhance the attractiveness of the content, especially when we want to add a series of related images to a document. The group photo feature becomes particularly crucial in this case. So, in the document details of AnQiCMS, these group photos (i.e., imagesHow is the field stored and parsed? Understanding this will help us better utilize AnQiCMS for content creation and display.

Document group image storage mechanism

Firstly, when we get the document details through the AnQiCMS interface (such as calling/api/archive/detailinterface), the returned data will contain a field namedimagesThis field indicates. This field's type is explicitly marked asstring[]. This indicates it is a string array, where each string represents a full access address (URL) for an image.

This means that AnQiCMS does not store the image file itself in the document records, but stores the links to these images.This design is very flexible, it decouples the management of image resources from document content, allowing images to be centrally stored on CDNs or other file services, thereby optimizing loading speed and management efficiency.

It is also worth mentioning that, in most cases, the main image or thumbnail (correspondinglogoandthumbfield) is thisimagesThe first image in the array.AnQiCMS handles internally by intelligently selecting the first image in the group image array as the visual identifier for the document, used for list display or other places that require a single image.

group image addition and management

How are these groups of images added to the document? When we go through the document publication interface (/api/archive/publish), or import document interface (/api/import/archive), we also use it to create or update content.imagesThis field.

At this time, we need to pass the pre-uploaded image links as a string array toimagesfield. For example, we can provide["https://en.anqicms.com/uploads/arc1.png", "https://en.anqicms.com/uploads/arc2.png"]

Where do these image URLs come from? They are usually obtained through the attachment upload interface (/api/attachment/upload). The permanent link obtained after uploading is. The attachment upload interface will return the image'slogo(original link) andthumb[Thumbnail link], we can choose any one of them as the member link for the group image.This separates the handling of image files and document data, making image management more flexible and efficient. You can upload images first and then integrate the links into the document group.

The analysis and front-end display of a collage

When displaying on the front end, obtaining the document details ofimagesAfter the field, we get an array containing multiple image URLs.Front-end developers can easily traverse this array, rendering each image to the page to build exquisite image galleries, sliders, or waterfall effects and more visual display effects.

For example, on a product detail page,imagesThe images in the array can form a product album, where users can swipe left or right or click to view the full image.In an article detail page, these groups of pictures can serve as a supplement to the article content, enhancing visual appeal.This design not only allows content creators to conveniently manage multiple images, but also provides great flexibility for front-end developers. They can flexibly call and display these images according to different page layouts and design requirements, without concerning about the specific storage details of the image files.

Common Questions (FAQ)

  1. Question: If my document only has one image,imagesWhat will the field take the form of?Answer: Even if the document contains only one image,imagesthe field will return a string array containing a single URL. For example,["https://example.com/single_image.jpg"]at the same time,logoandthumbThe field usually points to this unique image URL for direct reference.

  2. Q:images/logoandthumbWhat are the differences and relationships between these three fields?Answer:imagesis a string array that contains all the group image URLs of the document.logoandthumbis a single string representing the original and thumbnail image URLs of the document. Usually,logoandthumbimages come fromimagesThe first picture in the array.imagesUsed to display multiple image scenes.logoandthumbIt is more commonly used on list pages, share thumbnails, or as the main visual identifier for documents.

  3. Q: How can I ensure that the images I uploadimagesWhat is the order in the array?Answer: When you submit through the publish interfaceimagesthe order of the image URL is the same as its order in the array. For example, when you submitimages: ['url1', 'url2', 'url3']Then, when obtaining document details, the returnedimagesThe array will also be in this order. Therefore, you can control the display order of the group image by adjusting the order of the URLs in the submitted array, with the first URL also being recognized aslogoandthumbthe source.