data-width and data-height

a4jp
(@a4jpcom)

6 years, 10 months ago

How do I make this plugin work on my iPhone without data-width and data-height? I can see by adding the sizes directly to the anchor code in Chrome that I can click on an image and the plugin suddenly works. Is there any way to inject data-width and data-height into the images so they work? Any help on either adding something to the functions.php file or getting an update to add the sizes would be great.

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author Arno Welzel
(@awelzel)

6 years, 10 months ago
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 6 years, 10 months ago by Arno Welzel. Reason: Added line number to the Github link
Thread Starter a4jp
(@a4jpcom)

6 years, 10 months ago
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 ^^
Plugin Author Arno Welzel
(@awelzel)

6 years, 10 months ago
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 6 years, 10 months ago by Arno Welzel.
- This reply was modified 6 years, 10 months ago by Arno Welzel.
Plugin Author Arno Welzel
(@awelzel)

6 years, 10 months ago

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);

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘data-width and data-height’ is closed to new replies.