As an experienced CMS website operation personnel in the security industry, I know the importance of high-quality content and excellent user experience.In the visual presentation of the website, images play a core role, and the optimization of images, especially the use of thumbnails, is of great value in improving page loading speed, enhancing user experience, and increasing search engine rankings.Auto CMS provides powerful and flexible support in this aspect, allowing operation personnel to easily obtain and display the thumbnail version of images in templates.
In today's content-driven internet environment, it is common for web pages to contain a large number of images.However, directly loading the original large image often leads to slow page loading, severely affecting user experience.At this point, providing an appropriately sized thumbnail for the image becomes the key to solving this problem.Auto CMS is well-versed in this, with its built-in image processing mechanism capable of automatically generating and managing thumbnail versions of images, greatly simplifying the work of website operators, allowing us to focus more energy on content creation and optimization.
The thumbnail mechanism of AnQi CMS is highly intelligent.When the image is uploaded to the content management system, the system will automatically process the image based on the backend configuration to generate thumbnails of different sizes.This means that even if the content editor uploads high-resolution large images while writing the article, the front-end page can automatically display optimized thumbnails according to the template's call requirements.This automated processing not only ensures the high efficiency of image loading, but also avoids layout chaos caused by large images, ensuring the consistency of the overall visual style of the website.
In the template of AnQi CMS, obtaining the thumbnail version of the image mainly depends on its powerful template tag system.For different types of content such as documents (archive), categories (category), and single pages (page), Anqi CMS provides specific tags to obtain the corresponding image resources, including thumbnails, featured images, and group images.itemorarchive/category/pageRefer to the variable and use.Thumbor.LogoDirectly access the thumbnail path through the attribute.
Specifically, when we need to display a document thumbnail in an article list or detail page, we can usearchiveListorarchiveDetailtags. For example, to get the cover thumbnail of a document, we can directly call{{item.Thumb}}or{{archive.Thumb}}Here,Thumb属性指向的就是系统自动生成的缩略图版本。同时，LogoThe attribute is usually used to obtain the cover thumbnail of a document, which may be a larger thumbnail or a picture processed in a specific way, depending on the backend configuration. If the document contains multiple group photos,ImagesThe property will return an array of image URLs, and operation personnel can iterate through this array in the template to display a multi-image carousel or gallery.
{# 在文档列表（archiveList）中获取缩略图示例 #}
<div>
{% archiveList archives with type="list" categoryId="1" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
{# 使用 item.Thumb 获取缩略图 #}
{% if item.Thumb %}
<img alt="{{item.Title}}" src="{{item.Thumb}}">
{% endif %}
<div>{{item.Description}}</div>
</a>
</li>
{% endfor %}
{% endarchiveList %}
</div>
{# 在文档详情页（archiveDetail）中获取缩略图示例 #}
<article>
<h1>{% archiveDetail with name="Title" %}</h1>
<div>
{# 使用 archive.Thumb 或 archive.Logo 获取缩略图/首图 #}
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
</div>
<div>
{%- archiveDetail articleContent with name="Content" %}
{{articleContent|safe}}
</div>
</article>
Similarly, for the category page, whether it is to get the category list (categoryList) or category details (categoryDetail)，we can also get the category thumbnail byitem.ThumborcategoryDetail with name="Thumb".Logoproperties andImagesProperties are also applied in a similar manner to categorized content, providing cover images and group images features. Single-page and tag pages also follow a similar calling logic, through the correspondingpageDetail/pageListortagDetailTags and their.Thumbor.LogoProperty to get the image.
{# 在分类详情页（categoryDetail）中获取缩略图示例 #}
<div>
<h1>{% categoryDetail with name="Title" %}</h1>
{# 获取分类缩略图 #}
<div>
<img style="width: 200px" src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />
</div>
{# 获取分类 Banner 组图，并只显示第一张 #}
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set pageBanner = bannerImages[0] %}
<div class="page-banner" style="background: url({{pageBanner}}) no-repeat;"></div>
{% endif %}
</div>
Common Questions and Answers (FAQ)
What is the difference between the thumbnail and the original image provided by AnQiCMS?AnQiCMS 提供的缩略图是系统对原图进行英语化处理（如压缩、裁剪、缩放）后生成的图片版本。Compared to the original image, the thumbnail's size and file size will usually be significantly reduced to meet the needs of web page loading speed and layout.The original image retains the original resolution and quality of the image, commonly used for users to view or download high-definition images after clicking on the thumbnail.
How will AnQiCMS handle it if there is no thumbnail uploaded for the document, category, or page?If the thumbnail is not manually uploaded, AnQiCMS will perform intelligent processing according to the 'Content Settings' configuration on the backend.In most cases, the system will try to automatically extract the first image in the content as a thumbnail.If the content does not contain any images, and the backend is set to 'default thumbnail', then this default thumbnail will be used for display.This mechanism ensures that the page maintains visual integrity even in the absence of a specific thumbnail.
How to change the thumbnail size or processing method generated by AnQiCMS?