cms list_image模板如何调用？

list_image 模板是帝国CMS中一个非常实用的功能，它主要用于在列表页（如新闻列表、产品列表等）中，以缩略图的形式展示内容，相比于普通的 list 模板，它直接输出 <img> 标签，非常适合制作图片墙、产品展示、图文列表等。

list_image 模板的核心作用

list_image 模板就是 “列表图片模板”，当你需要在列表页循环输出每条信息的 主附表中的图片字段 时，就使用它。

它的核心流程是：

1. 遍历当前栏目下的所有信息。
2. 对于每一条信息,获取其指定的图片字段（通常是 newstext 字段）。
3. 从该字段中提取第一张图片（或你指定的图片）。
4. 将图片输出为一个 <img> 标签，并自动链接到该信息的详情页。

如何创建 list_image 模板

这个模板不是在模板管理里直接创建的,而是 “附加” 在一个普通的列表模板（list 模板）上的。

步骤如下：

1. 进入后台 -> 模板 -> 管理列表模板。
2. 找到你想要修改的栏目,点击对应的 “管理列表模板” 或 “修改” 按钮。
3. 在列表模板管理页面,你会看到几个输入框：
   • list.var (列表内容模板变量)
   • list (列表内容模板)
   • listimage (列表图片模板) <-- 就是这里！
4. 在 listimage 输入框中，填写你的图片HTML代码。

listimage 模板中的变量

在 listimage 模板中，你可以使用一些特殊的变量来动态生成内容：

• <!--$r-->：核心变量，代表当前循环到的这条信息，通过 $r[字段名] 可以获取该信息的具体值。
• <!--$no-->：序号变量，代表当前是第几条信息，从1开始。
• <!--$classname-->：栏目名变量，代表当前栏目的名称。
• <!--$classid-->：栏目ID变量，代表当前栏目的ID。

最常用的变量组合：

• <!--$r[title]-->：信息的标题。
• <!--$r[titleurl]-->：信息的链接地址。
• <!--$r[smalltext]-->：信息的简介。
• <!--$r[newstime]-->：信息的发布时间。
• <!--$r[titlepic]-->：非常关键！ 如果信息有设置标题图片（在发布信息时，“标题图片”字段），这个变量会直接获取该图片的地址。这是最简单、最高效的方式。

实战案例

假设我们要做一个产品列表页,每条产品显示一张缩略图、标题和简介。

图片”字段（推荐）

这是最简单、性能最好的方法。

1. 发布信息时：在发布产品信息时，务必填写“标题图片”这个字段。

2. 编写 listimage 模板代码： 在后台的 listimage 输入框中，填入以下代码：

   <li>
       <a href="<!--$r[titleurl]-->" title="<!--$r[title]-->">
           <img src="<!--$r[titlepic]-->" alt="<!--$r[title]-->" width="200" height="150" />
       </a>
       <h3><a href="<!--$r[titleurl]-->"><!--$r[title]--></a></h3>
       <p><!--$r[smalltext]--></p>
   </li>

   代码解析：

   • <a href="<!--$r[titleurl]-->">...</a>：将整个图片和标题都链接到产品详情页。
   • <img src="<!--$r[titlepic]-->">：直接调用信息发布时填写的“标题图片”。
   • alt="<!--$r[title]-->"：为图片添加alt属性，SEO友好。
   • width="200" height="150"：固定图片显示尺寸，防止页面布局错乱。

正文（newstext）中提取第一张图片

如果你的图片是放在正文里的,或者你没有使用“标题图片”字段，就需要用这个方法。

1. listimage 模板代码： 在后台的 listimage 输入框中，填入以下代码：

   <li>
       <a href="<!--$r[titleurl]-->" title="<!--$r[title]-->">
           [!---下面这行是核心，调用正文第一张图---]
           <img src="[!---下面这个系统函数会自动提取正文第一张图---]" alt="<!--$r[title]-->" width="200" height="150" />
       </a>
       <h3><a href="<!--$r[titleurl]-->"><!--$r[title]--></a></h3>
       <p><!--$r[smalltext]--></p>
   </li>

   等等！ 上面的代码是错误的，[!---...---] 不是有效的模板语法。

   正确的写法是使用帝国CMS的 GetFirstPic 函数：

   <li>
       <a href="<!--$r[titleurl]-->" title="<!--$r[title]-->">
           <!---下面这行是核心，调用正文第一张图--->
           <img src="[!---下面这个系统函数会自动提取正文第一张图---]" alt="<!--$r[title]-->" width="200" height="150" />
       </a>
       <h3><a href="<!--$r[titleurl]-->"><!--$r[title]--></a></h3>
       <p><!--$r[smalltext]--></p>
   </li>

   修正后的正确代码：

   <li>
       <a href="<!--$r[titleurl]-->" title="<!--$r[title]-->">
           <!---使用系统函数提取正文第一张图，并指定默认图片--->
           <img src="[e:loop={0,1,0,0,'isgood=1'}]
                    <!---循环体开始--->
                    <?php
                    $fr=$empire->fetch1("select newstext from {$dbtbpre}ecms_news_data_{$r[stb]} where id='$r[id]'");
                    $titlepic = GetFirstPic($fr[newstext]);
                    if(empty($titlepic)) $titlepic = '/skin/default/images/nopic.gif'; // 如果没有图片，使用默认图片
                    ?>
                    <!---循环体结束--->
                    "
                    src="<?=$titlepic?>"
                    "
                    alt="<!--$r[title]-->" width="200" height="150" />
       </a>
       <h3><a href="<!--$r[titleurl]-->"><!--$r[title]--></a></h3>
       <p><!--$r[smalltext]--></p>
   </li>

   代码解析：

   • 这段代码比场景一要复杂,因为它需要在模板内部执行一小段PHP代码。
   • GetFirstPic($fr[newstext])：这是帝国CMS的一个核心函数，专门用于从一段HTML文本（$fr[newstext]）中提取出第一张图片的地址。
   • if(empty($titlepic)) $titlepic = '/skin/default/images/nopic.gif';：这是一个重要的健壮性判断，如果正文里没有图片，$titlepic 会是空的，此时就给你一个默认的“无图片”占位符，避免页面显示破损。
   • 注意：这种写法在 listimage 模板中有时可能不被官方直接支持，更推荐的方式是使用 “自定义列表模板” 或 “灵动标签 (e:loop)” 来实现，但对于很多老版本的帝国CMS，这种方法在 listimage 中是可行的。

常见问题与最佳实践

1. 图片尺寸不统一？

   • 解决方法：在 <img> 标签中强制设置 width 和 height 属性，如 width="200" height="150"，虽然可能会拉伸图片，但能保证布局稳定，更好的方法是使用CSS的 object-fit: cover;。

2. 没有图片时显示空白或破损图标？

   • 解决方法：务必使用场景二中的 if(empty($titlepic)) 判断，设置一个默认图片（如 /skin/default/images/nopic.gif）。

3. listimage 和 list 模板有什么区别？

   • list：输出的是一条信息的 所有文字内容、简介、时间等），由你在 list.var 模板里定义输出格式。
   • listimage：只输出一张图片（及其链接），图片内容由系统自动从指定字段获取，它简化了只显示图片的需求。

4. 性能考虑

   • 首选场景一：使用“标题图片”字段，因为这是直接读取一个字段值，速度最快。
   • 慎用场景二：从正文中提取图片需要执行额外的PHP函数 GetFirstPic，如果列表数据量很大，会对服务器造成一定压力，如果必须用，确保你的服务器配置足够好。

希望这份详细的指南能帮助你完全掌握 list_image 模板的调用！