Manage website content in AnQiCMS, thumbnails are undoubtedly an important element to enhance user experience and page attractiveness.Whether it is an article that attracts users to click or a detail page that showcases product features, a proper thumbnail can play a huge role.The auto translation of 'auto' to 'English' is not required as the value provided does not contain the word 'auto'. The original JSON array format is maintained as follows:
Next, we will together learn how to master thumbnails in AnQiCMS, from uploading to the final display, every step is clear and straightforward.
一、In the background, add thumbnails to articles and products
Adding a thumbnail to an article or product is a simple and direct process.When we click on 'Add document' or edit an existing document in the background 'Content Management', we will see the option 'Document Image'.
- Upload manually or select an imageHere, you can directly upload a local image as a thumbnail, or select a previously uploaded image from the 'Image Library'.It is crucial to select a clear, relevant image.
- System automatically extracts
In addition to articles and products, AnQiCMS's 'Document Category' and 'Page Management' (such as single pages like 'About Us') also support adding thumbnails.These thumbnails are typically used in category list pages or header areas of single pages, to enhance the visual effects or as navigation identifiers.Operation method is similar to articles and product thumbnails, you can find the 'Thumbnail' or 'Banner image' option in the corresponding editing interface.
二、Fine control the global processing style of thumbnails
The display of thumbnails is not as simple as uploading, AnQiCMS provides powerful global control options under 'Background Settings' > 'Content Settings', which determines how the system processes and optimizes the uploaded thumbnails after they are uploaded, directly affecting their final display effects on the front-end.
Here, you can adjust the following key settings:
- Thumbnail processing method: This is the core style control. AnQiCMS provides three flexible ways to meet different design requirements:
- Scale proportionally by the longest sideThis method will maintain the original aspect ratio of the image, resizing the longest side to the specified dimensions, and the other side will be automatically adjusted proportionally.It ensures that the image content is displayed completely, but the actual size may fluctuate.
- Scale proportionally by the longest side with paddingIf you want all thumbnails to maintain strictly consistent width and height dimensions while displaying the entire image content, 'Fill to the longest edge' is the ideal choice.The system will resize the image proportionally to the longest side, fill the不足part with white (or other preset colors) to center the image, achieving a unified visual effect.
- [en] : Crop to the shortest edge.This method is suitable for thumbnails that require a fixed size and can accept some of the image edges being cropped.The system will use the center of the image as the baseline, scale the shortest side to the specified size, and crop off the excess part of the longest side to ensure that the thumbnail fills the entire area.
- Thumbnail sizeYou can set the most suitable thumbnail width and height according to the design of the front-end template.Setting the size reasonably can effectively reduce the image size, speed up page loading, and improve user experience.
- Default ThumbnailWhen a document does not have an uploaded dedicated thumbnail or the system fails to extract an image from the content, you can set a 'default thumbnail' as a placeholder.This helps maintain visual consistency on the website, avoiding blank images.
- Batch regenerate thumbnailsWhen you modify the thumbnail processing method or size mentioned above, you may need to regenerate all the old thumbnails according to the new rules.AnQiCMS provides the "Batch Regenerate Thumbnails" feature, one-click operation can update the thumbnails of the entire site, very convenient.
These background settings provide us with the ability to uniformly manage the appearance of website thumbnails without manually adjusting each time an upload is made.
III. Display thumbnails flexibly in the frontend template
In AnQiCMS, the front-end template uses syntax similar to the Django template engine, calling backend data through specific tags.To display thumbnails on the website, we need to use the corresponding tags in the template file.
通常，template files are located/templatein the directory, static resources (CSS, JS, images) are in/public/static/the directory. Data variables use{{变量名}}logic control such as conditional judgment and loop use{% 标签 %}.
1. In the article/product detail page, show thumbnails.
On the article or product detail page, we can usearchiveDetailtags to obtain detailed information about the current document, including thumbnails.
Call document thumbnail (Thumb):
{% archiveDetail with name="Thumb" %}Or, if you have already assigned the current document details toarchiveVariable (usually provided automatically on the detail page), you can use it directly:<img src="{{archive.Thumb}}" alt="{{archive.Title}}" />ThumbIt usually refers to the thumbnail processed by the system based on the backend settings.It refers to the cover logo image of the document.In some cases, you may need to display more original or larger images as the main image, rather than scaled or cropped thumbnails.
{% archiveDetail with name="Logo" %}or:<img src="{{archive.Logo}}" alt="{{archive.Title}}" />Logo通常指文档的原始封面图或主图。
2. In the list page, display thumbnails.
In the article list page, product list page, or related recommendation list, we usually need to traverse multiple documents and display their thumbnails. This can be achieved byarchiveListTag combinationforlooping.
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
{% if item.Thumb %}
<img alt="{{item.Title}}" src="{{item.Thumb}}">
{% endif %}
<div>{{item.Description}}</div>
</a>
</li>
{% empty %}
<li>暂无内容</li>
{% endfor %}
{% endarchiveList %}
In this example,{{item.Thumb}}It will display the thumbnail of each article or product. We also{% if item.Thumb %}have made a judgment to ensure that the image tag is displayed only when the thumbnail exists, to avoid displaying incorrect image links on the page.
3. In categories and single pages, display thumbnails or Banner images
The category page and single page also have their own thumbnails or Banner images, which can be used to enrich the visual effects of the page.
- Category thumbnail (Thumb):
{% categoryDetail with name="Thumb" %}or, if the page providescategoryVariable:<img src="{{category.Thumb}}" alt="{{category.Title}}" />