In content operation, images play a vital role, and thumbnails, as the 'face' of the content, directly affect users' first impressions and click intentions.A clear, beautiful and fast-loading thumbnail that not only enhances the overall visual experience of the website, but also effectively optimizes the search engine crawling and ranking, which is a win-win situation.How do we finely tune the thumbnail generation processing method in AnQiCMS to achieve the **display effect?

Why is the configuration of thumbnails so important?

Imagine when a user browses your website, be it an article list, product display, or category page, what first catches the eye is often those carefully designed thumbnails.They carry the preview of the content and guide the user's gaze.If the thumbnail is blurry, distorted in proportion, or loads slowly, users are likely to skip it directly, which is undoubtedly a huge loss for the content's reach.From a technical perspective, search engines also prefer websites with fast loading speeds and good user experience, and the optimized thumbnails are a key factor in improving page loading performance.AnQiCMS fully considered these needs, providing flexible configuration options, allowing you to adjust according to your actual situation.

How does AnQiCMS generate and manage thumbnails?

In AnQiCMS, the generation and management of thumbnails is very convenient. When you publish articles, products, or manage categories, the system provides various ways to obtain thumbnails:

First, you can directly upload an image as a thumbnail or select one from the existing image library.AnQiCMS supports you to specify a dedicated thumbnail for each piece of content or category through an intuitive operation interface.

Secondly, if you have not manually uploaded a thumbnail but the article content includes images, AnQiCMS can also play a smart role.It automatically extracts the first image in the article content as a thumbnail for the content.This greatly simplifies the content publishing process, especially suitable for scenarios that require quick updates to a large amount of content.

These thumbnail generation and processing strategies can all be found in the AnQiCMS backend.Global SettingsbelowContent settingsThere you can find and make detailed adjustments.

Precise control: the selection of thumbnail processing methods.

The "Content Settings" page has a key option called "Thumbnail Handling Method", which provides three mainstream image processing strategies, and you can flexibly choose according to the design style and content characteristics of the website:

  1. Scale proportionally to the longest sideThis method maintains the original aspect ratio of the image, scaling the longest side of the image to the length corresponding to the 'thumbnail size' you set, and the other side will be scaled automatically in proportion.

    • Advantage: The image will not distort, and it can fully display all the content of the original image.
    • Disadvantage: Due to maintaining the aspect ratio, the thumbnail generated in a fixed-size layout may cause the width or height to be inconsistent, making the overall layout look uneven.
    • Applicable scenariosWhen you have a high requirement for the integrity of the image content, or the front-end layout can flexibly adapt to images of different sizes, such as waterfall layout, this method is an ideal choice.

  2. Fill the longest sideThis method will first resize the image proportionally to the longest side, ensuring that the image content does not become distorted.On this basis, if the image does not completely fill the "thumbnail size" you set after scaling, the system will automatically fill the preset color (usually white) in the short edge area to maintain visual consistency.

    • AdvantageAll generated thumbnails will strictly conform to the fixed size you set, which is very suitable for layouts that require grid-like, neat arrangements, such as product lists on e-commerce websites.The image content is complete, no cropping.
    • Disadvantage: There may be blank areas around the image, and if there is too much blank space, it may affect the visual effect or waste page space.
    • Applicable scenarios: There is a strict uniform requirement for thumbnail size, but also do not want to crop the image content in cases such as news lists, product albums, etc.

  3. Trim according to the shortest edgeThis is another method to implement fixed-size thumbnails.The system will first resize the image proportionally based on the shortest side, so that the shortest side reaches the length corresponding to the thumbnail size you set.Then, it will crop from the center of the image, removing the longest side that exceeds the specified size.

    • Advantage: The thumbnail generated can strictly meet the fixed size without any blank space, making the image appear compact and professional.
    • Disadvantage: The partial content at the edge of the image may be cropped off, resulting in incomplete image information.
    • Applicable scenariosWhen the main subject of the image is centered and the background information is not so important, or in situations where a high degree of uniformity and no blank design is required, such as user portraits, product close-ups, cover images, etc.

Choose which processing method depends on your website design concept and specific requirements for image display. There is no best, only the most suitable.

Size and optimization: Set the appropriate thumbnail size

After determining the processing method of the thumbnail, the next "thumbnail size" setting should not be neglected either.You should set an appropriate size based on the actual display size of the thumbnail in the front-end page.This helps:

  • Reduce image size: Large thumbnails increase file size and slow down page loading speed.
  • Speed up page loading speed: Smaller file size means faster user access.
  • Ensure image clarity: Small size can cause image blur and affect user experience.

AnQiCMS also provides some advanced image optimization features:

  • Whether to automatically compress large imagesas well asAutomatically compress to a specified widthIf the original image size is too large, enabling these features can automatically compress it to the specified width during upload, further saving storage space and optimizing loading performance.
  • Whether to enable WebP image format: The WebP format usually has a higher compression rate than JPG or PNG formats, and the file size is smaller under the same quality.Enabling this feature allows newly uploaded images to be automatically converted to WebP format, significantly improving website performance.
  • Default thumbnailTo solve the issue of blank content displayed on the front end when no thumbnail is uploaded, you can set a 'default thumbnail'.This will display the default image for all content lacking a specific thumbnail, maintaining the visual consistency of the website.
  • batch regenerate thumbnails: After adjusting the 'thumbnail processing method' or 'thumbnail size', the thumbnails in the old content will not update automatically.This feature can be used to batch regenerate thumbnails, quickly regenerate all thumbnails on the site according to new settings, which is very efficient.

Calls and displays in the template:

It is also very simple to call thumbnails in the AnQiCMS template. Usually, you would use something like{{item.Thumb}}or{{archive.Thumb}}This tag is used to get the thumbnail URL. For example, in a loop of article lists:

`twig {% archiveList archives with type=“list” limit=“10” %}

{% for item in archives %}
<li>
    <a href="{{item.Link}}">
        <img alt="{{