As a website content expert who deeply understands the operation of security CMS, I know that images, especially thumbnails, play a crucial role in attracting users, optimizing layout, and enhancing the overall website experience.A well-crafted thumbnail can not only beautify the page but also effectively convey the content theme, even influence the page loading speed and search engine optimization.In AnQiCMS, we provide a set of intuitive and powerful thumbnail settings that allow website operators to create the most suitable visual effects for their website layout according to their own needs.

Core Configuration: Adjust thumbnail size and processing method

In AnQiCMS, the core configuration of thumbnails is concentrated in the 'Content Settings' module under 'Background Settings'.This is the unified entry point you define for generating website thumbnails.Here, we can precisely control the thumbnail size and processing method to ensure that every automatically generated thumbnail meets the visual standards of the website.

Firstly, you will see the 'thumbnail processing method' option, AnQiCMS provides three mainstream processing logic to meet different visual needs:

  • Scale proportionally by the longest sideThis method will preserve the original aspect ratio of the image and scale it proportionally based on the longer side.The thumbnail generated will have one side of its width or height matching the size you set, and the other side adjusted proportionally.The advantage of this method is that the image content is complete and intact, but if the original image ratio is significantly different from the target size, it may cause the thumbnail to not be fully filled in or leave blank space in a fixed-size container.
  • Scale proportionally by the longest side with padding：If you need a fixed-size thumbnail and want the image content to be displayed completely, 'Pad to longest edge' is an ideal choice.The system will first resize the image proportionally so that the longest side fits the target size, then, to achieve the fixed width and height you set, white (or other background color) borders will be added to the sides or top and bottom of the image to fill it.This ensures that all thumbnail sizes are uniform and the content is not cropped.
  • [en] : Crop to the shortest edge.For those who pursue visual impact and hope that thumbnails can be seamlessly filled into a fixed container, 'Crop to the shortest side' is a commonly used method.The system will crop the image based on the shorter edge, center the image, and cut off the longer edge that exceeds the target size.This method ensures that the thumbnail fits the fixed size perfectly, but at the cost of potentially cropping the edges of the original image.When selecting this method, it is necessary to ensure that the key information of the original image is located in the central area.

The setting of 'thumbnail size' follows.Here you can enter the desired width and height, for example, "200x150".This size should match the actual container size of the thumbnails displayed on your website's front-end page.The precise size settings can not only ensure visual consistency but also effectively reduce the file size of images, thereby speeding up page loading speed and improving user experience and SEO-friendliness.

In addition, the "Default Thumbnail" feature provides a fallback solution for your website content.You can upload a generic default thumbnail.When a document, category, or single page does not have an explicitly uploaded thumbnail and no extractable images are found in the content, the system will automatically display this default thumbnail.This is very helpful for maintaining the visual consistency of the website and avoiding the embarrassment of missing images.

If you have modified the thumbnail size or processing method and want these new rules to apply to all existing content, AnQiCMS provides the 'Batch regenerate thumbnails' feature.With this convenient tool, you can one-click regenerate thumbnails for all uploaded images according to the latest settings, saving the trouble of manual processing.

Thumbnail processing in content management

In AnQiCMS content management process, the thumbnail settings are also integrated into daily operations:

  • Documentation (articles, products, etc.)Logo(usually refers to the cover image, which may be the original image or a large-sized image) orThumbShow a thumbnail generated according to the size defined in the content settings.
  • CategoryIn creating or editing 'Document Category', you can optionally upload a category thumbnail. This is very useful for displaying the visual identifier of the category in the category list or special topic page.
  • single pageFor single pages in "page managementThis helps to present the single page in a more attractive way in the navigation menu or related page modules.

Template call: Display thumbnail on the front end

When you display content in the AnQiCMS template, the system has already prepared the thumbnail according to your backend settings. You just need toarchiveList/archiveDetail/categoryList/categoryDetail/pageList/pageDetailaccess{{item.Thumb}}or{{item.Logo}}Properties, such as the specific size and scene you want to display, can output the corresponding thumbnail path to the front-end page.CSS style and frontend layout will determine the final presentation of these thumbnails.

Through the comprehensive setting and management process, AnQiCMS empowers website operators to easily achieve fine-grained control over thumbnails, ensuring that the website can achieve **status in terms of visual presentation, loading performance, and user experience.

Common Questions and Answers (FAQ)

Q1: I set the thumbnail size, but the image on the front-end still looks unclear or cropped, why is that?

This usually relates to the 'Thumbnail processing method' you selected and the quality of the original image.If you choose 'Trim by shortest edge', the edges of the image may be cut off.If the original image resolution is low, even a thumbnail of the set size may appear blurry in some display environments.Suggest checking the resolution of the original image to ensure it is sufficient high, and re-evaluate whether the 'thumbnail processing method' is appropriate according to your layout requirements.

Q2: I did not manually upload thumbnails for all content, how will AnQiCMS handle it?

AnQiCMS provides an intelligent solution when handling content without explicitly uploaded thumbnails.Firstly, the system will attempt to extract and generate a thumbnail from the first image in your document content.If there are no images in the content either, AnQiCMS will use the 'default thumbnail' preset in the 'content settings' to replace and display it, ensuring the visual integrity of the website content and avoiding blank or damaged image placeholders.

Q3: Is the thumbnail size setting of the Anqi CMS global? What should I do if I need to display different thumbnail sizes for specific content or pages?

Yes, the 'Thumbnail Size' and 'Thumbnail Processing Method' configured in 'Content Settings' of AnQiCMS are global, which determines the unified specifications when the system generates thumbnails. This means that all thumbnails generated by the system areThumbThumbnail images will follow this rule. If you need to display images of different sizes in different areas of the website (such as the homepage, article list, detail page, etc.), you have several options: one is to upload original images with high enough resolution and then control them through frontend CSS styles or JavaScript.{{item.Thumb}}The display size of thumbnails, allowing the browser to adapt; secondly, adjust the global thumbnail size according to actual needs to meet most scenarios, and use it in a few special scenarios{{item.Logo}}（Typically the cover image, which may be larger or the original image), or consider uploading two sets of different-sized images for use in different templates, but this may require more complex frontend template logic to differentiate between them.