How is the `images` field (document group image) stored and parsed in the document details?

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

The storage mechanism of document group images

First, when we obtain the document details through the AnQiCMS interface (such as calling/api/archive/detailinterface) at the time, the returned data will contain a field namedimagesThe field is explicitly annotated with the typestring[]This indicates that it is a string array, where each string represents the complete access address (URL) of an image.

This means that AnQiCMS does not store the image files themselves 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, and images can be stored centrally on CDN or other file services, thereby optimizing loading speed and management efficiency.

It is especially worth mentioning that in most cases, the main image or thumbnail (correspondinglogoandthumbfield) is thisimagesThe first image in the array. When AnQiCMS processes internally, it intelligently selects the first image in the group image array as the visual identifier for the document, used for list display or other places where a single image is needed.

the addition and management of the group image

How are these groups of images added to the document? When we publish the document interface/api/archive/publish), or import the document interface/api/import/archive, the same is used to create or update contentimagesThis 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"]Such a structure. AnQiCMS is designed to allow us to set up to 9 group images for each document, and the first image in the array is automatically recognized by the system as the cover image or main image of the document, as we can see when we get the document details.

Where do these image URLs come from? They are usually obtained through the attachment upload interface (/api/attachment/upload) after uploading and become permanent links. The attachment upload interface returns thelogo(original image link) andthumb(Thumbnail link), we can choose to use any one of them as the member link of 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 image.

The analysis of a group image and front-end display

When displaying on the front end, obtain the document detailsimagesAfter the field, we get an array containing multiple image URLs.Front-end developers can easily iterate through this array, render each image onto the page, and thus build beautiful image galleries, sliders, or waterfall effects and more visual presentations.

For example, on a product detail page,imagesThe images in the array can constitute a product album, where users can swipe left and right or click to view a larger image.And on an article detail page, these group photos can serve as a supplement to the article content, enhancing visual appeal.This design not only makes it convenient for content creators to manage multiple images, but also provides great flexibility for front-end developers, who 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.

Frequently Asked Questions (FAQ)

1. Question: If my document only has one image,imagesWhat will the field be in form?Answer: Even if the document only has one image,imagesthe field will still 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. Question:images/logoandthumbWhat are the differences and relationships between these fields?Answer:imagesis an array of strings that contains all the group image URLs in the document. Andlogoandthumbis a single string representing the original and thumbnail image URLs of the document. Usuallylogoandthumbthe images are sourced fromimagesThe first image in the array.imagesUsed to display a multi-image scene, whilelogoandthumbIt is more commonly used on list pages, sharing thumbnails, or as the main visual identifier for documents.

3. Question: How can I ensure that the images I uploadimagesThe order in the array?Answer: When you submit through the publish interfaceimagesthe field, the order of the image URL is the same as its order in the array. For example, when you submitimages: ['url1', 'url2', 'url3']Then when retrieving document details, returned theimagesThe 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 submitted, and the first URL will also be recognized aslogoandthumbsource.