In content operation, images play a crucial role, and thumbnails, as the 'facade' of content, directly affect the user's first impression and willingness to click.A clear, beautiful, and quick-loading thumbnail that not only enhances the overall visual experience of the website but also effectively optimizes search engine crawling and ranking, truly a win-win situation.How can we finely tune the thumbnail generation process in AnQiCMS to achieve a **display effect?

Why is the configuration of thumbnails so important?

Imagine when users browse your website, whether it's an article list, product display, or category page, what catches their eye first is often those meticulously designed thumbnails.They carry the preview of the content and guide the user's gaze.If the thumbnail is blurred, misproportioned, 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 favor websites with fast loading speeds and good user experience, and optimized thumbnails are a key factor in improving page loading performance.AnQiCMS fully considers these needs and provides flexible configuration options, allowing you to adjust according to the actual situation.

How to generate and manage thumbnails in AnQiCMS?

In AnQiCMS, thumbnail generation and management are very convenient. When you are publishing articles, products, or managing categories, the system provides various ways to obtain thumbnails:

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

These thumbnail generation and processing strategies can be found and adjusted in detail in the AnQiCMS backend.Global SettingsunderContent SettingsThey can be found and adjusted in detail.

Precise control: the selection of thumbnail processing methods

The 'Content Settings' page has a key option named 'Thumbnail Processing Method', which provides three mainstream image processing strategies. You can flexibly choose according to the design style and content characteristics of your website:

  1. Scale proportionally by the longest sideThis processing 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, while the other side will be automatically scaled proportionally.

    • AdvantagesThe image will not appear any distortion, and it can completely display all the content of the original image.
    • Shortcomings: Due to the proportional maintenance, the generated thumbnail in a fixed-size layout may result in inconsistent width or height, making the overall layout look uneven.
    • Applicable scenariosWhen you have a high requirement for the integrity of the image content, or when the front-end layout can flexibly adapt to images of different sizes, such as a waterfall layout, this method is an ideal choice.

  2. Scale proportionally by the longest side with padding[en]: This method will also initially resize the image proportionally based on the longest side to ensure that the content of the image does not become distorted.On this basis, if the image is scaled and does not completely fill the "thumbnail size" you have set, the system will automatically fill the short edge area of the image with the preset color (usually white, to maintain visual consistency).

    • AdvantagesAll generated thumbnails will strictly comply with the fixed size you set, which is very suitable for layouts that require gridded and neat arrangement, such as product lists on e-commerce websites.Image content is complete, no cropping.
    • ShortcomingsThe image may have white space around it, which may affect the visual effect or waste page space if there is too much.
    • Applicable scenariosThe scenario where there are strict uniform requirements for thumbnail size but the content of the image should not be cropped, such as news lists, product albums, etc.

  3. [en] : Crop to the shortest edge.

    • AdvantagesThe thumbnail generated is both strictly conforming to the fixed size and does not produce any blank space, making the image appear compact and professional.
    • ShortcomingsThe partial content of the image edge 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 as important, or in situations that require high consistency and designs without whitespace, such as user portraits, product close-ups, cover images, etc.

The choice of processing method depends on your website design philosophy 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 thumbnail processing method, the next 'thumbnail size' setting should not be ignored either.You should set an appropriate size based on the actual display size of the thumbnail in the front-end page.

  • Reduce image size: Large thumbnails increase file size and slow down page loading.
  • Accelerate 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 imagesandCompress automatically to specified widthIf the original image size you upload 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 formatThe WebP format usually has a higher compression rate than JPG or PNG formats, resulting in smaller file sizes for 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 displaying a blank space when there is no thumbnail uploaded in the frontend, you can set a "default thumbnail".This way, all content lacking a specific thumbnail will display this default image, maintaining visual consistency of the website.
  • Batch regenerate thumbnailsWhen you adjust 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', which can regenerate all the thumbnails on the site according to the new settings with one click, very efficient.

The invocation and display in the template

It is also very simple to invoke thumbnails in the AnQiCMS template. Usually, you will go through something like{{item.Thumb}}or{{archive.Thumb}}Use such a tag to get the thumbnail URL. For example, in a loop of an article list:

【en】twig {% archiveList archives with type="list" limit="10" %}

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