cajudosu

Hey @mrkfrnkvc,

I made Gutenslider work with a lightbox by hooking into the corresponding ‘render_block’ filter, modifying the slide HTML such that it is the same as if it was rendered as a standard WordPress image block. Then I used the plugin ‘Lightbox for Gallery & Image Block’ from Johannes Kinast that adds a lightbox to each image block that links to its original media file. Works for me.

The following code has to be put into the functions.php of your theme:

/*
 * Modify slides such that they are recognized by the lightbox plugin.
 */
const IMG_SLIDE_TEMPLATE = '<div class="swiper-slide wp-block-eedee-block-gutenslide is-position-center-center" style="">
    <div class="eedee-background-div">
        <figure class="wp-block-image size-medium"><a href="%1$s"><img class="%2$s" src="%3$s" alt="%4$s" style="%5$s"/></a>
        </figure>
    </div>
</div>';

add_filter('render_block_eedee/block-gutenslide', 'foo_modify_slides', 10, 2);
function foo_modify_slides($blockContent, $block) {

    $bg = $block['attrs']['background'];

    $image_style = sprintf(
        'object-fit: %1$s; object-position: %2$s;',
        esc_attr($bg['backgroundImageSize']),
        esc_attr(
            $bg['backgroundFocalPoint']['x'] * 100 . '%% '
            . $bg['backgroundFocalPoint']['y'] * 100 . '%%'
        )
    );

    $image_class = sprintf(
        'swiper-lazy wp-image-%1$s',
        esc_attr($bg['backgroundImage']['id'])
    );

    $medium_src   = wp_get_attachment_image_src(
        $bg['backgroundImage']['id'],
        'medium'
    );

    // when the image gets the wp-image-xxx class srcset sizes width
    // height are added automatically but swiper lazy loading expects
    // data-... attributes so we construct them manually ...
    //
    $background_content = sprintf(
        IMG_SLIDE_TEMPLATE,
        esc_url($bg['backgroundImage']['url']),
        $image_class,
        esc_url($medium_src[0]),
        esc_attr($bg['backgroundImage']['alt']),
        $image_style
    );

    return $background_content;
}

• This reply was modified 4 years, 7 months ago by cajudosu.