dede文章内容图片大小如何控制？-DEDE建站-盈思创科技

使用自定义函数 + 文章内容标签（最推荐、最灵活）

这种方法的核心思想是：先写一个自定义函数来处理图片，然后在调用文章内容时，让织梦系统自动调用这个函数。 这样做的好处是逻辑清晰，修改方便,且不影响后台编辑。

（图片来源网络，侵删）

步骤 1：创建自定义函数文件

打开你的 DedeCMS 安装目录。
找到 include/ 文件夹。
在 include/ 文件夹下创建一个新文件，命名为 extention.func.php。（如果这个文件已经存在，直接编辑它即可）。

步骤 2：在函数文件中添加PHP代码

在 extention.func.php 文件中，添加以下 PHP 函数代码：

/**
 * 处理文章内容，控制图片大小
 * @param string $content 原始文章内容
 * @param int $maxwidth 图片最大宽度
 * @param int $maxheight 图片最大高度
 * @return string 处理后的文章内容
 */
function ResizeImages($content, $maxwidth = 600, $maxheight = 800) {
    // 1. 创建一个DOMDocument对象来解析HTML
    $doc = new DOMDocument();
    // 2. 抑制加载HTML时的错误，因为很多文章内容HTML不规范
    // @ 前缀可以屏蔽警告和错误信息
    @$doc->loadHTML('<div>' . $content . '</div>');
    // 3. 获取所有的img标签
    $imgs = $doc->getElementsByTagName('img');
    // 4. 遍历每个img标签
    foreach ($imgs as $img) {
        // 获取原始图片地址
        $src = $img->getAttribute('src');
        // 获取原始宽度和高度（如果存在）
        $old_width = $img->getAttribute('width');
        $old_height = $img->getAttribute('height');
        // 如果图片没有设置宽度和高度，或者原始尺寸超过了我们设定的最大值
        if (empty($old_width) || empty($old_height) || $old_width > $maxwidth || $old_height > $maxheight) {
            // 获取图片的实际尺寸（使用getimagesize函数）
            // @ 抑制可能因图片无法访问而导致的警告
            list($width, $height, $type, $attr) = @getimagesize($src);
            // 如果成功获取到图片尺寸
            if ($width && $height) {
                // 计算缩放比例
                $ratio = min($maxwidth / $width, $maxheight / $height);
                // 计算新的宽度和高度
                $new_width = round($width * $ratio);
                $new_height = round($height * $ratio);
                // 设置新的宽度和高度属性
                $img->setAttribute('width', $new_width);
                $img->setAttribute('height', $new_height);
                // 可选：给图片添加一个样式，比如居中或添加边距
                // $img->setAttribute('style', "max-width: {$maxwidth}px; height: auto; margin: 10px 0; display: block;");
            }
        }
    }
    // 5. 从DOM中获取处理后的HTML内容
    // 注意：这里我们只取我们之前添加的<div>内部的内容，避免引入<html><body>等标签
    $node = $doc->getElementsByTagName('div')->item(0);
    $new_content = $doc->saveHTML($node);
    // 6. 去掉我们手动添加的包裹div
    $new_content = str_replace(['<div>', '</div>'], '', $new_content);
    return $new_content;
}

代码解释：

这个函数接收文章内容、最大宽度和最大高度作为参数。
使用 DOMDocument 来安全地解析和修改HTML标签,比用正则表达式更可靠。
中的所有 <img>
对于每个图片，检查其尺寸，如果尺寸过大，就按比例缩小到 maxwidth 和 maxheight 以内。


最后返回处理后的、包含新尺寸的HTML内容。


步骤 3：在模板文件中调用函数
在你需要显示文章内容的模板文件中（通常是 article_article.htm），使用 {dede:field.body function='ResizeImages(@me, 600, 800)' /} 来替换原来的 {dede:field.body/}。
示例：
（图片来源网络，侵删）
打开 templets/default/article_article.htm 文件,找到类似这样的代码：
<div class="article-content">
    {dede:field.body/}
</div>
将其修改为：
<div class="article-content">
    {dede:field.body function='ResizeImages(@me, 600, 800)' /}
</div>
参数说明：

@me：这是织梦模板引擎的固定用法，代表当前字段的原始值,在这里就是原始的文章内容。
600：你希望图片的最大宽度（像素）。
800：你希望图片的最大高度（像素）。

优点：
（图片来源网络，侵删）

灵活可控：可以在每个模板里单独设置不同的图片大小。
性能好：只在页面被访问时处理一次，处理完成后会生成静态HTML文件,后续访问无需再次处理。
不影响后台：后台编辑器里的图片还是原始大小,不会失真。


修改 inc_archives_view.php 文件（全局生效，但需谨慎）
这种方法会直接修改织梦的核心文件，使得所有文章列表页和内容页的图片都被统一处理。不推荐新手使用,因为升级DedeCMS时需要重新修改。
步骤 1：定位并修改文件
打开 /include/inc_archives_view.php 文件。
步骤 2：找到处理文章内容的代码
搜索 ParseTemplets() 函数，或者查找 $this->Fields['body'] 相关的代码，通常在文章内容被输出到模板之前,会有一个处理函数。
在 inc_archives_view.php 中，找到类似这样的代码段（版本不同，行号可能略有差异）：
// 在文件中找到这行代码
$this->Fields['body'] = $this->FilterHTML($this->Fields['body'], $this->Fields['id']);
注意： 这行代码的作用是过滤HTML标签，防止XSS攻击,我们是在它之后添加我们的图片处理逻辑。
步骤 3：添加图片处理代码
在这行代码的后面,添加如下代码：
// 引入自定义函数库（如果使用了方法一，则需要引入）
// require_once(DEDEINC.'/extention.func.php');
// 调用自定义函数处理body中的图片
$this->Fields['body'] = ResizeImages($this->Fields['body'], 600, 800);
说明：

如果你已经创建了 extention.func.php 文件，需要先取消注释 require_once 这一行,确保函数能被调用。
这里的 600 和 800 是全局生效的图片最大尺寸。

步骤 4：清除缓存
修改完文件后，去DedeCMS后台的“生成” -> “更新HTML” -> “更新所有HTML”,让修改生效。
优点：

全局生效：一次修改,所有页面都有效。

缺点：

影响全局：你可能不希望所有地方的图片都被限制。
升级风险：每次升级DedeCMS，这个文件都可能被覆盖,需要重新修改。
不易维护：修改核心文件,不符合最佳实践。


使用CSS控制（最简单，但有局限性）
这种方法不是真正地修改图片文件尺寸,而是通过CSS样式在浏览器中强制图片按指定大小显示。
步骤 1：在CSS文件中添加样式
在你的模板的CSS文件中（/templets/default/style/dedecms.css）,添加以下样式：
.article-content img {
    max-width: 600px;
    height: auto;
    /* 可选：添加一些样式让图片更好看 */
    display: block; /* 防止图片下方出现空白间隙 */
    margin: 10px auto; /* 上下边距10px，水平居中 */
}
说明：

.article-content 是包裹文章内容的容器类名,请根据你的模板实际情况修改。
max-width: 600px; 表示图片的最大宽度为600像素，如果图片本身宽度小于600px,则显示原始宽度。
height: auto; 表示高度根据宽度按比例自动调整,防止图片变形。

优点：

实现简单：只需添加几行CSS代码。
无侵入性：不修改任何PHP文件,对后台和文件系统无影响。

缺点：

不改变实际尺寸：图片文件本身还是那么大，用户下载的图片尺寸和原始文件一样，这会影响页面加载速度,因为大图片依然需要被下载。
可能失真：如果图片原始尺寸非常小,放大显示可能会导致模糊。


总结与推荐



方法
优点
缺点
适用场景




自定义函数
灵活、性能好、不影响后台、符合最佳实践
需要创建文件和修改模板
强烈推荐，适用于绝大多数情况。


修改核心文件
全局生效，无需修改模板
影响全局、有升级风险、不易维护
需要所有页面图片尺寸完全统一的特殊情况。


CSS控制
实现简单，无侵入性
不改变实际文件大小，可能影响加载速度
对图片要求不高，只是想快速在页面上布局，或者图片本身已经很小。



对于绝大多数网站，强烈建议使用方法一，它提供了最佳的平衡点，既实现了功能,又保证了网站的稳定性和可维护性。

dede文章内容图片大小如何控制？

使用自定义函数 + 文章内容标签（最推荐、最灵活）

步骤 1：创建自定义函数文件

步骤 2：在函数文件中添加PHP代码

步骤 3：在模板文件中调用函数

修改 `inc_archives_view.php` 文件（全局生效，但需谨慎）

步骤 1：定位并修改文件

步骤 2：找到处理文章内容的代码

步骤 3：添加图片处理代码

步骤 4：清除缓存

使用CSS控制（最简单，但有局限性）

步骤 1：在CSS文件中添加样式

总结与推荐

相关文章

目录[+]

方法	优点	缺点	适用场景
自定义函数	灵活、性能好、不影响后台、符合最佳实践	需要创建文件和修改模板	强烈推荐，适用于绝大多数情况。
修改核心文件	全局生效，无需修改模板	影响全局、有升级风险、不易维护	需要所有页面图片尺寸完全统一的特殊情况。
CSS控制	实现简单，无侵入性	不改变实际文件大小，可能影响加载速度	对图片要求不高，只是想快速在页面上布局，或者图片本身已经很小。