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

A 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 article theme, and thus improve click-through rate and optimize user experience.AnQi CMS provides flexible and powerful features, helping us easily implement displaying article thumbnails in the article list.

This article will delve into how to manage and utilize article thumbnails in the 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 multiple ways to generate and manage article thumbnails:

  1. Manual upload:When you are in the background under 'Content Management' and 'Publish Document' or editing an article, you can manually upload an image as the thumbnail for the article in the 'Document Image' area.This is the most direct and recommended way, ensuring that the thumbnail is highly relevant and aesthetically pleasing to the article content.
  2. Automatically extract:If you do not manually upload a thumbnail when publishing an article, but the article content contains images, the Safe CMS will 'intelligently' extract the first image from the article content as the thumbnail for the article.
  3. Default thumbnail:If the article does not have a manually uploaded thumbnail and no images are included in the content, the system will use the default thumbnail preset in the 'Backend Settings' -> 'Content Settings'.This ensures that the article list maintains a consistent visual presentation even without a specific thumbnail, avoiding any blank spaces.

All uploaded images, including thumbnails, will be concentrated under "Page Resources" -> "Image Resource Management", for your unified viewing and management convenience.

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

The article list page is the most common and important scenario for displaying thumbnails. The template system of Anqi CMS provides powerfularchiveListTags, used to flexibly retrieve article list data. InarchiveListthe loop body, we can easily access the thumbnail information of each article.

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

1. Prepare the template file:Generally, the article list is displayed on the homepage (index/index.html), the category list page ({模型table}/list.htmlormobile/{模型table}/list.html) or search results page (search/index.html) etc. You need to make the necessary changes in the corresponding template file.

2. UsearchiveListGet article data by tag: archiveListTags allow you to get a list of articles based on various conditions such as categories, models, sorting methods, and more. In the tag'sforin the loop,itemThe variable represents the data of each article, which includes the thumbnail information we need.

The most commonly used thumbnail field isitem.Thumb(article cover thumbnail) anditem.Logo(Article cover first image). Usuallyitem.Thumbit will be processed by the system into a size more suitable for list display, anditem.Logoit may be the original large image uploaded.

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

This is an English translation of the content: 'twig {# Assume 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}}">{{