[Resolved] Toolset Image Gallery via Elementor Gallery Widget

[Author]

Posts

[kristofG]

I am trying to display a Toolset Image Gallery via the Elementor Gallery Widget. I have been able to achieve this already on other websites, however on this new one, the images don't show. I have checked the settings with the other sites where it does work, but I only see 1 difference. In the 'broken' site, the div attribute " --container-aspect-ratio:NaN%;" But I don't know where that comes from.

hidden link works
hidden link no gallery beneath the Featured Image

[Nigel]

Hi there

I'm not sure what you mean exactly with try "to display a Toolset Image Gallery via the Elementor Gallery Widget".

I assume by "Toolset Image Gallery" (which is a block to display galleries) you simply mean an image field that accepts multiple values.

Looking at the link you shared where it is not working, perhaps the "--container-aspect-ratio:NaN%;" attribute simply reflects the fact that the div is empty and doesn't include any images.

How does the Elementor gallery widget work? Can it take a custom field meta_key and use that to extract a series of img urls from the corresponding meta_values?

[kristofG]

1/ an image field that accepts multiple values > correct
2/ Yes, the Elementor Gallery Widget accepts a custom field instead of manually picked images.

[Nigel]

And does the gallery widget expect the values of the custom field to be image URLs? (I know that some of these gallery implementations expect IDs of the media attachment posts.)

[kristofG]

I am not sure what the Elementor Widget expects as value of the custom fields.

All I know is that is has worked on at least 2 other sites (hidden link green bar at the bottom) and (hidden link below the featured image) but not here hidden link

I have tried with only Elementor, Elementor Pro and Toolset enabled and TwentyTwenty theme, it does not fix the issue. Again, I have this working on other sites. Alle sites are on Toolset Version 3.4.16.

[Nigel]

Without knowing what the Elementor Gallery expects (IDs or URLs) we are not really in a position to say whether it would be expected to work.

How about you set up an example on this sandbox site where we can investigate.

hidden link

(The first thing I would do is to try manually adding static images to the gallery module and then seeing if it is possible to see from the settings whether it is working with IDs or URLs.)

[kristofG]

Is it ok if I create a clone via Duplicator on your sandbox?

[Nigel]

No, the sandbox is not for recreating sites, its for recreating issues in a minimal environment to isolate the issue.

[kristofG]

I have recreated the issue on the Sandbox

[Luo Yang]

Hello,

It is a known issue of WordPress core(since WordPress 5.3):
https://make.wordpress.org/core/2019/10/09/introducing-handling-of-big-images-in-wordpress-5-3/
by default, if an image is wider or taller than "2560px", WordPress automatically creates its scaled down and optimized copy and uses that.

Toolset's own blocks are already updated with this WordPress feature, but, it seems that the Elementor Gallery widget doesn't supports it and as a result, it can not show those big images.

You can try one of below workarounds:
1) delete those images and upload them again in new sizes which are not smaller than "2560px"((both width and height)).

2) Disabling the scaling with custom codes. For example in the test site,
a) add below codes into theme file "functions.php":
hidden link
line 221:

add_filter( 'big_image_size_threshold', '__return_false' );

b) Reset the image values in custom repeating image field:
hidden link

See the result pages:
hidden link
It works fine too

[kristofG]

Hi, I know this is a bug because I have already created a similar ticket a while ago https://toolset.com/forums/topic/elementor-gallery-offsets-toolset-images-by-2/ that is why I had already added the snippet. But for some reason, the snippet was not active when I uploaded the new images. I have now replaced all of them, making sure to replace the url and the Gallery is working fine.