How to set a thumbnail for an article and control its display size and method on different list pages or detail pages?

In website content operation, the article thumbnail plays a vital role.It is not only the 'face' of the article content, attracting visitors to click, but also effectively improves the overall beauty and user experience of the page.AnQiCMS provides a complete and flexible set of features that help us easily set thumbnails for articles and finely control their display size and method according to different scenarios.

1. Set the thumbnail for the article

Adding a thumbnail to an article is an important step in the content publishing process.In the AnQiCMS backend, when you enter the 'Content Management' under the 'Publish Document' interface, you can find the relevant options.Generally, there is a special 'Document Image' area in the form for editing article content.Here, you can choose to select a suitable image from the uploaded 'image resources' library or directly upload a new image.This way, you can precisely control the visual presentation of each article, ensuring it attracts the target audience to the fullest.

It is worth mentioning that AnQiCMS also has an intelligent processing mechanism.Even if you do not manually upload or select a thumbnail when publishing an article, as long as the article content contains images, the system will automatically extract the first image in the article as the thumbnail.This feature is especially useful for quickly publishing content, greatly reducing the workload of content editors.Of course, for important articles, we still recommend manually uploading selected thumbnails and accompanying meaningful image ALT tags to ensure their visual appeal and optimize search engine crawling.

Fine-tuning thumbnail display

How to set up thumbnails and display them in different areas of the website (such as article list pages, detail pages, recommendation positions, etc.), AnQiCMS also provides powerful control capabilities.This is mainly reflected in the global settings of the background and the flexible invocation of the front-end template.

First, in the "Content Settings" on the back end, you can find the global configuration options for thumbnails. Here you can统一 manage the size and cropping methods of all article thumbnails:

• Thumbnail size:You can set a uniform thumbnail width and height according to the needs of the website front-end design, for example, you can set it to 200x150 pixels.Setting the size appropriately can effectively reduce the file size of images, thereby speeding up page loading and improving the user browsing experience.
• Thumbnail processing method:AnQiCMS provides three mainstream processing methods to meet different visual needs:
  • Scale proportionally to the longest side:This method will display all the content of the image and, according to the set size, will proportionally scale the longest side (width or height) of the image, and the other side will adapt automatically.This is suitable for scenarios where it is desired to fully display the image content but not strictly consistent with the size.
  • Pad to the longest edge:If you want all thumbnails to maintain strictly consistent dimensions (such as uniform image height on the list page), but do not want to crop the image content, you can choose this method.The image will be centered, and any parts that are too small will be filled with white or other background colors to reach the specified size.
  • Trim to the shortest edge:This method crops the image based on the center, ensuring that the shortest edge is fully displayed, while the longest edge may be cropped to perfectly fill the preset size.This is suitable for scenarios where the focus is on the content of the image and there is a high requirement for consistency in size, such as product lists.
• Default thumbnail: To avoid some