How to display article thumbnails in the Anqi CMS article list?

Practical guide to elegantly displaying thumbnails in the Anqi CMS article list

In website operation, the visual appeal of the article list page is crucial.A carefully selected or automatically generated thumbnail that can quickly capture the visitor's attention, convey the theme of the article, and thereby improve click-through rate and optimize user experience.The AnQi CMS provides flexible and powerful features to help us easily implement displaying article thumbnails in the article list.

This article will delve into how to manage and utilize article thumbnails in Anqi CMS, and provide detailed template code examples to make your article list more attractive.

Understand the 'origin and development' of article thumbnails

In AnQi CMS, there are many ways to generate and manage article thumbnails:

1. Manual upload:When you publish documents or edit articles under "Content Management" in the background, you can manually upload an image as a thumbnail for the article in the "Document Images" area.This is the most direct and recommended way to ensure that the thumbnail is highly relevant and beautiful.
2. Automatically extract:If you do not manually upload a thumbnail when publishing an article, but the article content contains images, Anqicms will 'intelligently' extract the first image from the article content as the thumbnail of the article.
3. Default thumbnail: If the article does not have a thumbnail manually uploaded and does not contain any images in the content, the system will call the default thumbnail preset in the "background settings" -> "content settings".This ensures that the article list maintains a consistent visual presentation even without a specific thumbnail, avoiding blank spaces.

All uploaded images, including thumbnails, will be concentrated under 'Page Resources' under 'Image Resource Management' for easy viewing and management.

The core of displaying thumbnails in the article list - template tagsarchiveList

The article list page is the most common and most important scene for displaying thumbnails. Anqi CMS template system provides powerfularchiveListLabel to flexibly retrieve article list data. InarchiveListwe can easily access the thumbnail information of each article in the loop.

Here are the key steps and code examples for implementing the thumbnail display of article lists:

1. Prepare the template file:通常，文章列表会显示在首页（index/index.html), category list page ({模型table}/list.htmlormobile/{模型table}/list.htmlOr search result page (search/index.html）et al. You need to modify the template file accordingly.

2. UsearchiveListTag to retrieve article data: archiveListThe tag allows you to get a list of articles based on various conditions such as category, model, sorting method, and more. Under the tag'sforthe loop,itemThe variable represents the data of each article, which includes the thumbnail information we need.

The most commonly used thumbnail field isitem.Thumb(Thumbnail of the article cover) anditem.Logo(Article cover main image). Usuallyitem.ThumbIt will be processed by the system into a size more suitable for list display, whileitem.LogoIt could be the original large image uploaded.

Code example:Below is a basicarchiveListLoop, demonstrate how to integrate article thumbnails:

`twig {# Assuming you are in an article list template, such as archive/list.html or index.html #}

{# 使用 archiveList 标签获取文章列表。type="page" 用于分页，limit控制每页数量 #}
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <article class="article-item">
        <a href="{{ item.Link }}" class="article-link">
            {# 检查是否存在缩略图。推荐使用 item.Thumb #}
            {% if item.Thumb %}
                <div class="article-thumbnail">
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" loading="lazy" /> {# loading="lazy"有助于图片懒加载，优化性能 #}
                </div>
            {% else %}
                {# 如果没有缩略图，可以显示一个默认的占位图片。请替换为您自己的默认图片路径 #}
                <div class="article-thumbnail article-thumbnail-placeholder">
                    <img src="/public/static/images/default-thumbnail.jpg" alt="{{ item.Title }} 暂无图片" loading="lazy" />
                </div>
            {% endif %}

            <div class="article-info">
                <h2 class="article-title">{{ item.Title }}</h2>
                <p class="article-description">{{ item.Description }}</p>
                <div class="article-meta">
                    <span>发布于: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>浏览量: {{ item.Views }}</span>
                </div>
            </div>
        </a>
    </article>
    {% empty %}
    <p>暂无文章内容。</p>
    {% endfor %}
{% endarchiveList %}

{# 如果是分页列表，别忘了添加分页标签 #}
<div class="pagination-container">
    {% pagination pages with show="5" %}
        {# 这里是分页的HTML结构，例如首页、上一页、页码列表、下一页、尾页等 #}
        <ul>
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            </li>
            {% if pages.PrevPage %}
            <li class="page-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
            {% endif %}
            {% for pageItem in pages.Pages %}
            <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                <a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
            </li>
            {% endfor %}
            {% if pages.NextPage %}
            <li class="page-item"><a href="{{pages.NextPage.Link}}">{{