Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gallery Image sizes - original image size isn't available #13851

Open
ihdk opened this Issue Feb 13, 2019 · 8 comments

Comments

Projects
None yet
8 participants
@ihdk
Copy link

ihdk commented Feb 13, 2019

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

This comment has been minimized.

Copy link

arnowelzel commented Feb 16, 2019

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

This comment has been minimized.

Copy link

Ajkub commented Feb 25, 2019

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

This comment has been minimized.

Copy link

DeaFuriosa commented Mar 8, 2019

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

This comment has been minimized.

Copy link

BezPowell commented Mar 10, 2019

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

This comment has been minimized.

Copy link

arnowelzel commented Mar 13, 2019

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

This comment has been minimized.

Copy link

tomzwick commented Mar 13, 2019

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

This comment has been minimized.

Copy link

arnowelzel commented Mar 14, 2019

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 comment has been minimized.

Copy link

Natenom commented Mar 31, 2019

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

Please fix this.

Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.