Managing website content in AnQiCMS, thumbnails are undoubtedly an important element in enhancing user experience and page attractiveness.No matter whether it is an article to attract users to click or a product detail page to showcase product features, a suitable thumbnail can play a huge role.What is even better is that AnQiCMS provides an intuitive backend operation and flexible template tags, allowing us to easily add thumbnails to articles and products, and finely control their display styles on the front end.
Next, we will together learn how to play with thumbnails in AnQiCMS, from upload to final display, every step is clear and straightforward.
One, add thumbnails for articles and products in the background
To add 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 or select images manuallyIn here, you can directly upload a local image as a thumbnail or select an image you have uploaded before from the 'Image Library'.It is crucial to select a clear, relevant image.
- System automatically extracts: AnQiCMS is very intelligent. If you do not manually upload or select a thumbnail when publishing documents, but the article content contains images, the system will automatically extract the first image in the content as the thumbnail for this document.This saves a lot of repeated operations.
In addition to articles and products, AnQiCMS also supports adding thumbnails to 'Document Classification' and 'Page Management' (such as single pages like 'About Us').These thumbnails are usually used in category list pages or the header area of single pages to enhance the visual effects or as navigation identifiers.The operation method is similar to that of article and product thumbnails, you can find the 'Thumbnail' or 'Banner Image' option in the corresponding editing interface.
Two, finely control the global processing style of thumbnails
The display of thumbnails is not just a simple upload, AnQiCMS provides powerful global control options under "Background Settings" and "Content Settings", which determine how the system processes and optimizes the uploaded thumbnails after upload, which directly affects their final display effect on the front end.
Here, you can adjust several key settings:
- Thumbnail Processing Method: This is the core style control. AnQiCMS provides three flexible approaches to meet different design needs:
- Scale proportionally to the longest sideThis method maintains the original aspect ratio of the image, scaling the longest side to the specified size, and the other side adjusts automatically in proportion.It ensures that the image content is displayed completely, but the actual size may fluctuate.
- Fill the longest sideIf you want all thumbnails to maintain strict uniform dimensions while also 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, filling the insufficient part with white (or other preset colors) to center the image and achieve a unified visual effect.
- Trim according to the shortest edgeThis method is suitable for thumbnails that require a fixed size and can accept the cropping of part of the image edges.The system will use the center of the image as a reference, resize the shortest edge to the specified size, and crop off the part of the longest edge that exceeds, ensuring 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 enhance the user experience.
- Default thumbnailWhen a document does not have an uploaded thumbnail or the system fails to extract an image from the content, you can set a default thumbnail as a placeholder.This helps maintain the visual consistency of the website and avoid blank images.
- batch regenerate thumbnails: After you have modified the thumbnail processing method or size, you may need to regenerate all 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 backend settings provide us with the ability to统一 manage the appearance of website thumbnails, without needing to manually adjust each time a upload is made.
3. Flexibly display thumbnails in the front-end template.
In AnQiCMS, the front-end template uses syntax similar to the Django template engine, calling back-end data through specific tags.We need to use the corresponding tag in the template file to display the thumbnail on the website.
Generally, template files are located/templateUnder the directory, static resources (CSS, JS, images) are/public/static/in the directory. Data variables are used{{变量名}}for logical control such as conditional judgments and loops{% 标签 %}.
1. Display thumbnails on the article/product detail page
On the article or product detail page, we can accessarchiveDetailtags to get the detailed information of the current document, including thumbnails.
Call the document thumbnail (Thumb):
{% archiveDetail with name="Thumb" %}Or if you have assigned the current document details toarchivea variable (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 according to the background settings.Call the document cover logo (Logo)In some cases, you may need to display a more original or larger image as the main image instead of a scaled or cropped thumbnail.
{% archiveDetail with name="Logo" %}Or:<img src="{{archive.Logo}}" alt="{{archive.Title}}" />LogoThe original cover image or main image of the document usually refers to.
2. Thumbnails are displayed on the list page.
On article list pages, product list pages, or related recommendation lists, we usually need to iterate through multiple documents and display their thumbnails. This can be done byarchiveListLabel combinationforcycles to achieve.
{% 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}}The thumbnail of each article or product will be displayed. We also{% if item.Thumb %}have made a judgment to ensure that the image tag is displayed only when the thumbnail exists, to avoid incorrect image links on the page.
3. Display thumbnails or Banner images in categories and single pages
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 providedcategoryVariable:<img src="{{category.Thumb}}" alt="{{category.Title}}" />