Adding UIKit's lightbox to a WordPress Gallery

Hopefully I can make this not too confusing: I want to tell Beans to add lightbox to image galleries automatically but I'm having difficulty figuring out how to target the correct item. The closest I have gotten is:

beans_add_attribute('beans_post_gallery_icon', 'data-uk-lightbox', '{group:\'gallery\'}');

But this adds lightbox to the div that wraps the link and thumbnail, not the link. To clarify, that's:

<div class="gallery-icon landscape" data-uk-lightbox="{group:'gallery'}" data-markup-id="beans_post_gallery_icon[_406]">
    <!-- open output: beans_post_gallery_icon[_406] -->
    <a href="http://localhost/sites/wp-content/uploads/2018/07/img1.jpg">
        <img width="150" height="150" src="http://localhost/sites/wp-content/uploads/2018/07/img1-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-2-17">
    </a>
    <!-- close output: beans_post_gallery_icon[_406] -->
</div>

Is there a way to modify the output of gallery icons in Beans? How would one add the "data-uk-lightbox="{group:'gallery'}"" code to the a tag but keep all of the other variables the same? So that it displays this instead:

<div class="gallery-icon landscape" data-markup-id="beans_post_gallery_icon[_406]">
    <!-- open output: beans_post_gallery_icon[_406] -->
    <a href="http://localhost/sites/wp-content/uploads/2018/07/img1.jpg" data-uk-lightbox="{group:'gallery'}">
        <img width="150" height="150" src="http://localhost/sites/wp-content/uploads/2018/07/img1-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-2-17">
    </a>
    <!-- close output: beans_post_gallery_icon[_406] -->
</div>

Hi, I found a way of adding the lighbox attribute to WP galleries by using this code.

// 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="" href', $link);
}

Hope this helps!

Hei Keith

Thanks for the code! I pasted

beans_add_attribute('beans_post_gallery_icon', 'data-uk-lightbox', '{group:\'gallery\'}');

and your code into the functions.php file. Opened up a post and added 3 images into a gallery and then selected to have them link to the media file. Then tested the post. The lightbox did not work. So that would mean something is likely missing....

Btw I am working on figuring out how to get the regular lightbox and now this gallery lightbox to work, and will create a tutorial out of it that I can add to https://wpbeansframework.com/

You don't need the second bit of code only the code I posted. If it still isn't working then make sure the UIkit lightbox is being added.

function example_enqueue_uikit_assets() {

 // Add lightbox.
    beans_uikit_enqueue_components( 'lightbox', 'add-ons' );

}

The code goes in functions btw.

That is great Keith! I got it working..:)

A summary of the code used added into the functions.php file:

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="" href', $link);
}

Do you know how to.... How would I go about customizing the animation when the lightbox opens? How would I show the caption in the lightbox?

--

How would I add a lightbox to regular images inside a post or page?

Hopefully your able to answer. It would be great to finally get these things working! Thanks again Keith!