How to get the thumbnail version of the image in AnQiCMS template?

As an experienced security CMS website operator, I fully understand the importance of high-quality content and excellent user experience.In the visual presentation of a website, images play a core role, and the optimization of images, especially the application of thumbnails, is of great value in improving page loading speed, enhancing user experience, and improving search engine rankings.Anqi CMS provides strong and flexible support in this aspect, allowing operators to easily obtain and display thumbnail versions 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, seriously affecting user experience.At this moment, providing an appropriately sized thumbnail for the image becomes the key to solving this problem.AnQi CMS fully understands this, its built-in image processing mechanism can automatically generate and manage thumbnail versions of images, greatly simplifying the work of website operators, allowing us to focus more on content creation and optimization.

The thumbnail mechanism of AnQi CMS is highly intelligent. After the image is uploaded to the content management system, the system will automatically process the image according to the background configuration to generate thumbnails of different sizes.This means that even if the content editor uploads a high-resolution large image while writing the article, the front-end page can automatically display the optimized thumbnail 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 overly large images, ensuring the uniformity of the overall visual style of the website.

In Anqi CMS template, get the thumbnail version of the image, mainly relying on its powerful template tag system.For document (archive), category (category), and single page (page) content, Anqi CMS provides specific tags to retrieve the corresponding image resources, including thumbnails, featured images, and group images.These tags are usually passed through loops or detail pagesitemorarchive/category/pageReference by variable and pass through.Thumbor.LogoDirectly access the thumbnail path via properties.

In particular, when we need to display the document thumbnail in the article list or detail page, we can usearchiveListorarchiveDetailtags. For example, to get the document cover thumbnail, we can directly call{{item.Thumb}}or{{archive.Thumb}}. Here,ThumbThe attribute points to the thumbnail version automatically generated by the system. At the same time,LogoProperties are usually used to get the cover image of the document, which may be a larger thumbnail or an image processed in a specific way, depending on the backend configuration. If the document contains multiple group images,ImagesThe property will return an array of image URLs, and operators can iterate over 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 the category details (categoryDetail)，we can also useitem.ThumborcategoryDetail with name="Thumb"To get the category thumbnail.Logoattributes andImagesProperties are also applied in a similar way to categorized content, providing cover images and group images. 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>

The image processing strategy of Anqi CMS can be finely configured in the "Content Settings" backstage.The operations personnel can flexibly adjust the thumbnail processing method according to the actual needs of the website (such as proportional scaling by the longest side, filling by the longest side, or cropping by the shortest side), set a unified size for thumbnails, and even upload a default thumbnail to ensure that there is an image display when no thumbnail is specified for the content.These settings enable the website to pursue visual effects while also considering performance and consistency.

In summary, AnQi CMS provides a comprehensive and convenient solution for acquiring and managing image thumbnails.Through intuitive template tags and flexible backend configuration, website operators can easily achieve optimized image display without delving into complex code, thereby providing users with a smoother and more beautiful browsing experience, and laying a solid foundation for the long-term development of the website.

Frequently Asked Questions (FAQ)

What is the difference between the thumbnail and the original image provided by AnQiCMS?AnQiCMS provides a thumbnail that is the image version generated by the system through automatic processing of the original image (such as compression, cropping, scaling).Compared to the original image, the thumbnail's size and file size are usually significantly reduced to accommodate web page loading speed and layout requirements.The original image retains the original resolution and quality and is often used for high-definition viewing or downloading after the user clicks on the thumbnail.

What will AnQiCMS do if no thumbnail is uploaded for the document, category, or page?If the thumbnail is not manually uploaded, AnQiCMS will automatically process according to the 'Content Settings' configuration in the background.In general, 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 displayed.This mechanism ensures that the page can maintain visual integrity even in the absence of a specific thumbnail.

How can I change the size or processing method of the thumbnails generated by AnQiCMS?To change the thumbnail size or processing method generated by AnQiCMS, you need to log in to the backend management system and navigate to the "Content Settings" page under "Backend Settings".On this page, you can find options such as 'thumbnail processing method' (supporting proportional scaling by the longest side, padding by the longest side, and cropping by the shortest side), 'thumbnail size', and 'batch regenerate thumbnails'.Adjust according to your needs and save the settings, then you can consider using the 'Batch regenerate thumbnails' feature to update the thumbnail versions of all uploaded images.