[Resolved] Incorrect & Non-Optimised Image Being Selected by Toolset Image Field

[Author]

Posts

[Dave]

Tell us what you are trying to do?
Use a custom image field to store images to be used for a gallery displayed through an Elementor template.

Is there any documentation that you are following?
https://toolset.com/forums/topic/image-gallery-not-showing-all-images-in-elementor-pro/

What is the link to your site?
hidden link

The site uses an Artist CPT to capture some basic data for artists, including a gallery, that is then displayed using an Elementor template. We've encountered the issue where some images show on the back end but won't load on the front end, and it is the issue with the Elementor gallery widget outlined by Waqar in the thread mentioned above.

However, my site is using the Siteground Optimisation plugin and any images uploaded are compressed and rescaled to prevent this issue, and they are given the suffix -scaled.jpeg after the original file name and these are the ones that should be loaded everywhere. But for some reason when the images are selected via the fields on the post, it never selects the scaled version. Adding this manually forces it to select it and it works fine.

So my question is, why does the Toolset custom field not select the scaled version when every other tool I've tried does, and is there a way to force it to if one exists?

Screenshot (81) - The default Media Gallery showing the scaled suffix on the filename as a standard selection
Screenshot (84) - The filename that is populated into the image field when it is selected from the gallery
Screenshot (85) - The image is missing on the frontend
Screenshot (88) - Manually adding the "-scaled" suffix before the file type in the image field
Screenshot (89) - The image appears correctly as the scaled image created by the optimisation plugin fixes the issue with the Elementor Pro Gallery widget.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

> So my question is, why does the Toolset custom field not select the scaled version when every other tool I've tried does, and is there a way to force it to if one exists?

- The challenge with the Toolset Types 'image' field is that it stores the actual URL of the uploaded file and not the attachment ID of the image.

There has been some internal discussion on improving the 'image' type custom field, but, I'm afraid, it won't be possible to share any time estimate at this point.

For now, if you'd like to always use the actual uploaded image's URL, you can consider disabling the 'scaling' of big images:
https://make.wordpress.org/core/2019/10/09/introducing-handling-of-big-images-in-wordpress-5-3/

regards,
Waqar

[Dave]

Hi Waqar,

Thanks for getting back to me. I appreciate that changing this is probably quite a large task from a development standpoint, especially given how long the field has been part of Toolset, and I wouldn't expect it to be changed overnight. That being said, the way the field works is very dated now and this really does need to be addressed.

Disabling the scaling is only part of the issue, as detailed in my first post I have a very efficient image optimisation plugin scaling and reducing images for me, so the adding of the suffix is what is really causing the breaks here. I can disable that functionality temporarily as well, but I'd far prefer to work around it if possible. Are the image handling functions hookable at all? Or can you suggest a work around where the Toolset code is told to accept the "proper" image, not just the base URL? Image handling isn't something I know much about with WordPress, so I'm hoping there's something that can be done and I'd be very grateful for any pointers that mean I don't have to bypass the image optimisations.

[Waqar]

Thanks for writing back.

I can't think of any simple workaround or hook that can prove useful in this case. And in terms of future-proofing, a workaround like this can cause further maintenance challenges, if something changes in future versions of WordPress, Toolset, or Elementor.

I'm pretty sure that the '-scaled' suffix is being added by WordPress's handling of the big images and not by the Siteground Optimisation plugin. Disabling the scaling from WordPress should be the safest option, considering the fact that you already have the image optimization in place through Siteground.

Can you please try the code to disable this scaling from the link I shared earlier, regenerate all image thumbnails, and let me know how it goes?
( ref: https://make.wordpress.org/core/2019/10/09/introducing-handling-of-big-images-in-wordpress-5-3/ )