dede图片集模型如何使用？

什么是图片集模型？

图片集模型是 DedeCMS 的一种特殊的内容模型,它的核心特点在于：

1. 以图为主，文字为辅：文章的主体是一组或多组图片，文字描述（标题、简介、内容）围绕图片展开。
2. 分组展示：图片可以按照逻辑进行分组，比如一个产品图集可以分为“产品外观”、“产品细节”、“产品应用”等组，每组包含多张图片,这使得图片展示非常有条理。
3. 调用灵活：DedeCMS 为图片集模型提供了专门的调用标签，可以在网站首页、列表页等地方方便地调用缩略图、组图,甚至生成幻灯片。

图片集模型的字段结构

要理解图片集，首先要了解它的字段，在后台“核心” -> “内容模型管理” -> “图片集”中,你可以看到其字段构成。

| 字段名称 | 字段类型 | 说明 | | :--- | :--- | :--- || 单行文本 | 文章的标题，必须填写。 | | | 单行文本 | 用于SEO，多个关键词用英文逗号 分隔。 | | 描述 | 文本区域 | 文章的简短描述，常用于列表页的摘要和SEO的 meta description。 | | 缩略图 | 图片 | 非常重要，这张图片会显示在文章列表页，作为文章的“门面”，它通常是第一组图中的第一张，或者单独上传的代表图。 || HTML文本 | 文章的主体内容，你可以插入 “图片集” 这个特殊的功能。 | | 发布时间 | date | 文章的发布时间。 | | 点击量 | 数字 | 文章的点击次数，可以设置自增。 | | 来源 | 文本 | 文章的来源。 | | 作者 | 文本 | 文章的作者。 | | 图片集 | （核心功能） | 这是一个特殊的表单元素，专门用于管理图片组的。它不在常规的字段列表中，而是在内容编辑页面的核心位置。 |

如何创建和编辑一篇图片集文章？

这是图片集模型最关键的一步。

步骤 1：进入发布页面

在后台“所有档案” -> “添加新文档”，选择“图片集”模型,然后进入编辑页面。

步骤 2：填写基本信息

关键词、描述等基本信息。

步骤 3：上传和管理缩略图

• 点击“缩略图”上传按钮,选择一张最能代表这篇文章的图片。
• 注意：如果文章内容中插入了图片集，并且勾选了“使用第一张图为缩略图”，系统会自动将第一组的第一张图片设为缩略图，否则,你必须手动上传。

步骤 4：编辑内容（核心操作）

编辑器中，不要直接用 img 标签插入图片，你需要使用 DedeCMS 提供的 “图片集” 功能按钮。

1. 定位光标：将光标放在你希望图片集出现的位置。
2. 点击按钮：在编辑器的工具栏中找到一个类似 “图片集” 或 “多图” 的图标（通常是一张小图，上面有多个小方框）。
3. 弹出窗口：点击后会弹出一个“图片集”管理窗口。
4. 上传/选择图片：
   • 上传：你可以直接在本窗口中上传多张图片。
   • 选择：你也可以从“我的媒体库”中选择已有的图片。
5. 分组（可选但推荐）：
   • 在上传/选择图片后,你可以为图片进行分组。
   • 你可以先上传几张“产品外观”的图片，然后点击“新建分组”，再上传几张“产品细节”的图片。
   • 这样在前台展示时，图片就会以分组的形式出现,结构更清晰。
6. 设置参数：
   • /说明：为每张图片添加简短的标题或说明,鼠标悬停时会显示。
   • 图片链接：可以为单张图片设置一个跳转链接。
   • 显示方式：选择图片在前台的展示风格，如“幻灯片”、“大图”、“缩略图列表”等。
   • 每行显示数量：设置一行显示几张缩略图。
7. 插入：设置完成后，点击“插入”按钮，编辑器中就会出现类似 {dede:img ...}...{/dede:img} 这样的代码。

步骤 5：发布文章

检查无误后，点击“保存”或“发布”。

前台如何调用图片集数据？

图片集的魅力在于其灵活的调用，DedeCMS 提供了专门的标签来处理图片集数据。

调用文章列表（带缩略图）

这是最常见的调用方式,比如在首页或栏目页显示最新的图片集。

{dede:arclist row='8' typeid='1' channelid='1' orderby='pubdate'}
    <li>
        <a href="[field:arcurl/]">
            <img src="[field:picname/]" alt="[field:title/]">
            <span>[field:title/]</span>
        </a>
    </li>
{/dede:arclist}

• channelid='1'：这里的 1 是“图片集”模型在 dede_channeltype 表中的 ID，你可以在后台“内容模型管理”中查看并修改。
• [field:picname/]：这个标签专门用于获取文章的缩略图地址。

在文章详情页调用图片集内容

这是最核心的调用,用于展示你分组上传的图片。

<h2>[field:title/]</h2>
<!-- 调用图片集主体内容 -->
[field:body/]
<!-- 如果你想单独控制图片集的样式，可以使用更精确的标签 -->
{dede:img text='图片描述' onclick=''}
    <img src='[field:src/]' alt='[field:text/]' width='600' />
{/dede:img}

更常用和灵活的方式是使用 php 代码来解析图片集数据,以便进行自定义的样式控制。

{dede:field.body/}

上面的标签会直接输出你在后台编辑时插入的图片集 HTML 代码。

更高级的调用（解析图片组）

如果你想用自定义的 CSS 和 JS 来美化图片集（做一个灯箱效果或幻灯片），你需要用 PHP 代码来解析图片数据。

<?php
    // 获取文章内容
    $body = $fields['body'];
    // 使用正则表达式提取图片集数据
    // 注意：这个正则表达式可能需要根据你的 DedeCMS 版本和图片集存储格式进行微调
    preg_match_all('/<img\s[^>]*?src=[\'"]?([^\'" >]+)[\'" >][^>]*?>/i', $body, $img_matches);
    if (isset($img_matches[1]) && !empty($img_matches[1])) {
        $images = $img_matches[1];
        // 现在你有了一个图片地址的数组 $images
        // 可以用循环来输出了
        foreach ($images as $img) {
            echo "<img src='{$img}' class='my-gallery-img' />";
        }
    }
?>

这种方法非常灵活，但需要一定的 PHP 基础。

调用指定文章的图片集（例如在首页推荐某篇文章）

{dede:sql sql="SELECT c.addtable FROM dede_archives a LEFT JOIN dede_addonimages c ON a.id = c.aid WHERE a.id = '123'"}
    {dede:getimg row='10' width='200' height='150'}
        <a href="[field:src/]"><img src="[field:src/]" width="200" height="150" /></a>
    {/dede:getimg}
{/dede:sql}

• SELECT c.addtable ...：首先根据文章 ID 123 找到对应的附加表 dede_addonimages。
• {dede:getimg}：这是一个在附加表内调用图片的标签。
  • row='10'：调用 10 张图片。
  • width 和 height：设置图片的显示尺寸。

注意事项与最佳实践

1. 缩略图是关键：列表页的点击率很大程度上取决于缩略图的质量，务必上传清晰、有吸引力的缩略图。
2. 图片优化：上传的图片建议进行压缩，以保证网站加载速度，可以在后台设置缩略图的生成规则,自动生成不同尺寸的图。
3. 分组清晰：图片数量多时，一定要使用分组功能,这能极大提升用户体验。
4. 模型 ID：调用图片集时，channelid 的值一定要正确,否则调用不到数据。
5. 安全：虽然 DedeCMS 本身有安全机制，但定期检查和更新你的网站，避免使用有漏洞的旧版本,永远是最佳实践。

DedeCMS 的图片集模型是一个功能完备的模块，它通过“内容编辑器中的图片集按钮”和“专门的调用标签”这两个核心部分，构建了一个从后台内容管理到前台数据展示的完整闭环，掌握它的使用方法,能让你轻松制作出专业的图片展示类网站。