dede5.7图集发布模块-DEDE建站-盈思创科技

下面我将从 核心概念、后台发布流程、前台调用方法、常见问题与技巧 四个方面进行全面的讲解。

（图片来源网络，侵删）

核心概念：图集是如何存储的？

在深入操作之前，理解 DedeCMS 图集的数据结构至关重要,这能帮助你更好地调用和修改。

主文章记录 (#@__archives)：
- 每一个图集，首先是一篇“文章”，它拥有文章的所有基本属性，如标题、发布时间、所属栏目、简介等。
- 关键点：文章的内容字段 (body) 不会存放图片,这里通常用来写图集的介绍文字。
附加表 (#@__addonimages)：
- 这是图集的核心数据表，它通过 aid (文章ID) 与 #@__archives 表关联。
- 每一张上传的图片,都会在这个表中生成一条记录。
- 主要字段包括：
  - aid: 关联的文章ID。
  - url: 图片在服务器上的存储路径。
  - ismore: 是否为多图模式下的图片（通常是1）。
  - imgurls: 重要字段，一个文本字段，用于存储所有图片的信息，包括路径、标题、描述等,通常以序列化的JSON格式存储。
图片上传方式：
（图片来源网络，侵删）
- 本地服务器：图片上传到你网站服务器的指定目录（通常是 /uploads/allimg/）。
- 远程/网络图片：通过图片URL地址，将图片下载并保存到你的服务器上，这种方式需要服务器开启 allow_url_fopen 选项。

后台发布图集详细流程

步骤 1：进入图集发布界面

登录 DedeCMS 后台。
在左侧菜单栏，找到 “核心” -> “内容发布” -> “添加图集”。
你也可以先进入一个“图集”类型的栏目，然后点击右上角的 “新增图集” 按钮。

步骤 2：填写基本信息

这部分与普通文章发布类似。

所属栏目：必须选择一个“图集”类型的栏目，如果列表里没有，请先去“栏目管理”中创建。
图集的标题,这是最重要的SEO元素。
TAG标签：为图集设置关键词,方便聚合和搜索。
图集简介：对整个图集的简要描述,会显示在图集列表页。
缩略图：
- 这是图集在列表页显示的“封面图”。
- 你可以点击“远程/本地图片”上传一张代表性的图片作为封面。
- 如果你不手动设置,系统默认会使用你上传的第一张图片作为缩略图。

步骤 3：上传和管理图片（核心步骤）

这是图集发布的关键。

选择上传方式：
- 编辑区域下方，你会看到“图集上传”区域。
- 本地服务器：点击“选择本地图片”，在弹出的窗口中选择你电脑上的图片文件，可以多选，上传后,图片会出现在列表中。
- 远程图片：点击“添加远程图片”，在输入框中粘贴图片的URL地址，可以一次添加多个，DedeCMS 会自动将这些图片下载到你的服务器。
编辑单张图片信息：
- 上传完图片后，每张图片旁边都有一个“修改”按钮。
- 点击“修改”，你可以为单张图片设置：
  - ：鼠标悬停或点击时显示的标题。
  - 图片说明：图片下方的详细描述文字。
  - 排序：数字越小，图片在图集中显示越靠前,你可以通过修改这个数字来调整图片顺序。
设置图集内容：
- 在正文编辑器 (body) 中，你可以输入图集的总体介绍文字。
- 你也可以在正文中插入图片，但通常图集模块会将 #@__addonimages 表中的图片作为图集主体,所以正文内容更多是辅助性的。

步骤 4：发布与预览

填写完所有信息后，点击底部的 “发布” 或 “保存” 按钮。
发布成功后，系统会提示你，你可以点击 “预览” 按钮查看图集在前台的效果。

前台调用图集数据

发布完成后，你需要在前台模板中调用这些数据，DedeCMS 提供了非常灵活的标签。

调用单个图集的所有图片

当你进入一个图集的详情页时，可以使用 {dede:field name='imgurls'/} 来循环输出所有图片。

模板代码示例 (article_image.htm)：

{dede:include filename="head.htm"/}
<h1>{dede:field.title/}</h1>
<div class="intro">
    <p>{dede:field.description function='htmlspecialchars(@me)'/}</p>
</div>
<!-- 图集主体内容 -->
<div class="album-content">
    {dede:field name='imgurls'}
    <div class="img-item">
        <!-- 大图链接，通常指向一个灯箱效果或单独的图片页 -->
        <a href="[field:imgsrc/]" title="[field:text/]">
            <!-- 这里用缩略图来展示，提高加载速度 -->
            <img src="[field:imgsrc function="str_replace('big','small',@me)"/]" alt="[field:text/]">
        </a>
        <p class="img-title">[field:text/]</p>
    </div>
    {/dede:field}
</div>
{dede:include filename="footer.htm"/}

代码解析：

{dede:field name='imgurls'/}：这个标签会循环 #@__addonimages 表中该 aid 的所有图片记录。
[field:imgsrc/]：获取图片的原始路径（通常是 big 目录下的高清图）。
[field:text/]：获取你在“修改”图片时填写的。
str_replace('big','small',@me)：这是一个非常实用的技巧，DedeCMS 默认会将原图放在 big 目录，生成缩略图放在 small 目录，通过这个函数，我们将高清图路径替换为缩略图路径，用于列表页或摘要页,能显著提升页面加载速度。

在列表页调用图集信息

在栏目列表页 (list_artile_type.htm) 或首页,你可能想显示某个图集的缩略图和几张图片作为预览。

调用单张缩略图（最常用）

{dede:list pagesize='12'}
    <li>
        <a href="[field:arcurl/]">
            <!-- 调用文章的缩略图，如果没有则使用默认图片 -->
            <img src="[field:litpic/]" alt="[field:title/]">
        </a>
        <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
    </li>
{/dede:list}

[field:litpic/] 直接调用的是你在后台设置的“缩略图”。

调用图集中的多张图片作为预览

这需要结合 arclist 标签和自定义函数。

在 /include/extend.func.php 文件中添加一个自定义函数：

/**
 * 获取图集中的前N张图片
 * @param int $aid 文章ID
 * @param int $num 获取图片数量
 * @return string 返回HTML代码
 */
function GetAlbumImages($aid, $num = 3) {
    global $dsql;
    $imgurls = '';
    $row = $dsql->GetOne("SELECT imgurls FROM `#@__addonimages` WHERE aid='$aid' ORDER BY id ASC");
    if(is_array($row)) {
        $imgurls = $row['imgurls'];
    }
    if($imgurls != '') {
        $dtp = new DedeTagParse();
        $dtp->SetNameSpace('field', '[', ']');
        $dtp->LoadSource($imgurls);
        $i = 0;
        $images = '';
        if(is_array($dtp->CTags)) {
            foreach($dtp->CTags as $ctag) {
                if($i >= $num) break;
                $imgsrc = $ctag->GetAtt('imgsrc');
                // 同样，使用小图
                $smallimg = str_replace('big', 'small', $imgsrc);
                $images .= "<img src='{$smallimg}' alt='{$ctag->GetAtt('text')}' />";
                $i++;
            }
        }
        return $images;
    }
    return '';
}

在模板中调用这个函数：

假设你想在列表页每个图集标题下面显示3张预览图。

{dede:list pagesize='12'}
    <div class="list-item">
        <a href="[field:arcurl/]" class="title">[field:title/]</a>
        <div class="preview">
            <!-- 调用自定义函数，传入文章ID和要显示的图片数量 -->
            [field:id function=GetAlbumImages(@me,3)/]
        </div>
        <p class="desc">[field:description function='cn_substr(@me,100)'/]...</p>
    </div>
{/dede:list}

常见问题与技巧

问题：上传图片失败或图片无法显示？
- 检查目录权限：确保 /uploads/ 目录及其子目录 (allimg, big, small 等) 的权限为 755 或 777。
- 检查服务器配置：确认 php.ini 中的 file_uploads, upload_max_filesize, post_max_size 等选项是否允许你上传图片。
- 检查路径：如果图片显示为叉，可能是路径问题，检查后台“系统”->“基本参数”->“核心设置”中的“附件目录”是否正确。
技巧：如何为图集添加灯箱/幻灯片效果？
- DedeCMS 默认不带灯箱效果，你需要手动引入一个 JS 灯箱库，如 jQuery 配合 colorbox 或 fancybox。
- 方法：
  1. 下载并上传相关 JS 和 CSS 文件到你的模板目录。
  2. 在模板的 <head> 部分引入这些文件。
  3. 修改图集详情页的图片链接，给 <a> 标签添加一个特定的 class，如 class="colorbox"。
  4. 在页面底部，初始化灯箱脚本：$('.colorbox').colorbox();。
技巧：如何批量修改图片顺序？

DedeCMS 后台没有提供拖拽排序功能，最直接的方法是回到“修改”单张图片的页面，手动修改“排序”字段中的数字，然后重新发布文章,数字越小越靠前。
技巧：如何调用指定栏目前N个图集？
- 使用 arclist 标签，并指定 channelid（图集模型的ID，通常是2）。

{dede:arclist channelid='2' typeid='栏目ID' row='6' titlelen='30'}
    <li>
        <a href="[field:arcurl/]">
            <img src="[field:litpic/]" alt="[field:title/]">
        </a>
        <span>[field:title/]</span>
    </li>
{/dede:arclist}

希望这份详细的指南能帮助你完全掌握 DedeCMS 5.7 的图集发布模块！

dede5.7图集发布模块