When building and operating a website, the presentation of images often directly affects user experience and the professionalism of the website.AnQiCMS (AnQiCMS) fully understands this, providing users with a powerful and flexible image thumbnail control function, allowing you to precisely manage the display of images on the website front end according to your actual needs.
This article will introduce in detail how to achieve fine-grained control over the thumbnail size and cropping method in Anqi CMS through backend settings and template calls.
Set thumbnail rules uniformly in the background: the foundation of website visual presentation
The thumbnail settings of Anqi CMS are mainly concentrated in the "Content Settings" module on the backend, which is the core area where you can manage the thumbnails of the entire site's images.A reasonable configuration can ensure the visual consistency of website images while optimizing loading speed.
1. Thumbnail processing method: define image cropping logic
The system provides three mainstream thumbnail processing methods to meet the visual needs of different scenarios:
- Scale proportionally to the longest side
- Fill the longest side
- Trim according to the shortest edgeWhen the website design requires the thumbnail to fill the entire fixed size area and the visual focus of the image is in the center, this method can be chosen.The system will prioritize proportional scaling based on the shortest edge to ensure that at least one side of the image completely covers the target size after scaling, and then crop from the center point outward to remove the excess parts.This method can ensure that the thumbnail fills the container, but it should be noted that the edges of the image may be cropped, and important information may be lost.This is like a photo filling up the entire area in a fixed-size frame, with the excess being cropped off.
Choose which way depends on your website design style and the completeness of the image content.For news and information websites, aspect ratio scaling may be more appropriate; while for product display or albums, fixed size cropping may be able to highlight the product more prominently.
2. Thumbnail size: Set the display size of the image
After selecting the processing method, you can specifically set the width and height of the thumbnail.The size set here will be used as the default standard for generating all thumbnails by the system.It is recommended to set according to the specific requirements of the website template, for example, the list page may need 1:1 square thumbnails (such as 200x200px), and the related recommendations on the detail page may need 16:9 rectangular images (such as 320x180px).The appropriate size not only makes the image display more beautiful, but also effectively reduces the size of the image file and improves the page loading speed.
3. Auxiliary Function: Improve Image Management Efficiency
- Whether to automatically compress large images
- Default thumbnailWhen the system does not have a separate thumbnail uploaded for articles, categories, single pages, or products, it will automatically use the default image set here to maintain visual consistency and avoid the embarrassing situation of 'no image'.
- batch regenerate thumbnailsIf you modify the above size or processing method, this feature allows you to update the thumbnails of all uploaded images with one click, without manual operation, greatly improving operational efficiency.
Call and dynamically adjust in the template: flexibly display thumbnails
In Anqi CMS template, you can call and display thumbnails by specific tags and filters.
1. Call the generated thumbnail
In the template, when you need to display a thumbnail of an article, category, or single page, you usually can directly access theThumbproperty to get it. For example:
- For the images in the document list:
{{item.Thumb}} - For the category thumbnails:
{% categoryDetail with name="Thumb" %} - For the thumbnail of a single page:
{% pageDetail with name="Thumb" %}
TheseThumbThe image URL returned by the attribute is automatically generated by the system according to the rules (size and cropping method) you set in the background "Content Settings".
2. UsethumbFilter: Generate or retrieve thumbnails on demand
Anqi CMS also provides a flexiblethumbFilter, it can directly create thumbnail images for any image URL in the template. This means that if you need a thumbnail that is different from the global backend setting in a certain scenario, or if you need to take a thumbnail from a nonThumbThe original image field (such asitem.Logooritem.Imagesa certain image in the array) generates a thumbnail,thumbThe filter can be used.
For example,filter-thumb.mdThe document mentions:{{ image|thumb }}
This means you can pass a URL of the original image (imagea variable), and then through|thumbThe filter, to get its corresponding thumbnail. The system will return a thumbnail URL based on the image URL passed in, combined with the rules set up on the backend.
Example: Generate a thumbnail from the original LogoAssumeitem.LogoIt is the original large image cover of the article, would you like to display it as a thumbnail?
<img src="{{ item.Logo|thumb }}" alt="{{item.Title}}" />
This filter makes the template more flexible in image processing, able to cope with various complex display requirements.
Practical case and suggestions
- Consistency: Whether it is an article list, product display, or carousel, try to keep the thumbnail size and proportion consistent within the same area, which can greatly enhance the professionalism and user experience of the website.
- Performance optimization: Reasonably set the thumbnail size and work with the "Automatic Large Image Compression" feature of the backend, which can significantly reduce page loading time, especially for mobile users, the experience improvement is more obvious.
- SEO-friendly: Optimizing thumbnail size helps improve page loading speed, indirectly enhancing SEO ranking. Also, remember to
<img>tagsaltAttribute, describe the image content, this is not only beneficial for SEO, but also improves the accessibility of the website. - Material upload: When uploading images, try to upload high-resolution original images.Even if the thumbnail size needs to be adjusted in the future, the system can generate a clear thumbnail based on the high-quality original image, avoiding blurred pictures.
Through these fine-grained control options provided by Anqi CMS, you can easily master the display of website images, bringing users a more beautiful and efficient browsing experience.
Frequently Asked Questions (FAQ)
- Q: Why does the image on the front page not change after I modify the thumbnail size or cropping method in the background "Content Settings"?A: This situation usually has two reasons.First, the website may have a cache, you need to clear the AnQi CMS system cache or browser cache and try again.