dede如何调用大尺寸图片？

在文章列表页（首页、列表页）调用文章缩略图

这是最常见的需求,比如在首页的文章列表中显示文章的配图。

使用默认的 litpic 字段

DedeCMS 默认的文章数据表 dede_archives 中有一个 litpic 字段，专门用于存储文章的缩略图路径,直接调用这个字段即可。

代码示例：

{dede:arclist row='10' titlelen='30'}
    <li>
        <a href="[field:arcurl/]">
            <!-- 直接调用 litpic 字段 -->
            <img src="[field:litpic/]" alt="[field:title/]" />
        </a>
        <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
    </li>
{/dede:arclist}

代码解释：

• {dede:arrowse}: 调用文章列表的标签。
• row='10': 表示调用 10 篇文章。
• [field:litpic/]: 这就是调用缩略图路径的核心代码，它会输出文章在后台设置的“缩略图”地址。
• [field:arcurl/]: 调用文章的链接地址。
• [field:title/]: 调用文章的标题。

调用文章内容中的第一张图作为缩略图

如果你没有为每篇文章单独设置缩略图，而是习惯在文章内容（正文）的第一张图作为封面图,可以使用这个方法。

代码示例：

{dede:arclist row='10' titlelen='30'}
    <li>
        <a href="[field:arcurl/]">
            <!-- 使用 function='GetFirstImg(@me)' 调用正文第一张图 -->
            <img src="[field:body function='GetFirstImg(@me)'/]" alt="[field:title/]" />
        </a>
        <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
    </li>
{/dede:arclist}

代码解释：

• [field:body function='GetFirstImg(@me)'/]: 这是关键。
  • field:body 获取文章的正文内容。
  • function='GetFirstImg(@me)' 是一个自定义函数，它会提取 @me（即正文内容）中的第一张 <img> 标签的 src 属性值。
  • 注意：这个函数 GetFirstImg 需要在你网站的 /include/extend.func.php 文件中存在，如果你的模板文件里找不到这个函数,你需要手动添加进去。

如何添加 GetFirstImg 函数？ 打开 /include/extend.func.php 文件,在最后面添加如下代码：

/**
 * 获取文档body中的第一张图片路径
 * @param string $body 文档内容
 * @return string 图片路径
 */
function GetFirstImg($body)
{
    $preg = "/<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/i";
    preg_match_all($preg, $body, $match);
    if (!empty($match[1][0])) {
        // 如果获取到图片，返回第一张图片
        return $match[1][0];
    } else {
        // 如果没有图片，可以返回一个默认图片
        return '/images/default.jpg';
    }
}

记得将 /images/default.jpg 替换成你自己的默认图片路径。

页（文章详情页）调用大图

在文章详情页，你可能想调用文章中的某一张大图,或者直接调用文章内容里的所有图片。

调用文章正文中的所有图片

这个需求通常用于制作图集或者图片展示。

代码示例：

{dede:field.body/}

默认情况下，{dede:field.body/} 会直接输出文章的全部内容，包括所有图片，如果你想在正文之外单独提取图片进行布局，可以使用 function。

代码示例（提取所有图片并循环）：

<!-- 使用自定义函数提取所有图片并循环输出 -->
{dede:field.body function='GetImages(@me)'/}

注意：这个函数 GetImages 同样需要你手动添加到 /include/extend.func.php 文件中。

如何添加 GetImages 函数？ 在 /include/extend.func.php 文件中添加如下代码：

/**
 * 获取文档body中的所有图片路径
 * @param string $body 文档内容
 * @return string 图片标签字符串
 */
function GetImages($body)
{
    $preg = "/<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/i";
    preg_match_all($preg, $body, $match);
    $imgstr = '';
    if (!empty($match[1])) {
        foreach ($match[1] as $imgsrc) {
            // 这里可以根据需要给图片添加样式或其他属性
            $imgstr .= '<img src="' . $imgsrc . '" class="article-img" />';
        }
    }
    return $imgstr;
}

这段代码会提取正文里所有的图片，并为你包装上 <img> 标签，你可以通过 class="article-img" 来在CSS中控制这些图片的样式。

调用自定义的“大图”字段

如果你有特定的需求，比如每篇文章都有一个专门的“高清大图”字段,那么最好的方法是使用自定义字段。

操作步骤：

1. 添加字段：进入后台 核心 -> 内容模型管理 -> 普通文章（或其他你使用的模型） -> 字段管理 -> 添加新字段。

   • 字段名：bigpic (必须为英文或数字)
   • ：高清大图 (在后台显示的名称)
   • 字段类型：多媒体图片
   • 保存并更新系统缓存。

2. 在文章中上传图片：发布或编辑文章时，你会看到新增的“高清大图”选项,上传一张大图。

3. 在模板中调用： 在文章内容页模板（通常是 article_article.htm）中使用 field 标签调用。

代码示例：

<!-- 调用自定义的大图字段 -->
<img src="{dede:field.bigpic/}" alt="高清大图" />
<!-- 或者结合正文内容一起使用 -->
<div class="article-content">
    {dede:field.body/}
</div>
<div class="featured-image">
    <img src="{dede:field.bigpic/}" alt="特色大图" />
</div>

调用图集（特殊栏目）的大图

如果你的栏目类型是“图集”,那么调用方式又有所不同。

代码示例（在图集内容页调用所有图片）：

图集模型会把图片存储在 dede_addonimages 表中，并按 page 字段排序。

{dede:pagestyle pagesize='10'/}
{dede:imglist pagesize='10'}
    <a href="[field:linkurl/]" target="_blank">
        <img src="[field:imgsrc/]" alt="[field:text/]" />
    </a>
{/dede:imglist}

代码解释：

• {dede:imglist}: 专门用于调用图集图片的标签。
• [field:imgsrc/]: 调用单张图片的地址。
• [field:linkurl/]: 调用单张图片的链接（通常是查看原图的大图）。
• [field:text/]: 调用图片的说明文字。

总结与最佳实践

建议：

• 规范操作：尽量使用后台的“缩略图”功能（litpic 字段）,这是最规范的做法。
• 自定义字段：如果需求特殊，不要犹豫，使用自定义字段,它能让你的模板逻辑更清晰。
• 善用函数：extend.func.php 是你的“百宝箱”,多添加一些实用的函数可以大大提高开发效率。

希望这些方法能帮到你！如果你有更具体的需求，可以再提出来,我们可以进一步探讨。