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 古腾堡块中的预览图像的主要内容,如果未能解决你的问题,请参考以下文章

古腾堡核心块 - 删除选项

JavaScript (WordPress) 中的古腾堡编辑器内容

laravel 5.1中的PDF图像缩略图预览?

如何在古腾堡块中创建多个元字段

增加管理员中的django-filer预览/缩略图图像

图像编辑后如何更新android画廊的缩略图预览