Lightbox images

Hi, sorry for my bad English. How to create a Lightbox for all images?

Thank you

Hey Walter, great question 🙂 Which images are you referring to, the post image? If yes, here is a code snippet may add to your child theme functions.php.

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {

 // Only add lightbox if singular.
 if ( is_singular() )
    beans_uikit_enqueue_components( 'lightbox', 'add-ons' );

}

add_action( 'wp', 'example_setup_document' );

function example_setup_document() {

 // Only add lightbox if singular.
 if ( is_singular() )
    beans_wrap_markup( 'beans_post_image_item_wrap', 'example_post_image_lightbox', 'a', array(
     'href' => wp_get_attachment_url( get_post_thumbnail_id() ),  // Automatically escaped.
      'data-uk-lightbox' => '',
   ) );

}

The code snippet above loads the UIkit lightbox component only on singular view and wrap the singular view post image in a link with the data-uk-lightbox.

If you want to apply this to your posts loop, you will face a challenge with the href. It is a good exercise but if you start pulling your hair with it (set a 15 minutes trying period for example), don't hesitate to ask and I will help you with it 🙂

Thanks,

PS: don't worry about your English, mine is far from being perfect 🙂

Hi Thierry, i want to add lightbox to all images if possible. Your code is perfect, but it works only for featured images. I would like to create a Portfolio template that use Lightbox. Is the first time i use a framework and I think Beans is a great project. Thanks for your patience. PS. I am translating Beans in Italian language.

Hey Walter,

I would love to help you with that but I need a bit more info from you. Could you maybe let me know which images (example: post featured images, gallery images etc.) in particular?

Great news about the Italian translation. Manual sent me a translation which you can find here and it might help. Translating Beans is definitely high on the road map and will surely arrive in the course of this year 🙂 I will update this thread when I have more news about it.

Thanks,

Hey Thierry, for post featured images your code is perfect. I want to add lightbox to all images included in post/pages (not featured images only) or to create gallery images.

Thanks

Hi Walter,

Below is the code snippet to apply to all featured post images, whether it is on a single or index view.

add_action( 'wp', 'example_setup_document' );

function example_setup_document() {

 // Remove the default featured image link to the article since we replace it in a lightbox link.
  beans_remove_markup( 'beans_post_image_link' );

 // Wrap featured image in a lightbox.
 beans_wrap_markup( 'beans_post_image_item_wrap', 'example_post_image_lightbox', 'a', array(
   'href' => '#', // Nothing here as we have to handle it in example_post_image_attributes().
    'data-uk-lightbox' => '{group:\'post-images\'}',
    'class' => 'uk-display-block',
  ) );

}

// We have to set the href in a callback to make sure we get the correct url since the posts are in a loop.
add_filter( 'example_post_image_lightbox_attributes', 'example_post_image_attributes' );

function example_post_image_attributes( $attributes ) {

 $attributes['href'] = wp_get_attachment_url( get_post_thumbnail_id() ); // Automatically escaped.

 return $attributes;

}

It is important that you don't just copy and paste the snippet but rather look into it and understand what it does.

When it comes to your post content images and gallery, this goes to a level of customization which I can unfortunately not provide on the forum. It really goes down to WordPress Core and I will have to let you figure that out. My clue would be to look at wp_make_content_images_responsive.

Hope that helps,

Thanks so much Thierry for your suggestions, are very useful.

Hey Thierry! But who needs a lightbox for the featured images? I think nobody.

The images with higher resolutions are normaley in the content, which need to be viewed in the full-sized lightboox.

Jochen

Thierry could you also add the code snippet to open post/page content images in a lightbox? Thank you.

Hi Paal,

Kindly refer to my reply above when it comes to the post image and gallery. It is specific to WordPress Images HTML so I will let you digg in the code to find the appropriate filters to modify their HTML.

Thanks,

Or just use a other lightbox plugin.

Somebody have a suggestion for a very lightweight lightbox plugin?

Hey Jochen

I will need to do som research on getting the correct UIKit and Beans mix of getting images in a post or page to open in a lightbox, but an alternative for now is something like the tutorials I have made: http://easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/

Check out Magnific popup in the above tutorial.

Thanks, I will look at your article.

Maybe it is better to move the lightboox feature into a Beans Plugin, to avoid that our Beans themes get too much bloated.

Hey Jochen,

You can with for the Responsive Lightbox Plugin one of my client was using this for his photography website. This is a very lightweight and responsive plugin.

You can use this if you are facing difficulties.

Using a lightbox plugin is a bit overkill since you have everything you need in UIkit.

I re-located to Switzerland yesterday so I can't write the code right now but I am marking this post in my favorite and will try to put it together for you guys 🙂

Thanks,

Your the man 🙂

This thread has yet to receive a solution to how to use lightbox with post and page content images. It would be really nice if we could get a good working lightbox sorted out. I will then finally also be able to create a tutorial showing how it is done.

This thread shows how to add a lightbox to a gallery: https://community.getbeans.io/discussion/adding-uikits-lightbox-to-a-wordpress-gallery/

How would one also show image caption or image title to a gallery or single post image lightbox? How would one adjust the animation that is added to the lightbox (gallery or single post images)?

I am looking forward to getting a working lightbox for the post/page content images. Thank you!

But do not forget there are also many free materials such as http://fixthephoto.com/blog/retouch-tips/4-photo-editing-levels-in-1-photograph.html