织梦列表页如何调用图片集内容？-织梦建站-盈思创科技

图片集是织梦一个非常经典且实用的功能,它允许你在文章中上传多张图片，并以缩略图+大图预览的形式展示，非常适合制作作品集、相册、产品图集等。

这个过程主要分为三个部分：

后台设置：确保织梦环境支持图片集，并设置好上传参数。
添加文章：在后台创建文章，并将其设置为“图片集”模型，然后上传并排版图片。
前台调用：使用织梦的标签，在列表页和内容页调用图片集数据。

第一步：后台设置

在开始之前,请确保你的织梦已经正确安装，并且你使用的是支持图片集的默认文章模型（通常是“文章”模型）。

检查并启用图片集功能

织梦默认就包含图片集功能,但需要确认一下。

登录织梦后台。
进入【系统】-> 系统基本参数。
在左侧菜单选择 “核心设置”。
找到 “是否启用远程图片本地化”，建议设置为“是”，这样外部图片也会被下载到你的服务器。
找到 “附件目录”和 “普通图片目录”，确认它们指向了你希望存放图片的文件夹，并确保该目录有写入权限（755或777）。

设置图片上传参数

这是至关重要的一步,决定了你上传图片的质量和大小。

进入【系统】-> 附件设置。
在 “附件设置” 页面，你可以设置：
- 上传大小限制：根据你的服务器配置和需求设置，2048 (即2MB)。
- 上传类型：确保 jpg|jpeg|png|gif|bmp 这些图片类型被允许。
- 缩略图设置：这里可以设置缩略图的默认宽度、高度，以及是否“保持比例”，建议设置一个合适的尺寸，如 210x160。
- 远程站点附件：如果需要，可以配置。
- 图片水印：如果需要给图片添加水印，可以在这里设置。

(可选) 创建自定义模型

如果你想专门做一个“作品集”或“相册”频道，可以创建一个自定义模型，并复制“文章”模型的所有字段，然后将其命名为“图片集模型”，但对于大多数情况，直接使用默认的“文章”模型即可。

第二步：添加一篇图片集文章

后台设置完成后,就可以开始创建图片集内容了。

创建新文章

进入【核心】-> 内容发布 -> 。
在右上角,确保你选择的是 “文章” 模型。

设置文章属性

填写你的文章标题,我的摄影作品第一辑”。
缩略图：这里可以上传一张作为列表页显示的封面图。注意：如果你想让图片集的第一张图自动成为缩略图，可以跳过这一步，或者在下图中勾选相关选项。
TAG标签：填写相关标签，方便分类和检索。

选择“图片集”模型并上传图片

这是最核心的一步。

在编辑器下方,找到 “选择附加内容” 或类似的按钮（不同版本织梦可能略有差异），点击它。
在弹出的窗口中,你会看到模型选项，请务必选择 “图片集”。
选择后,编辑器下方会出现 “上传图片” 的区域，点击 “增加一个图片”。
在弹出的上传窗口中：
- 上传图片：点击“浏览”选择你本地的图片文件。
- ：为这张图片输入一个标题（可选）。
- 图片描述：为这张图片输入一段描述（可选）。
- 上传排序：这个数字决定了图片在页面中的显示顺序，数字越小越靠前，你可以手动调整。
- 缩略图：如果这张图不自动生成缩略图，或者你想用不同的图做缩略图，可以在这里上传。
重复以上步骤,上传所有你想要展示的图片。
上传完成后,点击 “开始上传”，等待上传进度条走完。

排版图片

上传完成后,你会在编辑器下方看到一个图片列表，你可以通过拖动或修改“上传排序”的数字来调整图片的顺序。

自动提取第一个图片为缩略图：在保存文章时，如果文章缩略图为空，系统会自动将图片集中的第一张图设置为文章的缩略图，这个功能在保存文章时通常会自动执行。
插入到编辑器：如果你想把图片直接插入到文章内容中，也可以在上传图片后，点击图片旁边的 “插入到编辑器” 按钮。

生成HTML

点击文章编辑页面的 “生成HTML” 或 “保存” 按钮，这篇图片集文章就创建完成了。

第三步：前台调用与展示

我们需要在前台模板文件中调用这些数据,让它们显示出来。

图片集列表页调用

假设你的图片集频道列表页模板是 list_article.htm，你想在其中只显示“图片集”类型的文章。

使用 channelartlist + list 标签（推荐） 在你的首页或栏目首页模板中，使用 channelartlist 指定栏目，然后在 list 标签中使用 addfields 和 channel 属性。

{dede:channelartlist typeid='3'}  <!-- typeid='3' 是你的图片集栏目ID -->
  <h2>{dede:field name='typename'/}</h2>
  <ul>
    {dede:list pagesize='8' addfields='body'}
      <li>
        <!-- 调用文章缩略图 -->
        <a href="[field:arcurl/]">
          <img src="[field:litpic/]" alt="[field:title/]">
        </a>
        <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
        <!-- 调用文章摘要，如果body字段在列表页可用 -->
        <p>[field:description function='cn_substr(@me,100)'/]...</p>
      </li>
    {/dede:list}
  </ul>
  <!-- 分页 -->
  <div class="dede_pages">
    <ul>{dede:pagelist listsize='4' listitem='info,index,end,pre,next,pageno'/}</ul>
  </div>
{/dede:channelartlist}

使用 arclist 标签（更灵活） arclist 可以自由指定栏目、模型等，非常强大。

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

typeid='3': 指定栏目ID。
channelid='1': 指定模型ID，1通常是“文章”模型。
row='8': 显示8条。
titlelen='30': 标题长度30个字符。

页调用

当用户点击进入一篇图片集文章的详情页时,你需要调用图片集本身的内容。

内容页模板 article_article.htm

<h1>[field:title/]</h1>
<!-- 文章内容，这里会包含你之前插入的图片 -->
[field:body/]
<!-- 如果你想单独、自定义地展示图片集，可以使用以下标签 -->
<!-- 注意：这个标签通常需要配合JS才能实现好的效果，如灯箱效果 -->
<div class="dede_pages">
  <ul>{dede:pagelist listitem='pre,next,end'/}</ul>
</div>

使用 {dede:imglist} 标签（用于自定义图片集展示） 这个标签专门用于获取当前文章的图片集列表，并输出为HTML代码，你可以用它来制作更炫酷的图片墙或轮播图。

<!-- 在内容页模板中，你想展示图片集的地方加入以下代码 -->
<div class="image-gallery">
  {dede:imglist}
    <a href="[field:src/]" title="[field:text/]">
      <img src="[field:imgsrc/]" alt="[field:text/]">
    </a>
  {/dede:imglist}
</div>

[field:src/]: 图片的大图地址。
[field:imgsrc/]: 图片的缩略图地址。
[field:text/]: 图片的标题或描述。

重要提示：{dede:imglist} 默认输出的 <a> 标签没有 class 属性，为了让它有灯箱效果，你需要修改织梦的核心文件或在JS中处理，一个简单的办法是给 <a> 标签添加一个固定的 class，class="fancybox"，然后在页面中引入 Fancybox 或其他灯箱插件的JS和CSS文件。

修改 include/extend.func.php 文件，添加一个自定义函数：

// 在文件末尾添加
if (!function_exists('GetImgList')) {
    function GetImgList($aid, $style = '', $imgwidth = 120, $imgheight = 90) {
        global $dsql;
        $imglist = '';
        $row = $dsql->GetOne("SELECT body FROM `dede_addonimages` WHERE aid='$aid' ");
        $imgurls = $row['body'];
        preg_match_all("/<img([^>]*)\s*src=('|\")([^'\"]*)('|\")/is", $imgurls, $matches);
        $imgurls = $matches[3];
        $imglist = "<div class='imglist'>";
        if (is_array($imgurls)) {
            foreach ($imgurls as $i => $imgurl) {
                if ($i > 0) $imglist .= " ";
                $imglist .= "<a href='{$imgurl}' class='fancybox' data-fancybox='gallery'><img src='{$imgurl}' width='{$imgwidth}' height='{$imgheight}' alt='' /></a>";
            }
        }
        $imglist .= "</div>";
        return $imglist;
    }
}

页模板中调用：

{dede:field.id function='GetImgList(@me, "", 210, 160)'/}

总结与排错

图片不显示：
1. 检查 data 目录下的 uploads 文件夹权限是否正确。
2. 检查后台附件设置中的路径是否正确。
3. 确认图片是否真的上传成功。
缩略图不生成：
1. 检查后台“图片水印设置”中，是否勾选了“缩略图使用水印”，如果勾选了，但服务器没有开启GD库，会导致生成失败。
2. 检查缩略图目录是否存在且有权限。
列表页调不出图片集：
1. 确认文章在后台是否成功保存并生成了HTML。
2. 确认文章模型是否为“文章”。
3. 确认 arclist 或 list 标签中的 typeid 和 channelid 是否正确。

通过以上步骤,你就可以在织梦CMS中完美地创建和管理图片集列表页了。

织梦列表页如何调用图片集内容？