Timber/Twig中是否有快速方法将图片转为从CDN加载？

问题翻译 #

我想了解是否存在Timber函数或钩子，可将Twig模板中{{ post.content }}内的img标签转换为从CDN而非WordPress加载。我们的模板仅使用{{ post.content }}，若有现成方案则不想大量改写代码。例如，图片标签需改为如下形式：

<img
 srcset="
  https://xxxxxx.com/cdn-cgi/image/width=1080,quality=30/https://xxxxxx.com/[wordpress_image_path] 1080w, 
  https://xxxxxx.com/cdn-cgi/image/width=300,quality=30/https://xxxxxx.com/[wordpress_image_path] 300w, 
  https://xxxxxx.com/cdn-cgi/image/width=1024,quality=30/https://xxxxxx.com/[wordpress_image_path] 1024w,
  https://xxxxxx.com/cdn-cgi/image/width=600,quality=30/https://xxxxxx.com/[wordpress_image_path] 600w"
  src="https://xxxxxx.com/cdn-cgi/image/width=1080,quality=30/https://xxxxxx.com/[wordpress_image_path]"
  sizes="(max-width: 1080px) 100vw, 1080px"
  alt="some alt"
/>

请问是否有可实现此类转换的函数？

完全不用修改Twig里的{{ post.content }}，直接用WordPress原生钩子或Timber专属过滤器就能实现需求，自动替换文章内容里的img标签为你要的CDN格式。

具体代码实现 #

方法一：使用WordPress原生the_content钩子 #

在主题的functions.php文件中添加以下代码：

add_filter('the_content', 'convert_post_images_to_cdn');
function convert_post_images_to_cdn($content) {
    // 替换为你的CDN和WordPress站点实际域名
    $cdn_base = 'https://xxxxxx.com/cdn-cgi/image/';
    $wp_base = 'https://xxxxxx.com/';

    // 正则匹配img标签中的src属性
    $pattern = '/<img[^>]+src=["\'](' . preg_quote($wp_base, '/') . '([^\'"]+))["\'][^>]*>/i';

    // 回调函数生成带srcset的新img标签
    $content = preg_replace_callback($pattern, function($matches) use ($cdn_base, $wp_base) {
        $original_src = $matches[1];
        $img_path = $matches[2];
        // 提取原图片的alt属性
        $alt_text = preg_match('/alt=["\']([^\'"]*)["\']/i', $matches[0], $alt_match) ? $alt_match[1] : '';

        // 定义需要的尺寸和CDN参数
        $srcset_config = [
            'width=1080,quality=30' => '1080w',
            'width=300,quality=30' => '300w',
            'width=1024,quality=30' => '1024w',
            'width=600,quality=30' => '600w',
        ];

        // 拼接srcset内容
        $srcset = [];
        foreach ($srcset_config as $params => $size) {
            $srcset[] = "{$cdn_base}{$params}/{$wp_base}{$img_path} {$size}";
        }
        $srcset_str = implode(', ', $srcset);

        // 返回构造好的img标签
        return sprintf(
            '<img srcset="%s" src="%s" sizes="(max-width: 1080px) 100vw, 1080px" alt="%s" />',
            $srcset_str,
            "{$cdn_base}width=1080,quality=30/{$wp_base}{$img_path}",
            esc_attr($alt_text)
        );
    }, $content);

    return $content;
}

方法二：使用Timber专属过滤器timber/post/content #

如果更倾向于使用Timber的专属钩子，只需将上面的add_filter行替换为：

add_filter('timber/post/content', 'convert_post_images_to_cdn');

函数逻辑完全不变，效果一致。

注意事项 #

• 务必将代码中的https://xxxxxx.com/替换为你的真实CDN域名和WordPress站点域名
• 正则会匹配所有img标签，若需排除特定图片（如带指定class的），可调整正则匹配规则
• 若原图片已有srcset属性，会被替换为我们生成的CDN版本；如需保留原有尺寸逻辑，可修改srcset_config中的参数配置

内容的提问来源于stack exchange，提问作者BDUB