In website operation, images, especially thumbnails, play a crucial role in attracting user clicks and unifying the website's visual style.For different types of content, such as a detailed article and a beautifully crafted product, we naturally want different thumbnail display rules.Then, what support does AnQiCMS provide in this regard?

AnQiCMS is a flexible content management system that truly provides a variety of management methods for content display.When it comes to setting independent thumbnail rules for different types of content, we need to understand the functionality of AnQiCMS from several levels.

Global unified thumbnail processing strategy

First, AnQiCMS provides a global thumbnail processing mechanism in the "Content Settings".This means that regardless of whether you are uploading an article thumbnail, a product thumbnail, or a category, single page thumbnail, the system will default to following these unified rules for processing.

These global rules include:

  1. Thumbnail Processing MethodYou can choose from three ways: 'Scale proportionally to the longest side', 'Fill to the longest side', or 'Crop to the shortest side.'This determines how the image adapts to the target size when generating thumbnails.
  2. Thumbnail size: You can set a default width and height, and all thumbnails will attempt to generate this size.
  3. Default thumbnailWhen a piece of content does not upload a specific thumbnail image, the system will use the default image set here to replace it.
  4. Image auto-compressionIf enabled, the system will also automatically compress the uploaded large images to the specified width, which helps optimize the website loading speed and storage space.

The advantages of these settings lie in the consistent processing standards they provide for thumbnails throughout the entire website, reducing repetitive operations for operators. However, this also means that it is not possible to set up completely different settings for the "article" and "product" models directly.Automated generationThumbnail processing method or size.

Flexible and independent thumbnail upload of content model.

One of the core advantages of AnQiCMS is its 'flexible content model'.The system is built-in with "Article Model" and "Product Model", and you can also customize more content models according to business needs.Each content model can be considered as an independent content type, for example, your website may have an 'News Information' article model, and another 'Electronic Products' product model.

When creating or editing specific content, whether it is an article, product, single page, or category, the system provides an independent 'document image' or 'thumbnail' upload entry. This means that:

  • Even with a globally unified processing rule, you can still upload a carefully designed thumbnail for each specific article without relying on the system to automatically extract it.
  • Similarly, each product can also upload a thumbnail specifically displaying its features.
  • Even if you do not upload, the system will try to extract the first image from the article or product content as a thumbnail and process it according to global rules.

The flexibility of this method lies in the fact that you have ultimate control over the thumbnails of each content.But if you want the thumbnails of "products" to be automatically square and the thumbnails of "articles" to be automatically rectangular, then it cannot be directly satisfied by the global settings.

Implement a 'standalone' thumbnail rule for different content through custom fields.

To truly implement independent thumbnail rules for different types of content, AnQiCMS provides the powerful feature of 'content model custom fields'.This is the key to solving your needs.

You can add unique custom fields for different content models. For example:

  • For the 'product model'You can add a name called "Product List Image" (field name likeproduct_list_thumb(The custom field, set the type to "single line text" (for storing image URLs) or directly upload an image.)
  • For the "article model": You can add a custom field named "Article Cover Image" (field name likearticle_cover_image).

When you are adding or editing a product, you can upload a list image specifically designed to be square or a specific size.product_list_thumbThis custom field is. Similarly, when editing an article, you can upload the designed article cover image.article_cover_imagefield.

By this method, you are actually:

  1. Bypassing the automatic processing of the global thumbnail image.: The image you upload to the custom field needsto manually ensure the size and proportionAlready conforms to the 'independent rules' for the thumbnail of the content type.The system will not resize or crop the images for these custom fields again (unless you upload when the size is too large, triggering the global "auto-compress large images" function).
  2. to call as needed in the template: In your frontend template design, when displaying the product list, you can call{{item.productListThumb}}This field is used to get the product thumbnail; while displaying the article list, it calls{{item.articleCoverImage}}This way, different content types will display thumbnails from different fields, with different 'rules' (which are actually preprocessed images).

This is not the system automated application of different modelsProcessing logicBut by cleverly utilizing custom fields and the cooperation of front-end templates, you can completely achieve the operation goal of using different styles of thumbnails for different content types, and have higher control over the images.

In short, AnQiCMS's global thumbnail settings ensure basic uniformity, while its flexible content model and custom field features provide you with enough space. With the cooperation of front-end templates, it is possible to set 'independent' thumbnail display strategies for different content types such as articles and products.The key is to prioritize your image processing work for the 'independent rules', to the planning of image upload and custom fields.

Frequently Asked Questions (FAQ)

1. Will the image I previously uploaded to the custom field change size if I modify the thumbnail size in the 'Content Settings'?Will not. The thumbnail size and processing method modified in the 'Content Settings' mainly affect the system's automatic extraction of thumbnails, as well as the processing of thumbnails generated for images uploaded through the standard 'Document Image' or 'Thumbnail' fields.If you upload an image to a custom field (for exampleproduct_list_thumb), the system usually treats it as a raw image URL and does not automatically adjust or crop its size, unless the original size of the image is too large, triggering the global "auto-compress large image" function.Therefore, it is recommended to upload images to custom fields, and the size and proportion should be handled in advance.

2. Does AnQiCMS support direct configuration in the background to automatically generate square thumbnails for the 'Article Model' and rectangular thumbnails for the 'Product Model'?In the current AnQiCMS backend interface, there is no direct provision for this kind of setting different based on the content modelAutomatic processing logic(such as different cropping ratios or sizes) function. The thumbnail processing method and size you configure in the "Content Settings" are globally effective.If you want to implement differentiated automatic thumbnail generation rules under different models, the most recommended method is to use custom fields to store preprocessed images, or to apply CSS style differentiation in the front-end template for thumbnails of different models, so that they visually present different proportions and sizes, but the cropping method of the image itself still follows the global settings.

How to differentiate between 'Document Image' and the image of custom fields in the template?The system default thumbnail (whether manually uploaded to "Document Image" or automatically extracted) is usually through the template{{item.Thumb}}or{{item.Logo}}Call the tag. And if you create a custom thumbnail field in the content model, for exampleproduct_square_thumb, then you can directly use `{{item.