In website operation, images, especially thumbnails, play a crucial role in attracting user clicks and maintaining a unified website visual style.For different types of content, such as a detailed article and a exquisite product, we naturally hope to have different thumbnail display rules.Then, what kind of support does AnQiCMS provide in this regard?
AnQiCMS as an agile content management system indeed 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 functions of AnQiCMS from several levels.
Global unified thumbnail processing strategy
Firstly, AnQiCMS provides a set of global thumbnail processing mechanisms in the "Content Settings".This means that regardless of whether you are uploading a thumbnail for an article, product, category, or single page, the system will default to processing according to these unified rules.
These global rules include:
- Thumbnail processing methodYou can choose among three ways: 'Scale to fit the longest edge', 'Fill the longest edge', or 'Crop to the shortest edge'.This determines how the image adapts to the target size when generating thumbnails.
- Thumbnail sizeYou can set a default width and height, and all thumbnails will attempt to generate this size.
- Default ThumbnailWhen a specific thumbnail is not uploaded for a piece of content, the system will use the default image set here to replace it.
- Automatic image compressionIf enabled, the system will also automatically compress the uploaded large images to the specified width, which helps optimize the website's loading speed and storage space.
The advantages of these settings are that they provide a consistent processing standard for the thumbnails of the entire website, reducing the repetitive operations of the operation personnel. However, this also means that it is not possible to set up completely different settings for the "article" and "product" models.自动生成Thumbnail processing method or size.
Flexible and independent thumbnail upload for content models
AnQiCMS's one of the core advantages 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 your business needs.Each content model can be considered as an independent content type, for example, your website may have an 'News and Information' article model, and a '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:
- Even if there is 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 to showcase 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 the global rules.
The flexibility of this method lies in the fact that you have ultimate control over the thumbnails of each piece of content.但如果您希望“产品”的缩略图都自动是方形,而“文章”的缩略图都自动是长方形,那么仅凭全局设置是无法直接满足的。
Through custom fields to implement "independent" thumbnail rules for different content.
To truly implement independent thumbnail rules for different types of content, AnQiCMS provides the powerful feature of 'custom fields for content models'.This is the key to meeting your needs.
You can add unique custom fields for different content models. For example:
- For the "product model:You can add a product list image (field name such as
product_list_thumbThe custom field of ) is set to “Single line text” (used to store image URLs) or directly upload images. - For the “Article Model”:You can add a custom field named "Article Cover Image" (field name as
article_cover_image)
When you are adding or editing a product, you can upload product list images that are specially designed to be square or of 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.
In this way, you are actually:
- bypassing the automatic processing of the global thumbnail.:You have uploaded an image to a custom field, it needsto manually ensure its size and aspect ratioAlready meets your "independent rules" for the thumbnail of the content type.System will not resize or crop these custom field images twice (unless the image is too large when uploaded, triggering the global 'Auto Compress Large Images').
- to call it as needed in the template:In your frontend template design, when displaying product lists, you can call
{{item.productListThumb}}This field is used to obtain the product thumbnail; while displaying the article list, it calls{{item.articleCoverImage}}. Thus, thumbnails of different content types will display images from different fields, with different 'rules' (which are actually preprocessed images).
This is not automatically applied to different models by the systemProcessing logicBut by cleverly utilizing custom fields and the cooperation of front-end templates, you can fully achieve the operation goal of using different styles of thumbnails for different content types, and have higher control over the images.
In summary, the global thumbnail settings of AnQiCMS ensure basic uniformity, while its flexible content model and custom field functions provide you with enough space. With the cooperation of front-end templates, it can realize the need for setting 'independent' thumbnail display strategies for different content types such as articles and products.关键在于将您对“独立规则”的图片处理工作,前置到图片上传和自定义字段的规划上。
Common Questions and Answers (FAQ)
1. If I modify the thumbnail size in the "Content Settings", will the image I previously uploaded to the custom field also change size?I will not.In 'Content Settings', modify the thumbnail size and processing method, which mainly affects the system's automatic extraction of thumbnails, as well as the processing of images uploaded through the standard 'Document Image' or 'Thumbnail' fields when generating thumbnails.product_list_thumb),The system usually considers it as the original image URL stored, and will not perform automatic size adjustment or cropping unless the original image size is too large and triggers the global "auto-compress large images" feature.Therefore, it is recommended to upload images to custom fields with proper dimensions and ratios in advance.
2. AnQiCMS whether it supports configuring "article modelIn the current backend interface of AnQiCMS, there is no direct provision of this setting based on the content modelAutomatic processing logic
3. How to differentiate the call of 'Document Image' and custom field images in the template?The system default thumbnail (whether manually uploaded to "Document Images" or automatically extracted by the system) is usually displayed in the template.{{item.Thumb}}or{{item.Logo}}Call the tag using auto. And if you have created a custom thumbnail field in the content model, for exampleproduct_square_thumb, then you can directly use `{{item.}}