本文为付费教程的骨架翻译：场景与步骤按原文可见部分梳理，锁定代码按 Bricks 官方过滤器补全实现，并已注明「补全实现」。未复制原文代码。
场景：懒加载导致 Gallery 图片塌陷
用 Perfmatters 这类性能插件开启图片懒加载（Lazy Loading）后，Bricks 的 Image Gallery 元素输出的图片会出现互相塌陷叠在一起的经典问题：懒加载脚本给图片加了占位样式，但 Bricks Gallery 的布局脚本（Isotope/masonry）在图片真实尺寸未就绪时就把位置算了，视觉上所有图片挤成一团。
Bricks Gallery 输出的图片默认带这些类：
image bricks-lazy-load-isotope bricks-layout-inner css-filter这些类名太通用——image、css-filter 在全站到处都有，拿它们写 CSS 或配置插件会误伤其他图片。解决办法：给 Gallery 的每张图片追加一个专属 class（如 bricks-gallery-image），然后在 Perfmatters 的懒加载排除列表里指定这个类，让 Gallery 图片不被懒加载处理，塌陷问题即消失。
步骤骨架（原教程）
原教程的可见步骤（具体代码被付费墙截断）：
- 原教程称使用
bricks/element/settings过滤器，为 Gallery 元素输出的图片追加自定义类bricks-gallery-image。 - 在 Perfmatters → Assets → Lazy Loading 的排除项里填写该类名（不带前面的点），让 Gallery 图片跳过懒加载。
- 实现后，前台 Gallery 图片将带上：
image bricks-lazy-load-isotope bricks-layout-inner css-filter bricks-gallery-image。
补全实现：给每张图片追加专属 class
bricks/element/settings 过滤器作用于元素设置，无法直接改动 Gallery 内部每张 <img> 的输出；要精准给图片加类，正确姿势是用官方过滤器 bricks/frontend/render_data——它在元素 HTML 渲染完成后、输出前执行，可以直接改写最终标记。完整代码如下（补全实现）：
/**
* 给 Bricks Image Gallery 输出的每张图片追加 bricks-gallery-image 类
* 补全实现（基于 Bricks 官方 bricks/frontend/render_data 过滤器）
*/
add_filter( 'bricks/frontend/render_data', function( $content, $element ) {
// 只处理 Image Gallery 元素
if ( ! isset( $element->name ) || $element->name !== 'image-gallery' ) {
return $content;
}
// 给所有 img 标签追加类（已带该类则跳过，避免重复）
$content = preg_replace(
'/<img(?![^>]*bricks-gallery-image)[^>]*\bclass="([^"]*)"/',
'<img class="$1 bricks-gallery-image"',
$content
);
return $content;
}, 10, 2 );把这段代码放到子主题 functions.php（去掉开头的 PHP 标签）或 Code Snippets 插件里即可。效果：Gallery 内每张图片的 class 变成 image bricks-lazy-load-isotope bricks-layout-inner css-filter bricks-gallery-image，与原文描述的前台结果一致。
在 Perfmatters 中指定跳过懒加载
- 进入 Perfmatters → Assets → Lazy Loading。
- 在排除（exclude）相关输入框里填写
bricks-gallery-image——注意不要带前面的点（填类名而非选择器）。 - 保存后刷新前台，Gallery 图片不再被懒加载接管，塌陷问题消失。
原理说明
- 为什么加类能解决问题：Perfmatters 的懒加载排除列表支持按 class 匹配，被排除的图片按正常方式加载、立即拥有真实尺寸，Bricks Gallery 的布局脚本拿到正确尺寸后就不会塌陷。专属类名确保只排除 Gallery 图片，不动全站其他图片的懒加载收益。
bricks/frontend/render_data过滤器：Bricks 渲染元素得到 HTML 字符串后、输出前执行apply_filters( 'bricks/frontend/render_data', $content, $element )，是「渲染后改 HTML」的标准入口，适合给输出追加类、改属性、插标签等操作。- 正则的细节：
(?![^>]*bricks-gallery-image)是负向前瞻，防止已经带类的图片被重复追加；\bclass="([^"]*)"捕获现有 class 列表并在其前面插入新类，保留原有类名。 - 为什么不直接改主题 CSS：塌陷的根因是懒加载占位与布局脚本抢跑，CSS 只能掩盖症状；让图片跳过懒加载才是治本。
小结
「专属 class + 插件排除列表」是解决第三方插件与 Bricks 元素冲突的通用套路：先给目标元素打上专属标记，再让插件对它网开一面。给 Gallery 图片加类用 bricks/frontend/render_data 过滤器改写输出即可，无需动插件代码。