-
Posts
-
Hey Gunter,
Recently we’ve encountered an issue with responsive images in the lightbox.
We can’t work out the cause, and have asked one of the hosts (we have sites on different hosts with the same issue) and they say it must be an issue with the responsive images setting in the theme. Turning off the Responsive Images setting fixes the issue, but then we lose retina/responsive images entirely.
If you look at the links below, you will see that images aren’t loading up properly. They should be pulling in image up to 1000px, but they are instead pulling in a cropped thumbnail size (flick through the gallery to see) of 200px or less.
We have this issue on 2 sites now, and are unable to work out the cause or the solution.
Really hoping you can help.
Thanks a lot
Tim.
the retina support from magnific popup script is for that known nomenklatura with @2x prefix just before the file name ( …@2x.jpg etc )
one problem with big images is – that wordpress got a limitation to 2560px – but you can switch that of by child-theme functions.php snippet:add_filter( 'big_image_size_threshold', '__return_false' );because if you are using in a slider the 1500px x 630px image there will be no adequate image with the exact file name at 2times resolution.
for lack of retina device you could test whether it works here? Because it does not work via the simulation: Link
on image src – i can see as image source the @2x file – but the link on lightbox-added not
Aha – now i know why.
If you open the jquery.magnific-popup.js ( in enfold/js/aviapopup folder ) – you see at the end the retina support:
and read on line 1894 :ratio: 1 // Function or number. Set to 1 to disable.so it is disabled !
i set a 1.5 on that ( but you had to edit the minified file ) – and now even on the simulation the @2x file opens – if the Responsive Images For Lightbox is disabled.
On real devices i could not test it if it works with that option too.Hi Tim,
Sorry for the late reply and thank you for reporting this.
At a first look you are using WooCommerce single product with a gallery.
Checking the underlying WC implementation we have not added responsive image support there for lightboxes.
Can you confirm that this problem is only with WC or do you also see it in other galleries/ALB elements with lightbox?
I’m on it for WC and added it to our dev repo.
Best regards,
GünterHello Günter – but is my statement correct or not?
The comment is clear or? Unfortunately now always opens the lightbox with the @2x image – I would have thought that this depends on the device usedHi Gunter,
Thanks for looking into it and spotting something so obvious but that we never thought of! Yes, you are 100% right, it is only on WC pages, and all other galleries/ALB elements function as expected, can’t believe we missed that.
Thanks for working on it, hope it can be in an upcoming release.
@Guenni007 thanks for trying to help as well.Hi Tim,
Please try to update enfold\config-woocommerce\config.php with the content of
https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_5_0/config-woocommerce/config.php
This should now show responsive images or the “large” image (if theme option Responsive Images For Lightbox is disabled). You can change the default lightbox image size with filter avf_avia_builder_helper_lightbox_size.
If you set ratio to > 1 @2x is added.
If theme option Responsive Images For Lightbox is disabled I get “Image could not be loaded” (because I do not have such a file uploaded), with option enabled I get the correct image responsive image (without @2x).
Best regards,
Günterhttps://enfold.webers-webdesign.de/retina/
So it does not work with Enfold means? Although the image is in the media library with the appropriate resolution?
Or can I just not verify it – because it doesn’t work with the simulation of the browsers?On the link above i do have on the first Image an @2x pendent in the library – but it is either replaced as image – nor replaced in the lightbox
- The topic ‘Responsive Images In Lightbox’ is closed to new replies.