页图片集如何正确调用？

1. 手动调用（推荐）：在编辑文章内容时，使用特定的代码标签，系统会自动替换成图片集，这是最常用、最灵活的方法。
2. 自动调用：通过修改模板文件，自动获取文章内容中包含的所有<img>标签并展示，这种方法比较“暴力”，不推荐用于图片集，因为它会把文章中所有图片都列出来，无法区分图片集。

下面我将详细介绍推荐的手动调用方法，并附上代码示例和常见问题解答。

手动调用（使用 {dede:field name='body'/} 标签的附加功能）

这种方法的核心是,在后台编辑文章时，使用 [field:imglist/] 或 [field:pageimg/] 这两个特殊的代码标签，当文章保存后，织梦会自动将这两个标签替换成对应的内容。

步骤 1：在后台编辑文章内容

1. 登录织梦后台,进入“内容” -> “添加普通文章”或“编辑普通文章”。

2. 在编辑器中,不要直接粘贴图片，你需要将图片上传到文章中，织梦会自动将其识别为图片集的一部分。

3. 在你希望图片集出现的位置,插入以下代码之一：

   
   （图片来源网络，侵删）
   • [field:imglist/]：这是最常用的标签，它会调用图片集中的所有图片，并以列表形式展示，通常配合CSS来实现幻灯片或缩略图列表效果。
   • [field:pageimg/]：这个标签会调用图片集中的第一张图片作为封面图。

   示例： 假设你想在文章内容的某个位置展示整个图片集，你可以这样写：

   <h3>图文详情：</h3>
   [field:imglist/]
   <p>这里是文章的详细文字内容...</p>

   保存文章后,[field:imglist/] 会被替换成实际的图片HTML代码。

步骤 2：在内容页模板中调用

页的模板文件通常位于 /templets/default/article_article.htm，你只需要在模板中正常调用文章内容即可。

{dede:field name='body'/}

织梦系统在解析这个标签时,会自动找到你文章内容里写的 [field:imglist/]，并将其替换成真正的图片集HTML代码。

自定义图片集调用（更灵活，可自定义样式）

如果你不想使用默认的样式,希望完全控制图片集的展示方式（做成一个漂亮的轮播图或瀑布流），你需要手动获取图片数据并循环输出。

步骤 1：在后台编辑文章内容

同样,在文章内容中插入 [field:imglist/] 标签，这是为了让织梦识别并保存图片集数据。

步骤 2：修改内容页模板

页模板文件（如 article_article.htm），找到 {dede:field name='body'/}，并用以下代码块替换它。

这段代码会获取文章中的图片集,并让你可以自由控制每张图片的显示方式。

{dede:field name='body'}
    <!-- 这是一个判断，如果文章中存在图片集，才执行下面的循环 -->
    {dede:imglist}
        <li>
            <!-- 
                [field:imgsrc/] 是图片的原始地址
                [field:imgwidth/] 是图片宽度
                [field:imgheight/] 是图片高度
            -->
            <a href="[field:imgsrc/]" title="[field:text/]">
                <img src="[field:imgsrc/]" alt="[field:text/]" width="200" height="150" />
            </a>
        </li>
    {/dede:imglist}
{/dede:field}

代码解释：

• {dede:field name='body'}...{/dede:field}：获取文章内容。
• {dede:imglist}...{/dede:imglist}：这是核心标签，它会解析文章内容中的 [field:imglist/]，并对图片集中的每一张图片进行循环。
• [field:imgsrc/]：图片的完整路径。
• [field:text/]：图片的描述文字（如果上传时填写了的话）。
• [field:imgwidth/] 和 [field:imgheight/]：图片的原始宽度和高度。

如何使用这个自定义代码？

1. 将上述代码复制到你的模板文件中,替换掉原来的 {dede:field name='body'/}。

2. 在 <li> 标签外，你可以添加一个 <ul> 容器，<ul class="my-gallery">。

3. 然后你就可以通过CSS来美化这个 .my-gallery，实现你想要的布局效果，

   .my-gallery {
       list-style: none;
       padding: 0;
       display: flex; /* 横向排列 */
       flex-wrap: wrap; /* 换行 */
   }
   .my-gallery li {
       margin: 10px;
   }
   .my-gallery img {
       width: 200px;
       height: 150px;
       object-fit: cover; /* 保持图片比例并填充 */
       border: 1px solid #eee;
   }

常见问题与解决方案 (FAQ)

问题1：为什么我调用不出来？图片集显示为空或显示 [field:imglist/] 这几个字？

原因分析： 最常见的原因是中没有正确插入 [field:imglist/]，或者图片上传方式不正确。

<h1>{dede:field.title/}</h1>
<!-- 在这里调用图片集的第一张作为封面图 -->
{dede:field.pageimg/}
<div class="article-content">
    {dede:field name='body'/}
</div>

{dede:sql sql="SELECT * FROM `dede_addonimages` WHERE aid = ~id~ ORDER BY id ASC"}
    <a href="[field:imgurl/]" target="_blank">
        <img src="[field:imgurl/]" alt="[field:imgtext/]" width="150" />
    </a>
{/dede:sql}