In website content operation, images play a crucial role. They not only attract users' attention and enhance the beauty of the page, but are also an indispensable part of search engine optimization (SEO).AnQiCMS provides a flexible and diverse mechanism to handle and display thumbnails or cover images for articles, categories, single pages, etc. Whether it is the automated processing in the background or the fine control at the template level, it can meet all kinds of needs of content operation.
Image source and background intelligent processing
When using AnQiCMS to publish content, the source of the content images and preliminary processing are mainly concentrated in the background:
Firstly,Source of imagesExtremely flexible.When editing articles, categories, single pages, or tags, we usually manually upload or select an image from the existing image library as a cover in the 'Document Image' or 'Thumbnail' field.An extremely practical feature is that, even if you do not manually specify a thumbnail, AnQiCMS will also intelligently extract the first image from the article content as the thumbnail for the content, which greatly saves the time of operation personnel.In addition, for categories and single pages, you can also set the 'Banner Image' field, which supports uploading multiple images for carousel display. This is very useful when creating pages with a strong visual impact.
Secondly, AnQiCMS inContent SettingsThis provides powerful image automation processing capabilities, which directly affects the display effect and loading performance of images on the front end. These processing methods include:
- Remote Image Download and WebP Conversion：You can choose whether to download the external images referenced in the article to your local machine, which helps to unify the management of image resources and avoid issues with broken external links.Additionally, the system also supports automatically converting uploaded JPG, PNG, and other formats of images to WebP format. WebP usually provides better compression ratios, thereby speeding up page loading times.
- Automatic compression of large imagesTo avoid the original large image affecting the website performance, you can enable the automatic compression feature and set a maximum width.The system will automatically compress the image to the specified size during upload to reduce the file size.
- Thumbnail processing methodThis is a highlight of AnQiCMS in image processing, it provides three fine thumbnail generation strategies:
- Scale proportionally by the longest sideThis method will display all the content of the image, maintaining the original image ratio, but the size of the thumbnail may not be consistent.
- Scale proportionally by the longest side with paddingIf you need a fixed-size thumbnail while also displaying the entire image content, this option will be very useful.The image will be centered in the canvas of specified size, and the insufficient part will be filled with white.
- [en] : Crop to the shortest edge.This method is suitable for scenarios that require highlighting the main subject of the image and have strict requirements for fixed dimensions. The image will be cropped in the center, and some edge information may be lost.
- Thumbnail size and default thumbnail：You can set a unified thumbnail size according to the actual requirements of the front-end template.In addition, AnQiCMS also allows you to set a "default thumbnail", which will be automatically used for display when no thumbnail is specified for a piece of content, ensuring the consistency of image display on the website.
These background settings are global and can provide unified, automatic management and optimization for the website's image resources.
Image calls and fine control in templates
AnQiCMS uses a syntax similar to Django template engine, variables are enclosed in double curly braces{{变量}}Logic control uses{% 标签 %}The variable name usually follows camel case naming, which brings great convenience to template development.In the template, we can call and display the thumbnails or cover images of articles, categories, single pages, and tags in various ways.
1. Call the image field of articles, categories, and single pages
Whether it is the article detail page or the list page, we can get the image field through the corresponding tags (such asarchiveDetail/archiveList/categoryDetail/pageDetail) as well.
Logo: It usually refers to the cover image or the large image, with a relatively high resolution.Thumb：指系统根据后台设置自动生成的缩略图。Images：对于一些内容模型（如文章、单页、分类），可能支持组图上传，ImagesThe field will return an array of image URLs.
For example, on an article detail page, you can call the thumbnail and cover image of the article like this:
{# 默认获取当前文章的封面首图 #}
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
{# 默认获取当前文章的缩略图 #}
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
{# 调用指定 ID 文章的缩略图 #}
<img src="{% archiveDetail with name="Thumb" id="123" %}" alt="{% archiveDetail with name="Title" id="123" %}" />
If the content model supports multiple image uploads (for example, articles)Images), you can display all images by looping:
{# 假设 archiveImages 变量包含了文章的 Images 数组 #}
{% archiveDetail archiveImages with name="Images" %}
<div class="article-gallery">
{% for imgUrl in archiveImages %}
<img src="{{ imgUrl }}" alt="文章图片" />
{% endfor %}
</div>
In the article list page, you can inarchiveListEasily call the image of each article in the loop:
{% archiveList articles with type="list" limit="10" %}
{% for item in articles %}
<div class="article-item">
<a href="{{ item.Link }}">
{# 调用列表项的缩略图 #}
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
{% endif %}
<h3>{{ item.Title }}</h3>
</a>
</div>
{% endfor %}
{% endarchiveList %}
The image calling method for categories, single pages, and tags is similar to that of articles, just replace the corresponding tag, for example:categoryDetailGet the image details of the category,pageDetailGet a single page image,tagDetailGet label image.
2. UsethumbFlexible image processing with filter
Besides direct callingLogoorThumbField acquisition background pre-processed image, AnQiCMS also provides a powerfulthumbfilter, allowing you to filter at the template layerany image URLPerform real-time thumbnail generation and size adjustment.This means that even if you have set a unified thumbnail in the background, you can easily get thumbnails of different sizes or processing methods in specific front-end scenarios.
thumbThe basic usage of the filter is{{ image_url|thumb }}It will generate a processed thumbnail based on the original image address, combining with the image processing engine of AnQiCMS.
For example, you want the thumbnail of the article to display as 200x150 pixels (the shortest edge cropped) within a specific module, even though the default background generates a 300x200 pixels aspect ratio image:
{# 假设 item.Logo 是原始图片 URL #}
<img src="{{ item.Logo|thumb:200,150,'裁剪' }}" alt="{{ item.Title }}" />
Herethumb:200,150,'裁剪'Representing: Set the image width to 200px, height to 150px, and use the 'shortest edge cropping' method.This flexibility allows front-end design to be fully customized for image display according to layout requirements.
**