During the operation of a website, the management and optimization of image content is a key factor in improving user experience, accelerating website loading speed, and even affecting search engine rankings.AnQiCMS fully considers these needs, providing a flexible image processing mechanism, allowing us to easily control the automatic compression and thumbnail display method of the front-end image after upload.
Content settings: the core hub of image processing
To fine-tune the management of images on the AnQiCMS website, we need to first go to the "Background SettingsThis aggregates all core configurations related to content images, giving us full control over the way we process images.
Remote Image Download: Control the Source of ImagesIn “Content Settings”, you can decide whether to download remote images.If your article content includes images from external links, enabling this option will cause AnQiCMS to automatically download these images to your server and store them locally.This can improve the image loading speed in some cases, especially when the external image server is unstable.But if you are using a professional image hosting service (CDN), it is usually not necessary to enable this feature. Keeping the images on your CDN can actually achieve better acceleration effects.
WebP Format: The Future of Image Optimization
Large Image Automatic Compression: Balancing Quality and Speed
Thumbnail Processing Method: Refine Your Image PresentationThis is the core of controlling the front-end display effect of the image. AnQiCMS provides three different thumbnail processing methods to meet various design needs:
- Scale proportionally by the longest edge:This method ensures that the image maintains its original aspect ratio and scales based on the longest side to display the image completely.This means that the thumbnail's width or height may adapt to the original image ratio, commonly used in scenarios where complete display of the image content is required but fixed dimensions are not strictly required.
- Pad by the longest edge:If you need a thumbnail with a fixed width and height while also displaying the entire image content, 'Pad to the longest edge' is a good choice.The image will be centered displayed, and the parts that are less than the preset size will be automatically filled with white blocks to ensure uniformity in size, while avoiding information loss caused by cropping.
- Crop by the shortest edge:When you have strict fixed requirements for the thumbnail size and the image content allows for centered cropping, you can choose this method.AnQiCMS will center crop the image to match the preset size on the shortest side, thus generating a thumbnail of consistent size.It is worth noting that this method may result in the cropping of some content at the edges of the image.
Thumbnail size: Custom display sizeAfter selecting the thumbnail processing method, the "thumbnail size" becomes particularly important.You can accurately set the width and height of the thumbnail according to the design requirements of the front-end page.The reasonable size settings can not only optimize the image volume, reduce the transmission bandwidth, but also improve the page loading speed, bringing a smoother user experience.
Default thumbnail: Elegant display even without imagesSometimes, an article or product may not have a thumbnail set separately.This is where the "default thumbnail" comes in handy.Here, after uploading a general image, when the system needs to display a thumbnail but cannot find a specific image, it will automatically call this default image for display to ensure the uniformity and aesthetics of the website interface.
Bulk regeneration: One-click update all thumbnailsWhen you modify any of the above thumbnail processing settings (such as thumbnail size or processing method), you may want all previously uploaded images to be regenerated as thumbnails according to the new rules.This feature, 'Batch Regenerate Thumbnails', can help you update all thumbnails on the site with one click, greatly improving operational efficiency.
Image calling and display in front-end templates
In AnQiCMS's front-end template, we call and display optimized images through built-in tags that are set up and optimized by the backend.Whether the image has undergone WebP conversion, large image compression, or specific thumbnail processing, the front-end template can easily obtain the link to the processed image.
Document, category, and single page thumbnails:In the details or list pages of documents (archive), categories (category), and single pages (page), we usually use
{{item.Logo}}to get the main image (usually the first uploaded image or cover image), as well as{{item.Thumb}}to get the thumbnail set by the backend. For example:<img src="{{archive.Thumb}}" alt="{{archive.Title}}" />This will display the image after the background thumbnail setting of the current article has been processed.
Display of the image group:For some fields containing multiple images, such as the 'Document Images' (Images) or 'Banner Images' for categories, we can display them by looping:
{% archiveDetail archiveImages with name="Images" %} {% for imgUrl in archiveImages %} <img src="{{imgUrl}}" alt="文章图片" /> {% endfor %} {% endarchiveDetail %}Here
imgUrlEach image obtained will also be affected by the global settings such as 'WebP image format' and 'auto-compression of large images.'Manually obtain thumbnails:If you have an original URL of an image in the template and you also want it to be displayed according to the thumbnail settings of the backend, you can use
thumbFilter:<img src="{{ imageOriginalUrl|thumb }}" alt="描述" />This filter will return the thumbnail URL corresponding to the original image based on the configuration of 'Thumbnail processing method' and 'Thumbnail size' on the backend.
Summary
AnQiCMS provides powerful and flexible control capabilities in image management, from automatically compressing large images, converting to WebP format, to various thumbnail processing methods, every detail is aimed at helping users optimize website performance and content display.By making full use of the various functions in "Content Settings", combined with the invocation of the front-end template, we can not only make the website load faster and improve the user experience, but also ensure that the image content is presented in the most aesthetic and suitable way to the visitors, thereby enhancing the overall competitiveness of the website.
Common Questions (FAQ)
Why does my image still look large after uploading, and it has not been compressed?This is usually due to the 'Content Settings' in the background not enabling the 'Whether to automatically compress large images' option, or the 'Auto-compress to specified width' is set to a width value that is too large, so the image does not reach the compression trigger condition.Please check and adjust these two settings to ensure they meet your expectations.
I have modified the thumbnail processing method or size, but the image on the front end does not change. What should I do?When you adjust the settings related to thumbnails, the system will not automatically update the thumbnails of the uploaded images.You need to go back to the 'Background Settings' -> 'Content Settings' page, find the 'Batch Regenerate Thumbnails' button, click it to let AnQiCMS regenerate all image thumbnails according to the new rules.In addition, don't forget to clear your browser cache to ensure you see the latest effects.
How to ensure that my website images are both clear and load quickly?To achieve clear images and fast loading, it is recommended that you enable both the 'Enable Webp Image Format' and 'Enable Auto Compression for Large Images' features.WebP can effectively reduce file size, while large image compression controls the maximum physical size of the image.
{{item.Thumb}}or use|thumbFilter to get these optimized thumbnails.