dede图集 产品图片

核心概念：图集 vs. 产品

在开始之前,我们先理清两个概念：

1. 图集：

   • 用途：主要用于展示一系列相关的图片，如摄影作品、旅游相册、设计稿、产品多角度展示等。
   • 特点以图片为主，图片之间通常有逻辑顺序（如1, 2, 3...），用户点击大图后，可以左右滑动切换查看所有图片。
   • 后台设置：使用默认的“图集”模型。

2. 产品：

   • 用途：用于展示具体的商品或服务，如电商网站的商品、案例展示等。
   • 特点：除了图片，还包含产品名称、价格、规格、描述、参数等大量结构化的信息。产品的主图和图集是产品信息的一部分。
   • 后台设置：需要自定义一个“产品”模型，在其中添加图片集类型的字段。

创建与管理“图集”内容

这是最直接的使用方式,适用于纯粹的图片展示。

步骤 1：检查图集模型是否启用

DedeCMS 默认自带了“图集”模型，但需要确认它是否已启用。

1. 登录后台,进入【核心】 -> 【内容模型管理】。
2. 在列表中找到“图集”模型，检查其状态是否为“是”，如果不是，点击后面的“更改”将其启用。

步骤 2：添加图集栏目

你需要一个栏目来存放这些图集。

1. 进入【栏目】 -> 【添加栏目】。
2. 栏目名称：填写，产品展示”或“案例图集”。
3. 模型：务必选择“图集”。
4. 其他选项（如列表模板、文章模板）根据需要设置。
5. 点击“确定”保存。

步骤 3：发布图集文章

现在你可以在刚创建的栏目下发布图集了。

1. 】 -> 【新增图集】。
2. 填写基本信息：
   • 为你的图集起个名字。
   • TAG标签：可选，用于优化和分类。
   • 缩略图：上传一张作为封面的小图，会在栏目列表页显示。
   • 图集描述：对整个图集的简要说明。
3. 上传图集（最关键的一步）：
   • 找到“图集内容”区域，点击 “上传新图片” 或 “本地上传” 按钮。
   • 在弹出的窗口中,选择你电脑上的图片文件，可以多选。
   • 上传成功后,图片会显示在下方的列表中。
4. 设置图片顺序和说明：
   • 你可以拖动图片来调整它们的显示顺序。
   • 为每张图片填写 “图片说明”，这个说明会显示在图片下方，非常重要。
   • 你还可以为单张图片设置 “跳转链接”，点击该图片可以跳转到指定URL。
5. 选择图片排版样式：

   在图集编辑框的上方,有几个按钮，如“多图模式”、“幻灯片模式”等，选择一种你喜欢的排版方式，最常用的是“多图模式”。

6. 生成HTML：

   点击“生成HTML”按钮，将这篇图集文章生成静态页面。

   
   （图片来源网络，侵删）

步骤 4：在前台调用

在模板文件（通常是 list_article.htm 和 article_artlist.htm）中，DedeCMS的标签会自动处理图集。

• 调用缩略图：[field:picname/]
• ：[field:title/]
• 调用图集内容：在文章详情页模板（article_picture.htm）中，{dede:field.body/} 会自动解析并展示图集。

创建与管理“产品”内容（更常用）

如果你的网站是电商或产品展示型,你需要一个功能更强大的“产品”模型。

步骤 1：创建自定义产品模型

1. 进入【核心】 -> 【内容模型管理】 -> 【增加一个内容模型】。

2. 模型名称：填写“产品”。

3. 表前缀：保持默认 dede_archives 即可，不要改动。

4. 模型字段：这是关键，默认的字段可能不够用，我们需要添加。

   • 点击【字段管理】 -> 【增加新字段】。
   • 字段名：price (小写，不能用中文)
   • ：产品价格
   • 字段类型：数字
   • 保存
   • 再增加一个字段：
     • 字段名：prointro
     • ：产品简介
     • 字段类型：文本area
   • 最重要的字段 - 图集：
     • 字段名：productpics (自定义)
     • ：产品图片
     • 字段类型：图片集 (这是关键！)
     • 是否为空：是 (根据需要)
     • 默认值：留空
     • 保存

5. 点击“生成模型”，完成产品模型的创建。

步骤 2：添加产品栏目

1. 进入【栏目】 -> 【添加栏目】。
2. 栏目名称：产品中心”。
3. 模型：选择你刚刚创建的“产品”模型。
4. 保存。

步骤 3：发布产品文章

1. 】 -> 】 (注意，这里是“内容”，不是“新增图集”，因为我们用的是自定义的“产品”模型)。
2. 选择你刚才创建的“产品”栏目。
3. 填写基本信息：
   • 产品名称。
   • 缩略图：上传产品主图/封面图。
   • TAG标签：产品关键词。
4. 填写自定义字段：

   你会看到刚才添加的“产品价格”、“产品简介”等字段，填写相应内容。

5. 上传产品图片（图集）：
   • 找到名为“产品图片”的字段（就是你自定义的 productpics 字段）。
   • 点击旁边的 “上传” 或 “本地上传” 按钮。
   • 上传图片,并为每张图添加说明，操作方法和图集模型中的完全一样。
6. 生成HTML：点击“生成HTML”。

步骤 4：在前台调用

因为使用了自定义字段,调用方式也略有不同。

• 在列表页模板 (list_article.htm) 中：

  • [field:title/]
  • 调用缩略图：[field:picname/]
  • 调用价格：[field:price/]

• 在详情页模板 (article_article.htm) 中：

  • [field:title/]

  • 调用简介：[field:prointro function='htmlspecialchars(@me)'/]

  • 调用图集：这是最关键的，你需要使用 {dede:field name='productpics'/}

    • 这个标签默认会输出类似 <img src="..." alt="..."/> 的HTML。
    • 为了更好的控制样式,通常需要配合自定义函数或在模板中循环处理，一个简单的循环示例如下：

    {dede:field name='productpics' runphp='yes'}
        $images = @me; // 获取图集内容
        $images_array = explode(';', $images); // 按分号分割
        $html = '';
        foreach($images_array as $img){
            if(trim($img) != ''){
                // 假设图片格式为 "图片地址|图片说明"
                list($img_url, $img_desc) = explode('|', $img);
                $html .= "<div class='product-img-item'>";
                $html .= "<img src='{$img_url}' alt='{$img_desc}' />";
                $html .= "<p>{$img_desc}</p>";
                $html .= "</div>";
            }
        }
        @me = $html; // 输出处理后的HTML
    {/dede:field}

    • 注意：DedeCMS的图集字段存储格式通常是 图片地址|图片说明,图片地址|图片说明,...，上面的代码需要根据你的实际情况调整分割符和解析逻辑，更简单的方法是使用Dede的默认 {dede:field.body/} 来显示图集，但前提是你的产品描述内容里包含了图集，对于独立字段，更推荐使用自定义函数或JS插件来展示图集轮播。