如何自定义显示文章或产品的缩略图和封面图片？

在网站内容运营中，图片的视觉吸引力至关重要。无论是展示文章的精髓，还是突显产品的亮点，合适的缩略图和封面图片都能大幅提升用户体验，并对内容的传播效果产生积极影响。安企CMS（AnQiCMS）提供了丰富且灵活的功能，让我们可以根据具体需求，轻松自定义文章或产品的图片显示方式。

本文将从后台配置和模板调用两个方面，详细介绍如何在安企CMS中管理和展示缩略图及封面图片。

一、后台配置：全局设置与内容管理

在使用图片之前，了解安企CMS后台是如何处理和管理图片的非常重要。这些设置将直接影响图片在前端的显示效果。

1. 全局内容设置：统一图片处理策略

在安企CMS的后台管理界面，进入“后台设置”下的“内容设置”部分，你会发现一系列与图片处理相关的选项。这些设置旨在帮助我们自动化图片的优化工作，确保网站图片的加载速度和显示质量。

  • 缩略图处理方式：这里提供了多种缩放模式，例如“按最长边等比缩放”会保证图片完整性并自适应尺寸，“按最短边裁剪”则会居中裁剪以填满预设的宽高。根据网站的整体设计风格和图片展示需求，选择最适合的方式，以避免图片变形或出现不必要的留白。
  • 缩略图尺寸：这是一个非常实用的设置项。你可以根据网站前端布局中缩略图的实际显示大小，设置一个推荐的宽度和高度。安企CMS会根据你选择的缩略图处理方式，将上传的图片自动生成符合该尺寸的缩略图版本。合理设置可以有效减少图片文件大小，加快页面加载速度。
  • 默认缩略图：当文章或产品没有单独上传缩略图时，系统可以自动引用这里设置的默认图片。这对于保持网站视觉风格的统一性非常有帮助，确保即使没有指定图片的内容也能有视觉元素。
  • 是否自动压缩大图及指定宽度：如果你的网站内容频繁上传高分辨率图片，开启此功能可以自动将过大的图片压缩到指定宽度，从而节省存储空间并提升网站性能。这项设置对于移动端用户尤其友好，可以减少流量消耗。
  • 是否启动Webp图片格式：Webp是一种更高效的图片格式，能以更小的文件体积提供同等甚至更好的图片质量。启用此功能后，新上传的JPG、PNG图片会自动转换为Webp格式，进一步优化网站加载速度。
  • 批量重新生成缩略图：如果你修改了缩略图的尺寸设置，可以使用这个功能对全站图片进行批处理，确保所有旧图片都能按新规则生成相应的缩略图版本。

2. 内容编辑页面的图片管理：灵活上传与自动提取

在具体创建或编辑文章、产品、分类、单页时，安企CMS提供了直观的界面来管理相关图片。

  • 文章/产品缩略图：在发布文章或产品时，你可以直接上传图片作为其缩略图。值得一提的是，即使你没有手动上传，如果文章内容中包含图片，安企CMS也能智能地自动提取内容中的第一张图片作为缩略图，省去了不少手动操作的麻烦。
  • 分类/单页的Banner图与缩略图：对于分类页面或独立的单页（如“关于我们”），你可以专门上传“Banner图”用于页面顶部的横幅展示，以及“缩略图”用于分类列表或导航中的小图显示。这些图片通常有特定的设计要求，可以根据页面布局进行上传。
  • 图片资源库：所有上传的图片都会汇集到“页面资源”下的“图片资源管理”中。你可以在这里进行图片的分类管理、批量删除、替换等操作，甚至查看图片的原始大图、文件信息等，实现对图片资产的集中化管理。

二、模板调用：灵活展示图片数据

后台配置决定了图片如何被处理和存储，而前端模板则决定了这些图片如何被展示给用户。安企CMS的模板引擎类似Django，通过特定的标签和变量，我们可以非常灵活地调用各种图片数据。

1. 基础图片字段解析

无论是文章、产品、分类还是单页，安企CMS都提供了几个核心的图片字段供模板调用：

  • Logo：通常指内容的封面首图或分类/单页的大图，例如文章列表中的主图。
  • Thumb：指内容的缩略图，通常是经过系统处理后的小尺寸图片，适用于列表页等场景。
  • Images：如果内容支持多图展示（如产品的组图、分类或单页的Banner轮播），这个字段会返回一个图片URL数组，需要通过循环来展示。

2. 调用文章/产品图片

在文章详情页或列表页，我们可以使用archiveDetail或archiveList标签来获取图片。

  • 获取文章详情页的封面首图和缩略图： 
    
{% archiveDetail with name="Title" %}
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
  • 获取文章列表的封面首图和缩略图： 
    
{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <a href="{{item.Link}}">
        <h5>{{item.Title}}</h5>
        {% if item.Logo %} {# 判断Logo是否存在 #}
            <img src="{{item.Logo}}" alt="{{item.Title}}" />
        {% endif %}
        {% if item.Thumb %} {# 判断Thumb是否存在 #}
            <img src="{{item.Thumb}}" alt="{{item.Title}}" />
        {% endif %}
    </a>
    {% endfor %}
{% endarchiveList %}
  • 获取文章/产品的组图（Images）：Images通常是一个图片URL列表，需要通过for循环遍历。 
    
{% archiveDetail archiveImages with name="Images" %}
<div class="product-gallery">
    {% for imgUrl in archiveImages %}
        <img src="{{imgUrl}}" alt="产品图片" />
    {% endfor %}
</div>

3. 调用分类图片

在分类详情页或导航中，使用categoryDetail或categoryList标签获取图片。

  • 获取分类详情页的Banner图和缩略图： 
    
<h1 class="category-title">{% categoryDetail with name="Title" %}</h1>
{% categoryDetail categoryBanner with name="Images" %} {# Images字段可作为Banner组图 #}
{% if categoryBanner %}
    <div class="category-banner">
        {% for img in categoryBanner %}
            <img src="{{img}}" alt="{% categoryDetail with name="Title" %}" />
        {% endfor %}
    </div>
{% endif %}
<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
<img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />
  • 获取分类列表的缩略图： 
    
{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
    <a href="{{ item.Link }}">
        <span>{{item.Title}}</span>
        {% if item.Thumb %}
            <img src="{{item.Thumb}}" alt="{{item.Title}}" />
        {% endif %}
    </a>
    {% endfor %}
{% endcategoryList %}

4. 调用单页图片

单页的图片调用方式与分类类似，使用pageDetail或pageList标签。

  • 获取单页详情的Banner图和缩略图： “`twig

    {% pageDetail with name=“Title” %}

    {% pageDetail pageBanner with name=“Images” %} {% if pageBanner %}
    {% for img in pageBanner %} {% pageDetail with name= {% endfor %}
    {% endif %} {% pageDetail with name=