How to use the `archiveList` tag to display the thumbnail of each article on the list page?

In AnQi CMS, to make your website content list page more attractive, showing an eye-catching thumbnail for each article or product is the key to enhancing user experience and page aesthetics.This not only helps visitors quickly understand the content topic, but also effectively improves the click-through rate.AnQiCMS provides an intuitive and powerful template tag feature, allowing you to easily achieve this goal on the list page.

Reveal the core features:archiveListTags and Thumbnails

in AnQiCMS, we mainly rely on the powerfularchiveListLabel.archiveListTags are core tools for obtaining and displaying lists of various types of content such as articles, products, etc. Whether you need to display the latest articles, popular products, or content under a specific category,archiveListThey can all respond flexibly.

InarchiveListin the loop, the data of each article will be assigned to a variable (usuallyitem), which contains a field namedThumb, it is the address of the article thumbnail.item.ThumbIt will directly output the thumbnail URL of the article after system processing.

Step-by-step operation: Display thumbnails on the list page.

Next, we will guide you through the specific steps on how to use the template file on the list page to displayarchiveListthe thumbnails of each article.

First step: Determine your list page template file

First, you need to find the template file responsible for rendering the content list. According to AnQiCMS's template conventions, the list page template is usually located/templateIn the folder of the template theme you are using under the directory, and follow the specific naming rules, for example:

  • Article list page: archive/list.htmlOr for a specific category:archive/list-{分类ID}.html
  • Product list page: product/list.htmlorproduct/list-{分类ID}.html
  • or the list page corresponding to your custom model.

Confirm the template file you want to modify, and use the "Template Design" feature in the background or edit it through FTP/SSH tools.

Step 2: CallarchiveListTag to get article data

In the list page template file, you will usearchiveListTag to get article list data. This tag can be used to filter and sort content according to your needs. For example, to get a specific model (such as an article model, whichmoduleIdThe pagination list under 'usually 1）：'

{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {# 在这里循环处理每篇文章数据 #}
{% endarchiveList %}

In the above code:

  • archivesIs a variable name used to store the list of article data obtained. You can customize this variable name.
  • moduleId="1"Represents the content of the article model with ID 1 (the article model is usually set to 1 by default, and the product model to 2, which can be viewed in the "Content Model" on the backend).
  • type="page"Enable pagination feature, so you can work withpaginationtag display page number.
  • limit="10"Set to display 10 articles per page.

Step 3: Extract and display thumbnails

After obtaining the list of article data, we canarchiveListinside the loop of tags (i.e.,{% for item in archives %}and{% endfor %}) to get the thumbnail address of each article. Use{{item.Thumb}}You can get the thumbnail URL and place it in<img>Tagssrcin attributes.

To provide a better user experience and SEO, we strongly recommend that you:

  • Add conditional judgment:Use{% if item.Thumb %}Determine if the article has a thumbnail. If not, display a default placeholder image to avoid blank or broken icons on the page.
  • ImprovealtProperties:In<img>tag.altattribute, and using{{item.Title}}As its value, it is not only friendly to search engines, but also provides text descriptions when the image fails to load.
  • Add a CSS class:response for<img>Add a CSS class to the tag (for example)article-thumbnail），方便您通过CSS对缩略图进行样式控制。

Complete code example

将以上步骤整合起来，一个典型的列表页缩略图展示代码可能如下：

"twig {# 假设您正在编辑的是文章列表页模板，例如archive/list.html

{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}" class="article-link">
            {% if item.Thumb %}
            <img src="{{item.Thumb}}" alt="{{item.Title}}" class="article-thumbnail">
            {% else %}
            {# 如果文章没有缩略图，可以显示一个默认占位图，请确保路径正确 #}
            <img src="/public/static/images/default-thumbnail.jpg" alt="默认缩略图" class="article-thumbnail">
            {% endif %}
            <h3 class="article-title">{{item.Title}}</h3>
            <p