Support » Plugin: Perfect Images (Manage Image Sizes, Thumbnails, Replace, Retina) » Issues with Genesis Responsive Slider

  • Resolved rohara1977

    (@rohara1977)


    I installed WP Retina 2x and it seems to work great with the exception of the Genesis Responsive Slider plugin. When on retina it loads the first image in the slider fine and then the slider disappears completely until that image comes back around again. I’ve removed and re-added the images several times with no change and even played around with the order to make sure it wasn’t something with the images themselves.

    I am using the client side option as the site in question will be cached once it’s completed and from what I read the server option doesn’t play well with caching.

    Incidentally when I pull the site up on a standard display the slider works fine again so the issue is specific to retina.

    http://wordpress.org/extend/plugins/wp-retina-2x/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Jordy Meow

    (@tigroumeow)

    Hello Rohara,

    No need to remove and re-add the images, don’t worry, the plugin obviously works.

    The plugin generates the images for you, but the loading of those images with the client-side is done using a Javascript called retina.js. I know a lot of people have issues with sliders (since they load images on the fly, don’t specify the image sizes, etc…) but you can only seek support on the forums of retina.js on Github for those.

    However, there is something I would like to ask you to try. Don’t worry it will not break anything. Could you go to the plugin folder, and edit the file called wp-retina-2x.php? At the very end of the file, you will find this line:

    wp_enqueue_script( 'retinajs', plugins_url( '/js/retina.js', __FILE__ ), array(), '2012.10.09', true);

    I would like you to replace the true by false, this way:

    wp_enqueue_script( 'retinajs', plugins_url( '/js/retina.js', __FILE__ ), array(), '2012.10.09', false );

    The plugin will be then loaded at the beginning of the page instead of being loaded at the end. I’ve seen a comment on some forum about retina.js working better in the header…

    Thanks for trying 🙂 Tell me if it works, in that case I will update the plugin.

    Thread Starter rohara1977

    (@rohara1977)

    I changed the last line in the file (wp_enqueue_script( ‘retinajs’, plugins_url( ‘/js/retina.js’, __FILE__ ), array(), $wr2x_retinajs, true );) from true to false and unfortunately noticed no difference.

    Do you know if the server sider method works with WP Super Cache? If so I can just use that method.

    Thread Starter rohara1977

    (@rohara1977)

    UPDATE: On your suggestion I started digging around on GitHub and pieced together together a solution.

    In the retina.js file there is code towards the bottom that is essentially zeroing out the dimensions of images not displayed when the page initially loads. In this case slider images other than the first one.

    var that = this;
    function load() {
    if (! that.el.complete) {
    setTimeout(load, 5);
    } else {
    if (config.force_original_dimensions) {
    that.el.setAttribute(‘width’, that.el.offsetWidth);
    that.el.setAttribute(‘height’, that.el.offsetHeight);
    }

    that.el.setAttribute(‘src’, path);
    }
    }

    Since those images are not visible when the page loads the code sets them with a width and height of 0. I removed the following portion of the code and the slider appears to be functioning properly.

    if (config.force_original_dimensions) {
    that.el.setAttribute(‘width’, that.el.offsetWidth);
    that.el.setAttribute(‘height’, that.el.offsetHeight);
    }

    Plugin Author Jordy Meow

    (@tigroumeow)

    The “Server Side” method works with WP Super Cache. The HTML Rewrite doesn’t, but are you sure you need a caching plugin? You could try Cloudflare or Google PageSpeed Service and I feel it is much better (and I don’t like to use too many plugins).

    Any idea how to get the Genesis header image to work with this plugin? The header process doesn’t seem to play nice with the normal header process.

    Hi Jordy,

    I am also having the problem as the original poster. I don’t have any caching plugins running. I also could not find the wp-retina-2x.php file. I just downloaded another copy of the plugin just in case something happened to my live files but don’t see it in there. This is a somewhat old thread so there may be a new work around by now. Any tips you can give would be great.

    Thanks,
    Ellen

    Just realized I didn’t read the first post as closely as I should have. I do not have the WP Retina 2x plugin installed and am having the problem out of the box.

    Figured it out and thought I would share for anyone having this problem. The image in the post/page needs to be set as the Featured Image, not put into the body of the post/page (instructions most likely in the documentation).

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Issues with Genesis Responsive Slider’ is closed to new replies.