In website operation, images are not only an important part of content attractiveness, but also a key factor affecting page loading speed and user experience.Especially for articles, categories, or single-page content, a suitable thumbnail can quickly catch the visitor's attention and guide them to click for further exploration.In AnQi CMS, setting and calling these thumbnails, and flexibly controlling their display size is actually simpler and more efficient than imagined.
Easily manage thumbnails in the background: upload and intelligent extraction
First, let's understand how to set thumbnails for your content in the Anqi CMS backend.
For article contentWhen you edit or publish a new article under the "Content Management" module, you will see a "Document Image" area.This is where you upload the article thumbnail. You can select an existing image from the image library, or upload a new one.Aqiq CMS is very intelligent in that if you forget to upload a thumbnail, but the article content contains images, the system will automatically select the first image in the article body as the thumbnail for the article.This greatly reduces the burden of content publishing.
For category pagesIn the "Content Management" under the "Document Category" settings, as well asFor a single pageIn the "Page Resources" under "Page Management", you will also find the "thumbnail" settings options.These thumbnails are usually used to represent the category or single page in the list page or navigation menu, they are not like the article thumbnails that can automatically extract the content image, and need to be uploaded manually.
In addition, you can also upload an image in the "Background Settings" -> "Content Settings"."Default thumbnail". This image acts as a backup solution, automatically used by the system to fill in the default image when any article, category, or single page does not have its own thumbnail set, ensuring the consistency of page display and avoiding blank or damaged images.
Unified management of thumbnail size and processing method
It is not enough to just upload images, in order for your website to have good visual effects and loading performance on different devices, Anqi CMS provides a powerful global thumbnail processing mechanism.
You can find the options for "Thumbnail processing method" and "Thumbnail size" in the "Background Settings" -> "Content Settings".
“Thumbnail processing method”Decided how the system crops and scales images when generating thumbnails:
- Scale proportionally to the longest side:This method maintains the original aspect ratio of the image, resizing it within the specified dimensions, ensuring that the longest side matches the set size, and the other side adjusts automatically in proportion.It can display the image content completely without any cropping.
- Pad to the longest edge:If you want all thumbnails to strictly match a fixed size (such as a 1:1 square), and you don't want to crop the image content, then this option is very suitable.The system will resize the image proportionally to fit the specified size, filling the insufficient part with a white background to center the image in a fixed-size container.
- Trim to the shortest edge:When you want to achieve the full coverage of the image within the display area without any white edges, you can choose this method.The system will crop the image centrally to ensure that the shortest side matches the set size, and the excess on the longest side will be cropped off.This means that some of the content at the edges of the image may be lost, but it will be visually more compact.
Then is“Thumbnail size”settings. Here, you can enter a width and height value (such as200x150)，The system will generate thumbnails of the corresponding size based on the thumbnail processing method you choose.Suggest that you set a suitable size according to the website design layout, which can reduce the size of the picture and speed up the page loading speed.
If you modify these global settings and find that the thumbnails on the front-end page do not update immediately, don't worry, the system provides a“Batch regenerate thumbnails”The function. Click this button, the system will regenerate all thumbnail versions of the uploaded images according to the new settings, ensuring that your website always displays the latest and optimized image sizes.
It is worth mentioning that there are options such as "whether to enable Webp image format" and "whether to automatically compress large images" in the content settings. Although these do not directly control the size of thumbnails, they are closely related to image optimization, and turning them on can further improve the image loading performance of your website.
Thumbnail call and size control in the front-end template
Thumbnail calls in the front-end template of Anqi CMS are very intuitive, mainly completed through specific fields of the content object.
- Article thumbnail:You can use it to
{{archive.Thumb}}To call the thumbnail image set for the article. If the article has uploaded multiple images or there is a need for a large image,{{archive.Logo}}it usually returns the first image or a larger sized image, and{{archive.Images}}This is an image array, suitable for displaying the article album. - Category thumbnail:Similarly,
{{category.Thumb}}Used to call the category thumbnail, while{{category.Logo}}or{{category.Images}}Can be used to call the category Banner image or group image. - Single page thumbnail:The thumbnail call method for a single page is similar to categories, using
{{page.Thumb}}. If the single page has a set Banner, it can also be accessed through{{page.Logo}}or{{page.Images}}Get it.
These variables return image addresses. You can use tags in HTML to display them:<img>to display them:
<img src="{{item.Thumb}}" alt="{{item.Title}}" />
Flexible size control:thumbFilter
Although the background can set the global thumbnail size, in actual template development, we often need to display thumbnails of different sizes in different scenarios.For example, the list page may require small thumbnails, while the related recommendation area on the detail page may require a slightly larger size.This is, the Anqi CMS'sthumbThe filter comes into play.
thumbThe filter allows you to specify the output size of any image in real time within the template.It accepts a picture URL as input and dynamically generates and returns a thumbnail URL with the provided size parameters.
The usage is very simple:
<img src="{{item.Logo|thumb:'100x80'}}" alt="{{item.Title}}" />
<img src="{{category.Thumb|thumb:'300x200'}}" alt="{{category.Title}}" />
<img src="{{page.Logo|thumb:'640x360'}}" alt="{{page.Title}}" />
In this example,'100x80'/'300x200'/'640x360'It is the width and height of the thumbnail you want to generate. The system will generate the image based on this size, combined with the thumbnail processing method configured in the background "Content Settings".This means, even if you set the global size in the background800x600, but throughthumbfilters, you can still output in the template.100x80/300x200Custom thumbnail sizes without needing to pre-generate all possible sizes, very convenient and efficient.
With these features, Anqi CMS provides you with a full-link thumbnail management solution from image upload, global size configuration to flexible front-end calls, helping your website find the perfect balance between visual performance, user experience, and performance optimization.
Frequently Asked Questions (FAQ)
1. I uploaded the thumbnail for the article in the background, why is it not displayed on the front page?
There are several possible reasons:
- The template call is incorrect: Please check your front-end template to confirm that you are using the correct tags (such as
{{archive.Thumb}}) to call the thumbnails. Sometimes, the template may call{{archive.Logo}}or{{archive.Images}}These may return the original image or album, not the thumbnail field you uploaded. - Cache problem:Try clearing the browser cache or system cache, sometimes new image links may not be updated in time due to caching.
- Image path issue: Make sure the image has been successfully uploaded and the image address is accessible in the browser.
2. I modified the "Thumbnail Size" and "Processing Method" in the "Content Settings", but the existing thumbnail size on the website did not change immediately, why is that?
The global thumbnail size and processing settings are usually only effective for *newly uploaded* images or after you manually trigger a *regenerate* operation.For existing thumbnails, they are generated based on the previous settings.If you want all existing thumbnails to apply new size and processing methods, you need to click on the "Background Settings" -> "Content Settings" page.“Batch regenerate thumbnails”Button. The system will process all images once according to the latest configuration.
3. The image uploaded in the article content editor, will it also be affected by the 'Thumbnail Size' in the 'Content Settings'?
Generally speaking, the 'Thumbnail Size' in the 'Content Settings'