dede调用多张图片

在文章列表页（list_article.htm）循环调用每篇文章的多张缩略图

这是最常见的需求,比如做一个图文资讯列表，每篇文章显示一张主图和几张小图。

核心思路：

1. 修改文章模型：确保你的文章模型开启了“多图”字段。
2. 修改文章发布页：在发布文章时，上传多张图片，并勾选“生成多缩略图”。
3. 修改列表模板：使用Dede的特定标签 {dede:imglist} 和 {dede:imglink} 在列表模板中循环调用。

详细步骤：

第1步：检查并修改文章模型

1. 登录DedeCMS后台。
2. 进入 核心 -> 内容模型管理。
3. 找到并点击你正在使用的文章模型（通常是“普通文章”）。
4. 在模型字段管理中,找到 litpic 字段（缩略图）。
5. 关键操作：勾选 “启用多缩略图” 选项，这个选项非常重要，它决定了系统是否会为每篇文章生成多张缩略图数据。
6. 保存设置。

第2步：发布文章时上传多图

1. 进入 后台 -> 新增文档，编辑器中，上传图片时，点击“上传多图”按钮。
2. 上传你需要的所有图片（比如3-5张）。
3. 关键操作：在上传图片的弹窗中，务必勾选“生成多缩略图”。
4. 发布文章,系统不仅会生成一张主缩略图 (litpic)，还会为这篇文章生成一组多图数据。

第3步：修改列表模板 (list_article.htm)

打开你的列表模板文件,在需要显示多图的地方，使用以下代码：

{dede:list pagesize='10'}
    <div class="list-item">
        <!-- 方法1：只显示第一张多图（作为主图） -->
        <a href="[field:arcurl/]">
            <img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]">
        </a>
        <!-- 方法2：循环显示所有多图（推荐） -->
        <div class="multi-images">
            {dede:imglist}
            <a href="[field:arcurl/]">
                <img src="[field:imgsrc/]" alt="[field:title function='html2text(@me)'/]">
            </a>
            {/dede:imglist}
        </div>
        <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
        <p>[field:description function='cn_substr(@me, 100)'/]...</p>
    </div>
{/dede:list}

代码解释：

• {dede:list}: 文章列表循环标签。
• {dede:imglist}: 核心标签，用于循环调用当前文章的多张图片，这个标签必须在 {dede:list} 循环内部使用。
• [field:imgsrc/]: 获取单张图片的路径。
• [field:arcurl/]: 获取文章的链接地址。
• [field:title/]: 获取文章标题。

CSS 样式建议：

为了让多图排列整齐,你可以在CSS文件中添加一些样式：

.list-item {
    margin-bottom: 20px;
    border: 1px solid #eee;
    padding: 10px;
}
.multi-images {
    display: flex; /* 使用Flex布局 */
    gap: 5px; /* 图片之间的间距 */
    margin-bottom: 10px;
}
.multi-images img {
    width: 100px; /* 设置固定宽度 */
    height: 75px; /* 设置固定高度 */
    object-fit: cover; /* 保持图片比例并填充区域 */
    cursor: pointer;
}

页（article_article.htm）调用当前文章的多张图片

你可能想在文章详情页,除了正文内容外，再单独展示一组上传的多图。

核心思路：页模板中使用 {dede:imglist} 标签，它会自动获取当前文章的多图数据。

详细步骤：

第1步和第2步：与场景一完全相同，确保模型已开启多图，并且文章发布时已上传多图并生成缩略图。

第2步：修改内容页模板 (article_article.htm) 页模板中，找到你想要显示多图的位置，插入以下代码：

<div class="article-gallery">
    <h3>相关图片</h3>
    {dede:imglist}
    <a href="[field:imgsrc/]" data-lightbox="gallery">
        <img src="[field:imgsrc/]" alt="[field:title function='html2text(@me)'/]">
    </a>
    {/dede:imglist}
</div>

代码解释：

• {dede:imglist}: 在内容页中，这个标签会自动解析当前文章的多图数据，无需任何额外参数。
• data-lightbox="gallery": 这是一个常用的图片灯箱效果属性，点击图片可以放大查看，你需要引入 lightbox 的 JS 和 CSS 库才能生效。

CSS 样式建议：

.article-gallery {
    margin: 30px 0;
    border-top: 1px dashed #ccc;
    padding-top: 20px;
}
.article-gallery h3 {
    margin-bottom: 15px;
}
.article-gallery a {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}
.article-gallery img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #ddd;
}

使用自定义模型并调用自定义多图字段

如果你创建了一个自定义的模型（产品模型”），并添加了一个类型为“图片集”的字段（pics），那么调用方法会略有不同。

核心思路：

使用 {dede:field name='pics'} 标签获取图片集的字符串，然后用PHP代码进行解析和循环输出。

详细步骤：

第1步：创建自定义模型和字段

1. 核心 -> 内容模型管理 -> 添加新模型。
2. 模型名称填写“产品”，数据表前缀使用默认的 dede_addonarticle。
3. 进入模型管理,添加一个新字段。
   • 字段名：pics
   • 字段类型：图片集
   • 其他选项根据需要填写。
4. 保存。

第2步：发布内容

发布该模型的内容时,你会看到一个“图片集”的输入框，点击上传多图即可。

第3步：修改内容页模板 (article_product.htm)

在模板中使用以下代码：

<div class="product-gallery">
    {dede:field name='pics' function='GetImgUrls(@me)'/}
    {dede:imglist}
    <a href="[field:imgsrc/]" data-lightbox="product">
        <img src="[field:imgsrc/]" alt="[field:title function='html2text(@me)'/]">
    </a>
    {/dede:imglist}
</div>

代码解释：

• {dede:field name='pics'}: 获取图片集字段的内容，它是一个包含图片路径和描述的字符串，格式如 imgsrc='/uploads/1.jpg|imgtext='图片一'',imgsrc='/uploads/2.jpg|imgtext='图片二''。
• function='GetImgUrls(@me)': 这是一个自定义函数，它的作用是将上面的字符串解析成一个可以被 {dede:imglist} 识别的格式。这个函数通常需要你手动写到 /include/extend.func.php 文件中。

GetImgUrls 函数不存在，你需要创建它：

1. 打开 /include/extend.func.php 文件。
2. 在文件末尾添加以下PHP代码：

/**
 * 处理自定义图片集字段
 * @param string $imgstr 图片集字符串
 * @return string 返回可以被{dede:imglist}识别的HTML
 */
function GetImgUrls($imgstr) {
    if(empty($imgstr)) return '';
    $dtp = new DedeTagParse();
    $dtp->SetNameSpace('field', '[', ']');
    $dtp->LoadSource($imgstr);
    $images = '';
    if(is_array($dtp->CTags)){
        foreach($dtp->CTags as $ctag){
            if($cttag->GetName() == 'img'){
                $images .= '<img src="'.$ctag->GetAtt('imgsrc').'" alt="'.$ctag->GetAtt('alt').'">';
            }
        }
    }
    return $images;
}

注意：在DedeCMS 5.7及以上版本，{dede:imglist} 标签可以直接解析图片集字符串，所以很多时候你甚至不需要 GetImgUrls 函数，直接使用场景二中的 {dede:imglist} 即可，但加上这个函数可以增加兼容性。

总结与排错

常见问题排查：

1. 调用不出来图片：

   • 100% 是因为 没有在发布文章时勾选“生成多缩略图”，这是最最最常见的原因。
   • 检查模型是否开启了“启用多缩略图”。
   • 检查模板标签是否写错,特别是 {dede:imglist} 是否在 {dede:list} 循环内部。
   • 检查图片路径是否正确,是否存在。

2. 只显示一张图片：

   这说明你只上传了一张图片,或者只勾选了一张图生成缩略图，请确保上传多张图片并全部勾选。

希望这份详细的指南能帮助你成功在DedeCMS中调用多张图片！