Harness security CMS thumbnail: Fine-tuned configuration and flexible display, creating visual impact
In website operation, images are undoubtedly the key elements that attract users and enhance content quality.While thumbnails act as the first visual touchpoint of a website's content, their display effect directly affects the users' desire to click and the overall beauty of the page.autoCMS knows this, providing us with flexible thumbnail configuration and display capabilities, helping us easily manage and present high-quality image content.
Core configuration: Thumbnail management in background content settings
The thumbnail configuration of Anqi CMS is mainly located in the "Content Settings" module of the backend.To get here, we just need to enter the background management interface, find the "Background SettingsHere, we will see a series of options related to image processing, which together constitute the logic for generating website thumbnails.
Among them, the most core are 'thumbnail processing method' and 'thumbnail size'.
Understand different thumbnail processing methods.
The autoCMS provides three different thumbnail processing methods to meet various design and display needs:
Scale proportionally by the longest sideThis method is intended to fully preserve the original content of the image, avoiding any cropping.The system will find the longest edge (either width or height) of the image based on the "thumbnail size" we set, and scale it proportionally from this baseline.The thumbnail generated, its longest side will be equal to the size we set, and the other side will be adjusted in proportion.
- Applicable scenariosWhen the integrity of the image is crucial and any part should not be cropped, for example, product close-ups, art display, etc.This method ensures that the image content is not missing, but in some layouts, it may result in images of different proportions, causing misalignment or white space visually.
Scale proportionally by the longest side with padding： If we have strict size requirements for thumbnails, hoping that all thumbnails present a uniform aspect ratio, and at the same time do not want to crop the image content, then 'pad to the longest side' is the ideal choice.The system will first resize the image proportionally by its longest edge to make it fit the size we set, then fill the insufficient part of the image (usually the shorter edge) with white or other specified color until the thumbnail size is reached.
- Applicable scenarios：Very suitable for grid layout, card display, and other scenarios that require strict uniform size.For example, news lists, product galleries, etc., can ensure that all thumbnails are visually uniform, enhancing the professionalism of the website.
[en] : Crop to the shortest edge.： “Cropping by the shortest edge” is a more direct approach, which ensures that the thumbnail ultimately appears in the size and ratio we set.The system will first center the image, then crop it based on the shorter edge of the image to remove the excess part.
- Applicable scenariosWhen the image size needs to be unified and the main information of the image is concentrated in the central area, this method is very effective.For example, portraits, covers, and other images can quickly generate thumbnails that meet design requirements, highlighting the visual focus.But it should be noted that if the key information of the image is located at the edge, it may be lost in the cropping.
Set thumbnail size
After selecting the appropriate processing method, the settings of 'Thumbnail size' are also crucial.Here you usually need to enter a width value and a height value, for example, "200x150".This size will guide the system on how to generate the final thumbnail.Properly setting the size can effectively reduce the file size of the image, speed up page loading, and enhance user experience.Suggestion to determine a size based on the actual design requirements of the website and the area for image display.
Other related configuration items
In addition to the above core settings, there are some options related to image processing in the content settings that are worth paying attention to:
- Default ThumbnailWe can upload an image as the default thumbnail.When the document or content does not upload its own thumbnail, the system will automatically use this default image to replace it, to avoid the embarrassing situation of blank pages or missing images.
- Batch regenerate thumbnails：When the thumbnail configuration of the website changes (for example, the processing method or size is modified), you can use this feature to one-click batch regenerate all uploaded content thumbnails, ensuring the consistency of image display across the entire site.
- whether to automatically compress large images：Enable this feature and set “Automatically compress to specified width”, which can automatically compress the image when the user uploads an image that is too large. This helps to control the image storage space and loading speed of the website.
- whether to enable Webp image format：Automatically convert images to WebP format, which can significantly reduce the image size while maintaining high image quality, further optimizing website performance.
Flexible application: Thumbnail display in templates
Configure the thumbnail generation rules on the back end first, and then call and display these thumbnails in the front-end template.The template language of Anqi CMS is concise and efficient, and it is very convenient to call thumbnails.
Under normal circumstances, when wearchiveList(Document List),categoryList(category list),pageList(Single-page list) and other tags to obtain content data, eachitem(Whether it is a document, category, or single page) will include oneThumbfield that directly points to the thumbnail URL generated by the system after processing based on the backend settings.
For example, when displaying a document list:
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
{% if item.Thumb %}
<img alt="{{item.Title}}" src="{{item.Thumb}}">
{% endif %}
</a>
</li>
{% endfor %}
{% endarchiveList %}
On the document detail page, we can also directly use:archiveDetailThe tag to get the thumbnail of the current document:
<div>
{% archiveDetail with name="Thumb" %}
</div>
Or use a variable to receive and display:
{% archiveDetail archiveThumb with name="Thumb" %}
<img src="{{archiveThumb}}" alt="文档缩略图"/>
For thumbnail calls for categories or single pages, the logic is similar:
{# 分类缩略图 #}
{% categoryDetail categoryThumb with name="Thumb" %}
<img src="{{categoryThumb}}" alt="分类缩略图" />
{# 单页缩略图 #}
{% pageDetail pageThumb with name="Thumb" %}
<img src="{{pageThumb}}" alt="单页缩略图" />
In addition, the Aqy CMS also providesthumbFilter, can be applied to any image URL in the template using the system-defined thumbnail processing rules. This means that even if you have a nonThumbField image URL, it can also be used to enjoy unified thumbnail processing through this filter. For example:
{% bannerList banners %}
{% for item in banners %}
<a href="{{item.Link}}" target="_blank">
<img src="{{item.Logo|thumb}}" alt="{{item.Alt}}" /> {# 对Banner图片的URL应用缩略图处理 #}
<h5>{{item.Title}}</h5>
</a>
{% endfor %}
{% endbannerList %}
Through these flexible calling methods, we can ensure that all images on the website, whether content thumbnails or other image resources, are presented to users in a unified and optimized manner.
Use Tips and Optimization Suggestions
- Responsive DesignIn addition to backend settings, front-end CSS with images, use
max-width: 100%; height: auto;etc. properties, can ensure that thumbnails display well on different devices. - Balancing quality and performance：Although the Auto CMS provides automatic compression and WebP conversion features, it is still recommended to use high-quality but appropriately sized images when uploading original images, as this is the foundation for optimizing website loading speed.
- SEO optimization: In
<img>in the tag,altThe attribute is mandatory. It not only helps search engines understand the content of the image but also provides text descriptions when the image cannot be loaded, enhancing user experience and website accessibility.
Through the above configuration and call, we can easily manage and display thumbnails with different processing methods in the Anqi CMS, making the website's image content more professional, beautiful, and efficient.