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 content such as articles, categories, or single pages, a proper thumbnail can quickly catch the visitor's attention and guide them to click for further details.In the auto 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
Firstly, 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 ManagementHere is the place for uploading the article thumbnail.You can choose to select existing images from the image library or upload new images.An intelligent feature of Anqi CMS is that if you forget to upload a thumbnail, but the article content includes images, the system will automatically select the first image in the article body as the thumbnail for that article.This greatly reduces the burden of content publishing.
For category pagesin the "Content Management" under "Document Category" settings, as well asfor single-pageIn the "Page Resources" under "Page ManagementThese thumbnails are usually used to represent the category or single page in list pages or navigation menus. They cannot automatically extract content images like article thumbnails, and you need to upload them manually.
In addition, in the "Background Settings" -> "Content Settings", you can also upload a. "Default Thumbnail".This image acts as a backup option, automatically used by the system to fill in the placeholder for any article, category, or single page that has not set its own thumbnail. This ensures the consistency of page display and avoids blank or damaged images.
Global unified management of thumbnail size and processing method
It's 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" under "Background Settings" -> "Content Settings".
"Thumbnail processing method"Determined how the system crops and scales images when generating thumbnails:
- Scale proportionally by the longest edge:This method will maintain the original aspect ratio of the image, scaling the image to the specified size range, ensuring that the longest side matches the set size, and the other side is automatically adjusted in proportion.It can fully display the image content without any cropping.
- Pad by the longest edge:If you want all thumbnails to strictly match a certain fixed size (such as a 1:1 square), but do not want to crop the image content, then this option is very suitable.The system will resize the image proportionally to fit the specified size, and the insufficient part will be filled with a white background to center the image in a fixed-size container.
- Crop by the shortest edge:When you want to display an image completely covering the display area without any white edges, you can choose this method.The system will crop the image to center, ensuring 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 visually it will be more compact.
. Next is:. "Thumbnail Size"settings. Here, you can enter width and height values (for example,200x150），The system will generate thumbnails of the corresponding size based on the "thumbnail processing method" you select.Suggest you set a suitable size according to the website design layout, which can reduce the image size and speed up the page loading speed.
If you have modified 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"的功能。 EnglishClick this button, and the system will regenerate the thumbnail versions of all 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, etc. Although these are not directly controlling the thumbnail size, they are closely related to image optimization, and turning them on can further improve the image loading performance of your website.
The thumbnail call and size control in the front-end template
Calling thumbnails in the front-end template of Anqi CMS is very intuitive, mainly completed by specific fields of the content object.
- Article thumbnail:You can use
{{archive.Thumb}}Call the thumbnail set for the article. If the article has uploaded multiple images or requires a large image,{{archive.Logo}}it will usually return the first image or the largest size image,{{archive.Images}}This is an image array, suitable for displaying the article album. - Category Thumbnail:Similarly,
{{category.Thumb}}Used to call the category thumbnail,{{category.Logo}}or{{category.Images}}which can be used to call the category Banner image or group image. - Single Page Thumbnail:A single-page thumbnail call method is similar to categories, using
{{page.Thumb}}. If there is a Banner set for a single page, it can also be accessed through{{page.Logo}}or{{page.Images}}to get.
These variables return the image address. You can use it in HTML.<img>tags to display them:
<img src="{{item.Thumb}}" alt="{{item.Title}}" />
The most 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 smaller thumbnails, while the related recommendation area on the detail page may require a slightly larger size.thumbThe filter comes into play.
thumbThe filter allows you to specify the output size of any image in real-time within the template.It receives an image URL as input and dynamically generates and returns a thumbnail URL of the corresponding size based on the dimensions you provide.
The method of use 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'This is the width and height you expect the thumbnail to be.The system will generate the image based on this size and combine it with the thumbnail processing method configured in the "Content Settings" on the backend.800x600but throughthumbfilters, you can still output them in the template100x80/300x200Custom thumbnail sizes are available without the need to pre-generate all possible dimensions, which is very convenient and efficient.
Through 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 expression, user experience, and performance optimization.
Common Questions (FAQ)
1. I uploaded the thumbnail for the article in the background, why is it not displayed on the front page?
There could be several reasons:
- The template is called incorrectly:Please check your front-end template to confirm that you have used the correct tags (for example
{{archive.Thumb}}) to call the thumbnail. Sometimes, the template may call{{archive.Logo}}or{{archive.Images}}These may return the original image or image set, rather than the thumbnail field you uploaded. - Cache issue:Try clearing the browser cache or system cache. Sometimes, new image links may not be updated in time due to caching.
- Image path issue:Ensure that the image has been successfully uploaded and the image address is accessible in the browser.
2. I modified the 'Content Settings' section's 'Thumbnail Size' and 'Processing Method', but the existing thumbnail sizes on the website did not change immediately. Why is that?
Global thumbnail size and processing settings, 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."Batch regenerate thumbnails"Button. The system will process all images once according to the latest configuration.
3. Will the images uploaded in the article content editor also be affected by the 'Thumbnail size' setting in 'Content Settings'?
Generally speaking, the 'Thumbnail size' setting in 'Content Settings'