AnQiCMS模板中，如何通过过滤器获取上传图片的不同尺寸缩略图地址？

在使用安企CMS（AnQiCMS）进行网站内容运营时，图片管理和优化是提升用户体验、加速页面加载速度以及改善SEO表现的关键一环。特别是在模板开发过程中，我们经常会遇到需要获取不同尺寸缩略图地址的需求。安企CMS以其简洁高效的设计理念，提供了一套直观的方式来处理这些问题。

今天我们就来深入探讨，在AnQiCMS的模板中，如何巧妙地运用内置的过滤器来获取我们上传图片的不同尺寸缩略图地址。

图片在 AnQiCMS 中的旅程：从上传到展示

在AnQiCMS中，无论是通过文档管理、分类管理还是图片资源库上传的图片，系统都会根据一套预设的规则进行处理。当我们上传一张原始图片时，AnQiCMS会智能地生成一个或多个版本的缩略图，以适应网站前端的各种展示需求。

这个“智能生成”的背后，离不开AnQiCMS后台的内容设置。您可以在后台的 后台设置 -> 内容设置 中找到 缩略图处理方式 和 缩略图尺寸 等选项。在这里，您可以定义系统生成缩略图的默认宽度、高度以及裁剪模式（例如按最长边等比缩放、按最短边裁剪等）。这些设置决定了 thumb 过滤器在调用时所返回的缩略图的具体尺寸和外观。

举个例子，如果您的网站需要在一个小卡片中展示50x50像素的缩略图，而在详情页中需要展示200x200像素的图，您需要理解的是，thumb 过滤器默认会返回一套您在后台“内容设置”中配置好的标准缩略图尺寸。如果确实需要在服务器端生成多种固定尺寸的缩略图（例如同时需要50x50和200x200），AnQiCMS的 thumb 过滤器默认并不支持直接传入尺寸参数动态生成。它会提供您在后台配置的那个“标准缩略图”。不过，这并不意味着我们无法在前端实现不同尺寸的展示，更多是通过CSS进行灵活控制。

揭秘 thumb 过滤器：如何获取缩略图地址

AnQiCMS的模板引擎支持类似Django的语法，其中过滤器（Filters）是处理变量输出的强大工具。要获取上传图片的缩略图地址，我们需要用到 thumb 过滤器。

它的基本使用方法非常简洁：只需将图片字段作为变量，并通过管道符 | 连接 thumb 过滤器即可。

{{ 图片地址 | thumb }}

下面我们通过几个常见的场景来具体看看它的应用：

1. 获取文档、分类或单页的封面缩略图

在文档详情页、分类列表或单页内容中，我们经常会调用其封面图片（通常是 Logo 或 Thumb 字段）。这些字段本身存储的可能是原始图片地址，通过 thumb 过滤器，我们就能轻松获取到处理后的缩略图地址。

{# 获取当前文档的封面首图缩略图 #}
<img src="{{ archive.Logo | thumb }}" alt="{{ archive.Title }}" />

{# 获取当前分类的缩略图 #}
<img src="{{ category.Thumb | thumb }}" alt="{{ category.Title }}" />

{# 获取某个单页的封面缩略图 #}
{% pageDetail pageLogo with name="Logo" id="1" %}
<img src="{{ pageLogo | thumb }}" alt="单页标题" />

2. 处理组图中的每张图片

有些内容模型支持组图（例如 Images 字段），它会返回一个图片地址数组。这时，我们需要结合 for 循环来遍历每张图片，并对每张图片应用 thumb 过滤器。

{# 假设 archive.Images 是一个图片地址数组 #}
<div class="gallery">
    {% for imgUrl in archive.Images %}
        <img src="{{ imgUrl | thumb }}" alt="图片描述" />
    {% endfor %}
</div>

3. 获取其他模块（如 Banner）的图片缩略图

Banner通常也会有图片字段（如 item.Logo），同样可以使用 thumb 过滤器。

{% bannerList banners %}
    {% for item in banners %}
        <a href="{{item.Link}}" target="_blank">
            <img src="{{ item.Logo | thumb }}" alt="{{item.Alt}}" />
        </a>
    {% endfor %}
{% endbannerList %}

理解“不同尺寸”的实践

正如前文所提及，thumb 过滤器输出的缩略图地址，其具体尺寸是由后台“内容设置”中统一配置的。如果您的需求是在前端不同位置显示同一张图片的不同“视觉尺寸”，最推荐且灵活的方式是结合CSS样式来控制。

例如，您可以在CSS中为图片设置