Gutenberg gallery links to large image instead of full-size

The problem is, how Gutenberg galleries work – they don’t create links to the full size images. This is a known issue of Gutenberg. Also see the bug report here:

https://github.com/WordPress/gutenberg/issues/13851

So far, I don’t know any workaround and I won’t create any special handling in Lightbox with PhotoSwipe, since this has to be solved in Gutenberg itself, sorry.

Hi Arno,

thanks for your reply and the actions you took on github.
Let`s hope this will be solved soon.

Kind Regards,
Tom

Hi Arno,

until this issue is addressed in the gutenberg-code, I made a quick & dirty workaround with JavaScript that works fine for me:

It modifies the href attributes for the links and sets the data-widht and data-height attributes to “0”. It has to be placed in the footer or at least after the gutenberg gallery html markup:

<!-- modify gutenberg gallery block to display the images in full-size by Thomas Zwick -->
<script type="text/javascript">
	var galleryLinks = document.querySelectorAll('.blocks-gallery-item > figure > a');	
	for (var i = 0; i < galleryLinks.length; i++) {
		var pos = galleryLinks[i].href.lastIndexOf("-"); // get the position of the last "-"
		var posFileExtension = galleryLinks[i].href.lastIndexOf("."); // get the position of the last "."
		var fileExtension = galleryLinks[i].href.slice(posFileExtension); // extract file-extension from href		
		galleryLinks[i].href = galleryLinks[i].href.substring(0, pos) + fileExtension; // set the new href attribute to full size		
		galleryLinks[i].setAttribute("data-width", "0"); // set data-width to "0"
		galleryLinks[i].setAttribute("data-height", "0"); //set data-height to "0"
	}
</script>
<!-- end modify gutenberg gallery block -->

I had to disable the function to close the overlay by scrolling in the plugin settings because there were javascript errors with the “0” data-width & data-height attributes.

• This reply was modified 5 years, 8 months ago by tzwick.
• This reply was modified 5 years, 8 months ago by tzwick.
• This reply was modified 5 years, 8 months ago by tzwick.

Thanks for this addition. As you already found out yourself, the attributes data-width and data-height must not be 0 as these values are needed by Photoswipe so it knows about the image size before the images are displayed.

However – since Lightbox with PhotoSwipe modifies the HTML code anyway, it could also fix the image URLs on the fly within the plugin. I’ll see, what I can do – even though it would be much better, if Gutenberg would just use the correct URL.

There is a way to get the real image size from a JavaScript image object:

var img = document.getElementById('imageid');  
var width = img.naturalWidth; 
var height = img.naturalHeight;

And with PHP:

<?php list($width, $height) = getimagesize("imageURL"); ?>

But this would not be “quick & dirty” ^^

Thanks – I already determine the image size within the plugin (see line 272 of lightbox-photoswipe.php). I just need to check, if URL of the linked images are links to the full size images or not and modify the URL if needed.