data-width and data-height

data-width and data-height are mandatory – without these parameters a link won’t be used for the lightbox as Photoswipe needs to know the width and height of the linked image.

Normally the plugin will add data-width and data-height on its own based on the meta data of the linked image. But this requires the images to be in the HTML code at the time the page is rendered before it is sent to the browser, as this is done by using an server side output filter (see https://github.com/arnowelzel/lightbox-photoswipe/blob/master/lightbox-photoswipe.php#L226, line 226-330). If the images are added dynamically using JavaScript only, this won’t work.

If the images are in the HTML already and it still doesn’t work automatically, then there maybe a compatibility issue with some other plugin which adds the images after the output filter of Lightbox with PhotoSwipe was already applied.

• This reply was modified 5 years, 3 months ago by Arno Welzel. Reason: Added line number to the Github link

I added this to the functions.php file for now and fixed the block gallery. I just need a way to add it to the classic gallery as well.

/*Lightbox*/
add_filter('the_content', 'add_lightbox_rel');
function add_lightbox_rel( $content ) {
       global $post;
       $get_img ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
       $img_replace = '<a$1href=$2$3.$4$5 rel="lightbox['.$post->ID.']" title="'.$post->post_title.'" data-width=" " data-height=" "$6>';
       $content = preg_replace($get_img, $img_replace, $content);
       return $content;
}

Could you add the code to the plugin when it all works? This might fix many incompatible plugins like the ones I was using over the years.

I did see that Kadence Blocks had somehow come up with code that wasn’t injecting data-width or data-height and it was working somehow.

I’m so happy after years of mucking around with this, I finally figured out a way to get the lightbox working ^^

Sorry – but this solution is not a fix! Don’t use this!

data-width and data-height must contain the width and height of the image and not just a empty " ".

The real question is: why does the content filter of my plugin not work on your website? Do you have some website caching plugins active – and if yes, which ones?

Edit: I will check, if using the filter for the_content in my plugin will work better than catching the output buffer, but having the correct image sizes in the attribute is mandatory, it’s not enough just to have empty attributes there.

• This reply was modified 5 years, 3 months ago by Arno Welzel.
• This reply was modified 5 years, 3 months ago by Arno Welzel.

I just checked, if the filter the_content is sufficient – no it is not. The problem is, that the_content will return the post or page as it is stored in the database and before any shortcodes are processed. This means, if there is any gallery, it would still be ther as [gallery ...] and therefore my plugin would not see any of the images.

Therefore I won’t change anything. Please tell me, if you use a caching plugin – maybe this interferes with Lightbox with PhotoSwipe. As a test you may try the following:

First remove your “fix” in functions.php and then in /wp-content/plugins/lightbox-photoswipe/lightbox-photoswipe.php, line 71, replace

add_action('template_redirect', array($this, 'outputFilter'), 99);

with:

add_action('template_redirect', array($this, 'outputFilter'), PHP_INT_MAX);