Meta Box

How to use an image as Gutenberg block preview?

Support › MB Blocks › How to use an image as Gutenberg block preview?Resolved

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 11, 2020 at 1:18 AM #18971
    MauroMauro
    Participant

    Hello, in the tutorial it's stated that a block preview (the one that appears in the blocks selection popover, not in the main editor area) -- is a rendered version of the block with sample data.

    However it looks like it is possible to use a static image instead, which would be my preference since the small preview area won't allow most of my custom blocks to render correctly.

    I found a tutorial to use an image as the block preview (see link below), how can I do the same for blocks created with MB Blocks?

    https://mediaron.com/how-to-enable-gutenberg-block-previews/

    Thank you!
    Mauro.

    April 12, 2020 at 9:37 PM #18991
    Long NguyenLong Nguyen
    Moderator

    Hi Mauro,

    The extension MB Blocks supports to show the image on the preview block area, please follow the documentation and see my screenshot.

    Remember to create the property name as the same as the field ID and the preview area will render the template of the block with the preview value.

    September 20, 2021 at 3:10 PM #30840
    matijamatija
    Participant

    Hello Long,

    your screenshot is not there anymore. Could you please re-upload it?

    Thank you

    September 20, 2021 at 8:41 PM #30849
    Long NguyenLong Nguyen
    Moderator

    Hi,

    Yes, here is the link https://imgur.com/RXAihQ4
    and sample code:

    'preview'         => [
    'image'   => 2140, //image ID
    'name'    => 'William Shakespeare',
    'content' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam'
],
'fields'          => [
    [
        'type' => 'text',
        'id'   => 'name',
        'name' => 'Name',
    ],
    [
        'type' => 'textarea',
        'id'   => 'content',
        'name' => 'Intro',
    ],
    [
        'type' => 'single_image',
        'id'   => 'image',
        'name' => 'Image'
    ],
],
    September 21, 2021 at 2:19 PM #30867
    matijamatija
    Participant

    Thank you Long.

    Can I use part of the code just for the preview in Block Render > Code settings, since everything else for the block is set via your MB builder UI?

    Thank you so much!

    block render

    September 29, 2021 at 3:40 PM #31069
    matijamatija
    Participant

    Never got a response to this??

    September 29, 2021 at 8:26 PM #31072
    Long NguyenLong Nguyen
    Moderator

    Hi Matija,

    Please refer to this topic https://support.metabox.io/topic/how-to-render-block-preview-from-meta-box-builder/#post-31071

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.