Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1354569

    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.

    • This topic was modified 1 year, 8 months ago by THP Studio.
    #1354796

    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

    #1354798

    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.

    #1354850

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

    #1354890

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

    #1354913

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

    #1354959

    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.


    @guenni007

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

    #1354981

    https://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

    #1405892

    This can be closed thanks.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Responsive Images In Lightbox’ is closed to new replies.