ACF 古腾堡块中的预览图像
Posted
技术标签:
【中文标题】ACF 古腾堡块中的预览图像【英文标题】:Preview image in ACF gutenberg block 【发布时间】:2021-06-22 09:07:23 【问题描述】:在使用 ACF 注册块时,是否可以将图像添加到 Gutenber 块预览中?
这是注册块的代码:
acf_register_block(array(
'name' => 'bk-raisons',
'title' => __('Les raisons', 'diezel'),
'description' => __('Les raisons', 'diezel'),
'render_callback' => 'my_acf_block_render_callback',
'category' => 'spira-custom',
'icon' => 'align-wide',
'keywords' => array('bk-raisons'),
));
悬停块时会出现预览。
谢谢!
【问题讨论】:
您好,您找到解决方案了吗?我很有趣 不幸的是…… 【参考方案1】:我终于找到了解决办法。
我不知道你是否使用 Twig (Timber)。
如果不检查:https://***.com/a/67846162/6696150
我对 Timber 的看法
当你声明你的块时,添加示例属性:
$img_quadruple = array(
'name' => 'img-quadruple',
'title' => __('Quatre images'),
'title_for_render' => 'img-quadruple',
'description' => __(''),
'render_callback' => 'ccn_acf_block_render_callback',
'category' => 'imgs',
'icon' => '',
'mode' => 'edit',
'keywords' => array( 'quatre images' ),
'example' => array(
'attributes' => array(
'mode' => 'preview',
'data' => array(
'preview_image_help' => get_template_directory_uri().'/assets/img/preview/preview_img_quadruple.jpg',
),
)
)
);
当你声明你的回调时:
function ccn_acf_block_render_callback( $block, $content = '', $is_preview = false )
$context = Timber::context();
// Store block values.
$context['block'] = $block;
// Store field values.
$context['fields'] = get_fields();
// back-end previews
if ( $is_preview && ! empty( $block['data'] ) )
echo '<img src="'. $block['data']['preview_image_help'] .'" style="width:100%; height:auto;">';
return;
elseif ( $is_preview )
echo 'Other condition';
return;
// Store $is_preview value.
$context['is_preview'] = $is_preview;
// Render the block.
Timber::render('gutenberg/gut_' . strtolower($block['title_for_render']) . '.twig', $context );
【讨论】:
以上是关于ACF 古腾堡块中的预览图像的主要内容,如果未能解决你的问题,请参考以下文章