Gallery Image sizes - original image size isn't available

[ihdk]

Hello, I'd have the question related to images shown by gallery or image block. In gallery are loaded responsive images with srcset attribute, what is pretty good but the link of image point to the downsized image link. Example: I have an image my-image.jpg with size about 2560x1440px in gallery. This is the html output:

<figure>
    <a href="http://mysite.com/wp-content/uploads/my-image-1024x576.jpg">
        <img src="http://mysite.com/wp-content/uploads/my-image-1024x576.jpg" alt="" data-id="1029" data-link="http://mysite.com/images-gallery/my-image/" class="wp-image-1029" srcset="http://mysite.com/wp-content/uploads/my-image-1024x576.jpg 1024w, http://mysite.com/wp-content/uploads/my-image-300x169.jpg 300w, http://mysite.com/wp-content/uploads/my-image-768x432.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px">
    </a>
</figure>

Gallery <img> tag loads downsized image in size 1024x576px my-image-1024x576.jpg, that's good. But <a> tag points to the same downsized image so I can never access the original image. It's the problem for example when some fancybox/lightbox javascript plugin is used for gallery images, user isn't able to open image in original size to see details, he can access only downsized image.

Is there any solution, or recommendation how could we use original image size in the link of image? As an addition to this message, some good fancybox plugins, for example Photoswipe require to have defined image sizes in javacsript. Are there any hooks where we could access images from Gallery or Image block before they are rendered and add them some additional attributes with information about image? - it basically follows on my closed issue #13661

Thanks, Ivan.

[arnowelzel]

Same here.

See https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/ - one gallery is a "Classic" block which links to the real images and below is a Gutenberg gallery which links to reduced size images.

This makes no sense at all.

[Ajkub]

I have this problem too.

I made some tests. When I create gallery block and set option “link to” to media file, gallery shows large-sized images (1024x??? px). When I set this option to attachment page, gallery shows full-sized image. I don’t get it, why it works this way.

Tested on clear theme with all plugins disabled.

[DeaFuriosa]

Just adding: I'm struggling with this too. Normal image block is fine, links to original size. Gallery links to downsized image, which is disgusting. Hope it'll be fixed soon :-)

[BezPowell]

Experiencing the same issue here. It would be brilliant if the <a> tag pointed to the full size image so a lightbox could display the original image to visitors who wanted to 'zoom in'.

[arnowelzel]

Any progress in this issue? There are already people asking for workarounds in my Lightbox plugin: https://wordpress.org/support/topic/gutenberg-gallery-links-to-large-image-instead-of-full-size/

[tomzwick]

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:

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

Have fun!

[arnowelzel]

Another user asking me why his gallery does not show full size images in my plugin which can be zoomed and again I explain that this is not my fault, but an issue of the Gutenberg gallery block:

https://wordpress.org/support/topic/pic-size-smaller-and-no-zoom-using-gallery-vs-single-pic/

Would you please be so kind to check this issue and at least tell us, when a fix can be expected? Thank you!

[Natenom]

This bug is the only reason why I can't switch to the new Gutenberg editor.

Please fix this.

Thank you.

[ihdk]

Hello, any news on this? I think it would help much more developers if image sizes are included in image tags and full size image url used in image link.

Please let us know, if it's planned to fix this issue.

Thanks, Ivan.

[mikerayginter]

I tried tomzwick's solution, but it quickly ran into problems depending on the filename, so I wrote this much more bulletproof javascript and regex workaround that works in every situation unless you have numbersxnumbers(dot) multiple times in your filename (and I very seriously doubt this will happen).

<script>
var galleryLinks = document.querySelectorAll(".wp-block-gallery a");
var i=0;
for (i; i<galleryLinks.length; i++) {
    // Fix for Gutenberg gallery
    // Find this pattern with regex: "-digits(n)xdigits(n)." then replace with a single dot
    var imageLink = galleryLinks[i].href, regex = /-\d*x\d*./;
    galleryLinks[i].setAttribute('href', imageLink.replace(regex, '.'));
}
</script>

Just place this script at the bottom of your template or page.

[a8bit]

How has no one been assigned this yet!?

EDIT: There's a pull request waiting on someone to merge #16011

[arnowelzel]

@ChoccyHobNob It's just about 5 months... why the rush? Sorry, couldn't resist. :-(

[zampai]

Hello, I found that setting the gallery pointing to the attachment page (instead of media file) allow to link full size image. It can temporarily solve the problem. But do we now when this strange behavior will be fixed?

[a8bit]

Yes that works but now we have to edit all the meta for each image, make sure we use a theme that displays attachments properly, give the users another couple of clicks etc.

[ShareTextures]

Still waiting for an update about it.

[skorasaurus]

Perhaps I misunderstand, but this hasn't been resolved even with the merging in #16011. the Full, original image's size is not available for a user to click on when using the "link to media file" option in the gallery block's inspectorControls

To replicate:

~~1. Create a new post

2. add gallery block
3. within gallery block, upload image whose width is > 3000px
4. In the InspectorControl panel, set the image size to "full" and link to to 'media file'
5. publish;~~

~~what I expect: that when the user visits the page containing that gallery block, when they click on the image, the image at the highest resolution when uploaded would appear (uploads/myfilename.jpg). what happens: user clicks on the image, the file is named (filename)-scaled.jpg is not of the same dimensions as the image when originally uploaded.~~

I've confirmed using Gutenberg 7.5.0 and the TwentyTwenty (1.1) theme (and WordPress 5.3.2)

edit: Thanks @blogjunkie! I somehow missed that!

When I've uploaded images whose width is below the big_image_threshold (by default, it's 2560px), the gallery does link to the original image; I am unable to reproduce this bug.

using Gutenberg 7.5.0 and the TwentyTwenty (1.1) theme (and WordPress 5.3.2) You are able to change the threshold (at which WordPress will automatically resize images) or disable it completely;

[blogjunkie]

@skorasaurus thats not related to Gutenberg. Your images are getting scaled by WordPress itself. See: https://make.wordpress.org/core/2019/10/09/introducing-handling-of-big-images-in-wordpress-5-3/

[a8bit]

This is now resolved, at least on my site anyway. It's not retroactive, you will need to remove your old galleries and re-add them back in but once done the 'media file' option links to the full size image not the 'large' image

[noisysocks]

https://github.com/WordPress/gutenberg/pull/16011 fixed this.

[makakaorg]

16011 fixed this.

I am on WP 5.4.1. This is NOT Fixed.

[a8bit]

Maybe we have/had two similar issues. Gallery blocks used to link to a reduced size image if the image was over an internal maximum size and you chose to link to 'Media'. Now it correctly links to the original media file. but existing galleries need to be recreated to pick up the change.

Look at https://atari8bit.net/homebrew-cart-labels/ for an example (The repros gallery hasn't be remade, the other ones have. You can see it linking to the 1024x768 size on the old gallery but the full size image on the rest).

What issue are you still seeing?

[makakaorg]

Maybe we have/had two similar issues. Gallery blocks used to link to a reduced size image if the image was over an internal maximum size and you chose to link to 'Media'. Now it correctly links to the original media file. but existing galleries need to be recreated to pick up the change.

Look at https://atari8bit.net/homebrew-cart-labels/ for an example (The repros gallery hasn't be remade, the other ones have. You can see it linking to the 1024x768 size on the old gallery but the full size image on the rest).

What issue are you still seeing?

I set link => media file. So if I want to have the medium image size with link to full original size, then I got full size image with link to fullsize image. I can't separately set gallery image size and preview size.

[arnowelzel]

See this example - Gutenberg gallery with "medium" size images and linked to the media files:

https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/

I don't see any issues here any longer. However - existing galleries have to be updated or delete/created again, otherwise the fix does not apply.

[makakaorg]

I don't see any issues here any longer. However - existing galleries have to be updated or delete/created again, otherwise the fix does not apply.

It's needed that "upgrade" would be automatic.

Moreover, I noticed that:

1. link to single image (not gallery) file after upgrade is a static link, so it's needed to delete & upgrade it manually to "media file" link option to be dynamic.
2. AMP Page with default AMP Plugin shows thumbnails image galleries as fullscreen thumbnails. It's ugly. When Classic Editor then AMP Page shows fullscreen size image gallery when thumbnail is set in gallery settings.

[mkdizajn]

if you lazy like me, and have 100s of posts with same gallery that is missing dimensions heres fast regex to do that delete/create in one hook (be carefull - this will run always - stop it!)

add_action( 'template_redirect', function (){
    $w = new WP_Query( array( 
        'post_type' => 'portfolio' ,
    ));

    while ( $w->have_posts() ) { // custom Q - never on main loop
        $w->the_post(); $post_id = get_the_ID();
        $con = get_post_field('post_content', $post_id) ;

        // INPLACE GALLERY with same gallery with dimenszins (dont do manully 100s of posts man)
        $con = preg_replace_callback( '/<!-- wp:gallery {"ids":\[(.*)\].*wp:gallery -->/', function ( $match ){
            $h = '<!-- wp:gallery {"ids":[' . $match[1] . '],"columns":1,"sizeSlug":"full","className":"slider"} --><figure class="wp-block-gallery columns-1 is-cropped slider"><ul class="blocks-gallery-grid">' ;
            $arr = explode(',', $match[1] );
            foreach ($arr as $val ) {
                $h .= '<li class="blocks-gallery-item"><figure><img src="' . wp_get_attachment_url( $val )  . '" alt="" /></figure></li>' ;
            }
            $h .= '</ul></figure><!-- /wp:gallery -->' ;
            return $h;
        }, $con );

        // gallery replace with gallery+ (with sizes)
        $post = array(
            'ID'        => $post_id,
            'post_content' => $con
        );

        wp_update_post( $post );
    }   

} );

[skorasaurus]

issue is with older galleries, created before early 2020 (ref https://github.com/WordPress/gutenberg/issues/13851#issuecomment-627478704)

[ndiego]

Yeah, this issue came up in today's Editor Bug Scrub meeting. After testing, we were unable to replicate in the current version of Gutenberg. Therefore, I am going to close this issue.