Background image doesn't render in Gutenberg

This topic has 8 replies, 4 voices, and was last updated 2 months, 1 week ago by metafan.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts

December 11, 2024 at 6:34 PM #47165

metafan

Participant

Hi,

the background image doesn't render in Gutenberg Editor, when I implement it as an inline style element.

$image = RWMB_Image_Field::file_info( $my_image, ['size' => 'full'] );
<div style="background-image: url('.$image['url'].')"></div>

The source code in the browser in Gutenberg:
<div style="background-image: url("https");"></div>
I only get 'https', not the full url.

The output string of $image['url'] is ok. It works well, when I implement it with html src element:
<img src="'.$image['full_url'].'">

The output on the frontend (website) works fine.

Any ideas? Thanks!

December 16, 2024 at 1:42 PM #47182

Peter

Moderator

Hello metafa,

I'm using this code to output the image URL subfield value in a group and it works properly on my demo site:

$image = RWMB_Image_Field::file_info( $my_image, ['size' => 'full'] );
$image_url = $image['url'];
?>
<div style="background-image: url(<?php echo $image_url ?>)"></div>

Can you please share the code that you use to register the block or export the field group to a JSON file and share it here? I will help you check the issue.

Following the documentation https://docs.metabox.io/extensions/meta-box-builder/#export--import

December 16, 2024 at 6:58 PM #47189

metafan

Participant

Hi Peter,

this code also works for me in the frontend, but not in the backend (Gutenberg). The image isn't visible in the editor.

I think, not the registration is the problem, cause the output of the variable ($image_url) is ok.

I register the block with this code:

<?php
add_filter( 'rwmb_meta_boxes', 'custom_blocks_mc_teaser_boxes' );

function custom_blocks_mc_teaser_boxes( $meta_boxes ) {
    $prefix = 'mc-';

    $meta_boxes[] = [
        'title'           => __( 'MC Teaser Boxen', 'custom-blocks' ),
        'id'              => 'mc-teaser-boxes',
        'description'     => 'MC Teaser Boxen',
        'icon' => [
            'background' => '#c2b7ae',
            'foreground' => '#fff',
            'src' => 'images-alt',
        ],
        'category'        => 'mc',
        'keywords'        => ['teaser', 'box', 'mc'],
        'supports'        => [
            'align' => ['left', 'right', 'center', 'wide', 'full'],
        ],
        'render_template' => plugin_dir_path( __FILE__ ) . 'template.php',
        'enqueue_assets' => function() {
            wp_enqueue_style( 'mc-teaser-boxes-styles', plugin_dir_url( __FILE__ ) . 'mc-teaser-boxes-styles.css' );
        },
        'type'            => 'block',
        'context'         => 'side',
        'fields'          => [
            [
                'type' => 'group',
                'id'   => 'teaser-boxes-rows',
                'name' => 'MC-Teaser-Elemente',
                'group_title' => 'Teaser {#}',
                'clone' => true,
                'sort_clone' => true,
                'collapsible' => true,
                'fields' => [
                
                    [
                        'name'              => __( 'Bild', 'custom-blocks' ),
                        'id'                => $prefix . 'teaser-boxes-img',
                        'type'              => 'single_image',
                        'required'          => true,
                    ],
                    [
                        'name'              => __( 'Überschrift (fett)', 'custom-blocks' ),
                        'id'                => $prefix . 'teaser-boxes-headline',
                        'type'              => 'text',
                    ],
                ],
            ],
        ],
    ];

    return $meta_boxes;
}

and this is the template:

<div class="mc-teaser-boxes">
    <div class="mc-teaser-boxes-wrap">
        <?php
        $groups = mb_get_block_field( 'teaser-boxes-rows' );
        foreach ( $groups as $group ) {
            $image = RWMB_Image_Field::file_info( $group['mc-teaser-boxes-img'], ['size' => 'full'] );
            
            echo '<div class="teaser-boxes-sub">';
                echo '<div class="mc-teaser-boxes-bg-box">';
                    echo '<div class="mc-teaser-boxes-img" style="background-image: url('.$image['url'].')"></div>';
                    echo '<div class="mc-teaser-boxes-border">';
                        echo '<div class="mc-teaser-boxes-txt-box">';
                            echo '<h3>'.$group['mc-teaser-boxes-headline'].'</h3>';
                            echo '<p>'.$image['url'].'</p>';
                        echo '</div>';
                    echo '</div>';
                echo '</div>';
        }
        ?>
    </div>
</div>

I put $image['url'] in a paragraph tag for debugging. You will see, the url is ok.

Thanks!

December 16, 2024 at 9:13 PM #47190

Peter

Moderator

Hello,

Thanks for the details. I see that issue on the demo site. I'm escalating the issue to the development team to take a look and get back to you later.

December 17, 2024 at 1:35 PM #47196

Tan Nguyen

Participant

Dear metafan,

I have check and confirmed its our bug when transforming html attribute to jsx, the background-image is quite special since this may contains https:// so there is two colons inside the string, we splited wrong position.

I have fixed it and you'll get an update soon.

Cheers!

December 17, 2024 at 4:04 PM #47198

metafan

Participant

Hello Peter, hello Tan,

thanks for the quick fix!!

January 8, 2025 at 9:13 PM #47336

Bjarte Olsen

Participant

Hi,

I use the latest MB Blocks version 1.7.3, and have this issue in custom blocks.
Can you please let me know when a new release will be available?

Thank you

January 27, 2025 at 6:28 PM #47549

metafan

Participant

Yes, would be nice to get an update soon!
Any concrete time plan?

Thanks

February 5, 2025 at 5:24 AM #47594

metafan

Participant

Fixed in Version 1.7.4

Thank You!

Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.