example of lazy-blocks images

lazy-blocks-image.php

/*
https://github.com/nk-o/lazy-blocks/issues/22
*/

if ( function_exists( 'lazyblocks' ) ) :


/**
     * Test Render Callback
     *
     * @param array $attributes - block attributes.
     */

       function lazyblock_test_render_callback( $attributes ) {
        
        $image=($attributes['image']); //print_r($image);
        $srcset = wp_get_attachment_image_srcset( $image["id"], "medium" , true);
    
        if ($srcset==""){
            $srcset=  $image["url"]." 320w";
        }

        echo '<div class="wrapper">
                <img class="lazyload" src="'.$image["url"].'" sizes="auto" srcset="'.$srcset.'" alt="'.$image["alt"].'"/>
              </div>';
        
    }
    
/**
* Add Block
*/


lazyblocks()->add_block( array(
    'id' => 1944,
    'title' => 'm_image',
    'icon' => 'dashicons dashicons-format-image',
    'keywords' => array(
    ),
    'slug' => 'lazyblock/mimage',
    'description' => 'Image',
    'category' => 'common',
    'category_label' => 'common',
    'supports' => array(
        'customClassName' => true,
        'anchor' => false,
        'align' => array(
            0 => 'wide',
            1 => 'full',
        ),
        'html' => false,
        'multiple' => true,
        'inserter' => true,
    ),
    'controls' => array(
        'control_de2b444521' => array(
            'sort' => '',
            'child_of' => '',
            'label' => 'image',
            'name' => 'image',
            'type' => 'image',
            'min' => '',
            'max' => '',
            'step' => '',
            'date_time_picker' => 'date_time',
            'multiline' => 'false',
            'default' => '',
            'checked' => 'false',
            'placement' => 'inspector',
            'save_in_meta' => 'false',
            'save_in_meta_name' => '',
        ),
    ),
    'code' => array(
        'editor_html' => '<img src="{{image.url}}" alt="{{image.alt}}"/>',
        'editor_css' => '',
        'frontend_callback' => 'lazyblock_test_render_callback',
        //'frontend_html' => 'custom',
        //'frontend_css' => '',
    ),
    'condition' => array(
    ),
) );

endif;