Support » Plugin: Lightbox with PhotoSwipe » Gutenberg gallery links to large image instead of full-size

  • tzwick

    (@tzwick)


    … since 5.1 (I think).

    Is there any known workaround for it that doesn`t include using the classic gallery?

    I could use mod_rewrite.c in .htaccess to modify the image-filenames but then all “large” images load in “full-size”… Maybe there is anything I can do in the functions.php?

    It is the same on your page:
    https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/

    Thank you for the plugin!

    • This topic was modified 1 year ago by tzwick.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    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.

    tzwick

    (@tzwick)

    Hi Arno,

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

    Kind Regards,
    Tom

    tzwick

    (@tzwick)

    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 1 year ago by tzwick.
    • This reply was modified 1 year ago by tzwick.
    • This reply was modified 1 year ago by tzwick.
    Plugin Author Arno Welzel

    (@awelzel)

    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.

    tzwick

    (@tzwick)

    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” ^^

    Plugin Author Arno Welzel

    (@awelzel)

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Gutenberg gallery links to large image instead of full-size’ is closed to new replies.