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

In AnQi CMS, to make your website's content list page more attractive, it is crucial to display a prominent thumbnail for each article or product to enhance user experience and the aesthetic beauty of the page.This not only helps visitors quickly understand the content topic, but also effectively improves click-through rate.AnQiCMS provides an intuitive and powerful template tag feature, allowing you to easily achieve this goal on the list page.

The core feature revelation:archiveListTags and thumbnails

In AnQiCMS, to achieve this goal, we mainly rely on the powerfularchiveList.archiveListTags are the core tools for retrieving and displaying lists of various types of content such as articles, products, and more. Whether you need to display the latest articles, popular products, or content under a specific category, archiveListcan be flexibly handled.

InarchiveListIn the loop, the data of each article is assigned to a variable (usuallyitem), which contains a field namedThumb, which is the address of the article thumbnail.item.ThumbThe thumbnail URL of the article processed by the system will be output directly.

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

We will guide you through specific steps on how to usearchiveListtags to display the thumbnail of each article.

Step 1: Determine your list page template file

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

  • Article list page: archive/list.htmlOr for specific categories:archive/list-{分类ID}.html
  • Product list page: product/list.htmlorproduct/list-{分类ID}.html
  • Or your custom model's list page.

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 two: callarchiveListTags retrieve article data

In the list page template file, you will usearchiveListLabel to retrieve the list of article data. This label can be used according to your needs to filter and sort content through different parameters. For example, to get a model (such as the article model, itsmoduleIdThe 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 article list data retrieved. You can customize this variable name.
  • moduleId="1"It indicates getting the content of the article model under ID 1 (the article model is usually set to 1 by default, the product model is set to 2 by default, you can check the specific content model in the background).
  • type="page"Enable pagination functionality so that you can cooperatepaginationThe label displays the page number.
  • limit="10"Sets 10 articles per page.

Step 3: Extract and display thumbnails

After obtaining the list of article data, we can display it inarchiveListthe loop of the label (i.e.{% for item in archives %}and{% endfor %}Extract the thumbnail address of each article. Use{{item.Thumb}}to obtain the thumbnail URL and place it in<img>label'ssrcthe attribute.

We strongly recommend you for better user experience and SEO:

  • Add conditional judgment:Use{% if item.Thumb %}Check if the article has a thumbnail. If not, display a default placeholder to avoid blank or broken icons on the page.
  • Improvealtattribute:In<img>the tag withaltthe property, and using{{item.Title}}As its value, this is not only friendly to search engines, but also provides text descriptions when the image fails to load.
  • Add CSS class:With<img>Add a CSS class to the tag (for example,article-thumbnail），convenient for you to style thumbnails with CSS.

Complete code example

Integrate the above steps, a typical list page thumbnail display code may be as follows：

"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