How to display the thumbnail of each article in the article list?

In content operation, the thumbnail of the article list page plays a vital role.They can quickly attract visitors' attention, increase click-through rate, and make the page content clear at a glance, greatly improving the user experience.AnQiCMS (AnQiCMS) is a comprehensive content management system that provides a very flexible and easy-to-use way to display thumbnails of each article in the article list.Next, let's discuss in detail how to implement this function.

Why are thumbnails so important?

Imagine you are browsing a news website, wouldn't it be dull and uninteresting, and hard to quickly find the content you are interested in if all the article titles were piled up together without any pictures?The purpose of the thumbnail is here. It can convey the general information of the article topic visually before the article content is clicked to read.This is very helpful to enhance the professionalism and attractiveness of the website, as well as to optimize SEO performance (such as image ALT tags).

Anqi CMS thumbnail feature basics

AnQiCMS took into account the richness of content display from the beginning of its design, providing multi-faceted support for thumbnail processing:

  1. Intelligent automatic extraction:When you publish an article, if the content contains images, AnQiCMS will intelligently extract the first image in the article content as the default thumbnail for the article.This saves the trouble of manual upload.
  2. Flexible manual upload:Of course, if you want to specify a particular thumbnail for the article instead of the image automatically extracted by the system, you can also manually upload it from the background article editing interface or select it from the existing image library.
  3. Default thumbnail mechanism:Even if the article content does not have images, and there is no manually uploaded thumbnail, AnQiCMS also allows you to set a 'default thumbnail'.This way, the position of the article in the article list that does not specify a thumbnail will not appear blank, but will display a unified placeholder.

These mechanisms collectively ensure the visual integrity and consistency of the website content.

Backend settings: optimize thumbnail display effect

Before displaying thumbnails in the front-end template, we can first make some global configurations in the Anqi CMS backend to ensure that the display effect of the thumbnails meets our expectations.

Enter the backend management interface, find the left menu bar's "Backend settingsthen click onContent settings". Here, you will see various configuration items related to images and thumbnails:

  • Thumbnail processing method:AnQiCMS provides 'Scale proportionally by the longest side', 'Fill by the longest side', and 'Crop by the shortest side' three processing methods.You can choose the most suitable way according to the website design style and the need for image display.For example, if you want all thumbnail sizes to be consistent, even if the image aspect ratios are different, you can choose to fill in blank space with 'Fill to the longest side';If all images should be cropped to a uniform aspect ratio, you can choose 'Crop to shortest side'.
  • Thumbnail size:You can set a specific width and height, and the system will process the thumbnail based on this size.Suggest setting the actual design width and height of the article list in your template, as this can prevent images from being stretched or compressed excessively, and can also effectively reduce the file size of the images and speed up page loading.
  • Default thumbnail: As previously mentioned, you can upload an image here as the default thumbnail for all articles on the website.When an article does not specify a thumbnail, the system will automatically call this image.
  • Batch regenerate thumbnails:If you change the thumbnail processing method or size settings, you need to have all the uploaded images regenerate thumbnails according to the new settings, and you can use this feature for batch processing, which is very convenient.

Properly configure these options will lay a good foundation for the thumbnail display on the front-end page.

Front-end template implementation: Display thumbnails in the article list.

After configuring the background settings, we need to call and display these thumbnails in the front-end template. AnQiCMS uses a syntax similar to the Django template engine, and the template files are usually located in/templateUnder the directory, according to the model and classification of your website content, the corresponding article list page template file may be{模型table}/list.htmlor a more specific custom template.

We will mainly use it in templatesarchiveListTags to get the list of article data. This tag will take the data of each article asitemVariables for us to use in the loop. Among them,item.ThumbThis variable contains the complete URL of the article thumbnail.

This is an example of a thumbnail image display code snippet in the article list, you can add it to your article list template file (such asarchive/list.html):

`twig {# Assuming this is the loop part of the article list #}

{% archiveList archives with type="page" limit="10" %} {# type="page" 表示启用分页，limit="10" 表示每页显示10篇文章 #}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}" class="article-link">
            <div class="article-content">
                <h5 class="article-title">{{item.Title}}</h5>
                <p class="article-description">{{item.Description}}</p>
                <div class="article-meta">
                    <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                    <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span>阅读量：{{item.Views}}</span>
                </div>
            </div>
            {# 这里是显示缩略图的关键代码 #}
            {% if item.Thumb %}
            <div class="article-thumb">
                <img alt="{{item.Title}}" src="{{item.Thumb}}">
            </div>
            {% endif %}
        </a>
    </div>
    {% empty %}
    <div class="no-content">
        该列表没有任何内容。
    </div>
    {% endfor %}
{% endarchiveList %}

{# 如果您使用了type="page"模式，还需要添加分页代码 #}
<div class="pagination">
    {% pagination pages with show="5" %}
        {# 首页 #}
        <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间多页