场景:从多图中随机取一张
Meta Box 的 Image Advanced 字段允许在一篇文章(或一个站点设置页)里上传多张图片,返回的是一个图片信息数组。很多站长想用它做「随机展示」:比如站点首页的横幅图,每次刷新从后台传的一组图里随机换一张;或者文章详情页的顶部背景图,每篇都从多图字段里随机抽。
Meta Box 本身没有「随机取一张」的输出选项,Bricks 的动态数据也只能整组输出。这个免费教程用自定义函数解决,函数只做一件事:把图片数组打乱,返回第一张的 ID。
Step 1:注册随机取图函数
把下面的代码加到子主题的 functions.php(不要带开头的 PHP 标签)或代码片段插件里:
<?php
function bl_get_random_mb_image_advanced_image_id( string $field_id ): int {
$images = rwmb_meta( $field_id );
shuffle( $images );
return reset( $images )['ID'];
}
rwmb_meta( $field_id )是 Meta Box 的标准取值函数,默认取当前文章/当前循环项的字段值,Image Advanced 字段返回图片信息数组。shuffle()原地打乱数组顺序,PHP 内置函数,无需任何依赖。reset()把内部指针拨回数组开头并返回第一个元素,也就是打乱后的「随机第一张」;随后取它的ID键(Meta Box 图片数组每项都带ID、url、full_url等键)作为函数返回值。
Step 2:Bricks 中引用
在应用到该文章类型(或首页)的 Bricks 模板里:
- 添加一个 Image(图片)元素。
- 图片来源(Source)选择「动态数据」,填入:
{echo:bl_get_random_mb_image_advanced_image_id(random_image)}
其中 random_image 替换成你的字段 ID。
- 如果你的图是挂在站点设置页(比如 Meta Box 的 Settings Page)而不是文章上,
rwmb_meta需要传第二个参数指定页面 ID,函数在此基础上自行扩展即可。
原理说明
- 随机性来自
shuffle():每次页面渲染时 PHP 都会重新打乱数组,前端刷新就会看到不同的图,无需缓存插件配合也能生效(除非页面被整页缓存)。 - 返回的是图片 ID 而不是 URL,是因为 Image 元素的动态数据直接吃 ID,Bricks 会自动解析出正确的图片尺寸和响应式 srcset。
- 函数返回值声明为
int,如果字段为空(数组为空或false),reset()返回false,取['ID']会告警——实际使用时建议对空数组先做if ( empty( $images ) ) return 0;的保护。
小结
随机图的实现比想象中简单:Meta Box 取数组 → shuffle 打乱 → 取第一张的 ID → 丢给 Image 元素。整段代码不到十行,零插件依赖,适合做随机横幅、随机背景、每日一图这类效果。
小结:Meta Box Image Advanced 随机输出 = shuffle + reset 取首项 + echo 动态数据。注意空数组保护和返回 ID 而非 URL 这两个细节,就能在 Bricks 里稳定输出随机图。