uiKit lightbox for post content images.

It took me quite an embarassing amount of time to figure out how to properly add a lightbox to page and post content images so I thought I should share it for others. The question did come up in the beans community a couple of times without a real answer so here is mine.

The hard part for me was to get it to add the lightbox image link if, and only if, you choose Link To Media File, and also to get it to insert the image at the correct size. Here you go:

// add uikit lightbox
add_action( 'beans_uikit_enqueue_scripts', 'enqueue_uikit_lightbox_asset' );
function enqueue_uikit_lightbox_asset() {
        beans_uikit_enqueue_components( 'lightbox', 'add-ons' );
}

// add the lightbox to content images
function filter_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt) {

    // get the proper width, height, and attributes for the image
    $img = get_image_tag($id, $alt, $title, $align, $size);

    // only apply uiKit lightbox if image is set to link to media file
    $image_href = wp_get_attachment_url($id);
    if ($image_href == $url ) {
        $html = '<a href="'.$url.'" data-uk-lightbox="" data-lightbox-type="image">'.$img.'</a>';
  };

  return $html;
}

add_filter('image_send_to_editor', 'filter_image_send_to_editor', 10, 8);

Hi Jonathan

I have tried the code but I am not getting it to work. Clicking the image just opens it the regular WordPress way. Hopefully there is an easy fix for it.

Thanks!

Hey Paal. Give this a try

add_filter( 'image_send_to_editor', 'add_lightbox_to_image_in_editor', 10, 8 );
function add_lightbox_to_image_in_editor( $html, $id, $caption, $title, $align, $url, $size, $alt ) {

    $img_size = wp_get_attachment_image_src( $id, 'full' );

    if ( $url === $img_size[0] ) {

        $html = str_replace( '<a href', '<a data-uk-lightbox href', $html );

    }

    return $html;
}

Thank you Trevor! Not working yet, but I am hopefully soon there..:)

This is what I did.

I enqueued:

add_action( 'beans_uikit_enqueue_scripts', 'lightbox_example' );
function lightbox_example() {
         beans_uikit_enqueue_components( array( 'lightbox' ), 'add-ons' ); 
}

Then added:

add_filter( 'image_send_to_editor', 'add_lightbox_to_image_in_editor', 10, 8 );
function add_lightbox_to_image_in_editor( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
    $img_size = wp_get_attachment_image_src( $id, 'full' );
    if ( $url === $img_size[0] ) {
        $html = str_replace( '<a href', '<a data-uk-lightbox href', $html );
    }
    return $html;
}

It did not work using WordPress 5.0. I feel like I am missing just a little thing which I have not been able to locate yet.

Hey Paal, I just tested again using Wordpress 5.0 and I'm actually not able to add an image with a link at all. Is this also the case for you?

We may be running into another Gutenberg issue here. I've tested the code with the classic editor plugin installed and it functions as intended.

Hey Trevor

I just tested it again. This time in in WordPress 4.9 with the default classic editor. For me it did not work. I am using Desktop Server with a local site.

I then updated to WP 5.0.1. Selected the image and selected link to media. Btw Adding a link to an image with Gutenberg needs to be done in the image settings in the right sidebar. This means click/select the image and then look for Link Settings in the right sidebar.

Haha, thanks for that Paal, I definitely didn't see that. The only time I've actually used the new editor is when i've been looking at issues for Beans.

I'm kind of at a loss as to why it's not working for you with the classic editor. If you look at the text tab is data-uk-lightbox being inserted?

We may need to go a different route anyways, as the image_send_to_editor filter only applies to the classic editor, and there is no Gutenberg equivalent.

Hello,

After a few hours of coding around in circles I've found a easy way to add lightbox to Gutenberg Gallery using jQuery.

First make sure Link To Media File is set in the gallery options. then use the following to add the Lightbox data attribute :

$(".blocks-gallery-item figure a").attr('data-uk-lightbox', '');

Also make sure lightbox is enqueued in your functionx.php

Cheers,

m

Hello, Thanks to everyone who helps here. I think I found one way to create galleries in pages and posts:

// Smaller grid between gallery images
beans_add_attribute( 'beans_post_gallery', 'class', 'uk-grid-medium' );

// Set new gallery defaults
function sam_gallery_defaults( $settings ) {
    $settings['galleryDefaults']['link'] = 'file';
    $settings['galleryDefaults']['size'] = 'thumbnail';
    $settings['galleryDefaults']['columns'] = '4';
    return $settings;
}

add_filter( 'media_view_settings', 'sam_gallery_defaults' );

// Adding UIKit's lightbox to a WordPress Gallery
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
function example_enqueue_uikit_assets() {
    // Add lightbox.
    beans_uikit_enqueue_components( 'lightbox', 'add-ons' );
}

// Adds lightbox to gallery links
add_filter('wp_get_attachment_link', 'rc_add_rel_attribute');
function rc_add_rel_attribute($link) {
    global $post;
    return str_replace('<a href', '<a data-uk-lightbox="{group:\'group1\'}"  href', $link);
}

Then you need to do:

1. Install TinyMCE Advanced
2. Then, for example in Post go to classic paragraph mode: https://d.pr/free/i/4tk6vY
3. Select "Add Media" https://d.pr/free/i/olexMN
4. Select "Create Gallery" https://d.pr/free/i/rOrsuL Select images and paste them into the post.
5. The selected images will be one gallery https://d.pr/free/i/DrvQMM
6. And will open like this: https://d.pr/free/i/AzWtBF

It works for me in both posts and pages wordpress-5.1.1 + Gutenberg

A solution with JS that adds lightbox to all images, without any plugins:

1. Enqueu JS (if you don't have it), for example:

function wst_enqueue_uikit_assets() {

    beans_compiler_add_fragment( 'uikit', array(
        CHILD_URL . '/assets/js/animatedtext.js',
        CHILD_URL . '/assets/js/theme.js'
    ), 'js' );

2. Then for example in file theme.js insert this code:

(function ($) {
    jQuery(function(){
$('.wp-block-image img').each(function(i,el){
    $(el).wrap('<a href="' + $(el).attr('src') + '" data-uk-lightbox="" data-lightbox-type="image" />');
});
$('.blocks-gallery-item img').each(function(i,el){
    $(el).wrap('<a href="' + $(el).attr('src') + '"<a data-uk-lightbox="{group:\'group\'}" />');
});
}); 
})(jQuery);

This code takes the link from the img and inserts it into the href and wraps the <img src

It works for me in both posts and pages Wordpress-5.1.1 + Gutenberg without any plugins.