给 Bricks Gallery 所有图片加自定义 Class（解决 Perfmatters 懒加载图片塌陷）

本文为付费教程的骨架翻译：场景与步骤按原文可见部分梳理，锁定代码按 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 图片不被懒加载处理，塌陷问题即消失。

步骤骨架（原教程）

原教程的可见步骤（具体代码被付费墙截断）：

1. 原教程称使用 bricks/element/settings 过滤器，为 Gallery 元素输出的图片追加自定义类 bricks-gallery-image。

2. 在 Perfmatters → Assets → Lazy Loading 的排除项里填写该类名（不带前面的点），让 Gallery 图片跳过懒加载。

3. 实现后，前台 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 中指定跳过懒加载

1. 进入 Perfmatters → Assets → Lazy Loading。

2. 在排除（exclude）相关输入框里填写 bricks-gallery-image——注意不要带前面的点（填类名而非选择器）。

3. 保存后刷新前台，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 只能掩盖症状；让图片跳过懒加载才是治本。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

常见误区

几个坑：一是 Gallery 图片因为懒加载没完全加载，导致塌陷或布局跳动，本文的专属 class 就是为了精准跳过/控制；二是加了 class 却忘了在 Perfmatters 之类插件里指定跳过，懒加载照旧作用于这些图；三是 class 命名和现有 CSS 撞车，样式串了。给图片加专属 class 本质是为「精细控制某类图片的加载/样式」，命名加前缀避免冲突最稳。

小结

「专属 class + 插件排除列表」是解决第三方插件与 Bricks 元素冲突的通用套路：先给目标元素打上专属标记，再让插件对它网开一面。给 Gallery 图片加类用 bricks/frontend/render_data 过滤器改写输出即可，无需动插件代码。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

Gallery 图片为什么塌陷？ 懒加载让图片高度延迟确定，没占位就塌陷；加专属 class 可精准跳过懒加载或给占位。

加了 class 还懒加载？ 要在 Perfmatters 等插件里把该 class 加入跳过名单，否则照旧懒加载。

class 命名要注意什么？ 加专属前缀避免和现有 CSS 撞车，样式才不会串。

能只跳过某些图吗？ 能，靠这个专属 class 精确指定哪些图不走懒加载，其余照常优化。

• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程