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
  • #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.

    #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.

    #30840
    matijamatija
    Participant

    Hello Long,

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

    Thank you

    #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'
        ],
    ],
    #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

    #31069
    matijamatija
    Participant

    Never got a response to this??

    #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

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