[Plugin: WP Retina 2x] Bug when using Autofocus Pro theme

Okay. I’ve been hunting this down and I definitely think this is something going on it retina.js but I’m not completely sure. I’ve stepped through with the Javascript debugger and it clearly shows that in the .swap() method the values for that.el.offsetWidth and that.el.offsetHeight are 0.

In fact, since I don’t think there is any reason for WP Retina 2x to actually change the size of an image I commented out these two assignments and now the plugin works in multi-image posts.

Edit in js/retina.js:

RetinaImage.prototype.swap = function(path) {
    if (typeof path == 'undefined') path = this.path.at_2x_path;

    var that = this;
    function load() {
      if (! that.el.complete) {
        setTimeout(load, 5);
      } else {
        // Commenting these assignments out, they set the value to 0
        // that.el.setAttribute('width', that.el.offsetWidth);
        // that.el.setAttribute('height', that.el.offsetHeight);
       that.el.setAttribute('src', path);
      }
    }
    load();
  }

I just updated the plugin (and retina.js) to the very last version and the code is really different. Can you try it out and tell me if it works for you? Thanks a lot for all your research.

Hello Jordy —

I upgraded the plugin and everything seems fine, however, I did still have to comment out the two lines that I mentioned before in order to make it work on images that are in a carousel/slideshow.

Once I commented those out it was working again.

A big thank you to both Jordy and Jamie for bringing this up. I was having exactly the same problem with hidden images in a slideshow.

I was just wondering if you could help me though? When I comment out the lines, the hidden images are displayed correctly but my website logo (which is also being differentiated using the retina.js script) resizes itself. My logo is 200 x 200 (with a retina version at 400 x 400). When I comment out the lines, the full 400 x 400 version is displayed.

I’m stumped…wondered if you could shed any light for me?

Sam

@sam,

You didn’t post a link to your site so I’m just going to guess. I would suspect that your logo image tag doesn’t have a set width and height parameter. By commenting out the size lines when the src of the image is swapped an image that doesn’t have fixed width and height would get bigger.

See if that does the trick. Just set a width and height parameter on the image.

@jamie,

Thanks for helping others ?? It seems to be indeed a different issue now.

About your problem, it is related not exactly to my plugin but to the script which I use for the server-side: retina.js. I checked on GitHub and it seems people has similar issues as you, for example I found this thread: https://github.com/imulus/retinajs/issues/51

I can’t include your changes directly in the plugin, it has to be corrected there first (it’s the original source of the plugin, and well maintained), then I will of course include the new version is the plugin.

Could you maybe start a new issue thread there ? Please let me know what you can do, that would be great to have this fixed ?? (and I am not sure your change would work for everyone, this code must be there for one purpose)

Commenting seems easy enough, …I’m wondering if anyone would mind looking at the slideshows on this page: https://loudmouth.staging.wpengine.com/. I’ve commented out the code in the Retina.js file, within the plugin’s js folder, as described, and yet, on a Retina display, the images are still invisible. This is what the end of my retina.js file looks like:

function RetinaImage(el) {
    this.el = el;
    this.path = new RetinaImagePath(this.el.getAttribute('src'));
    var that = this;
    this.path.check_2x_variant(function(hasVariant) {
      if (hasVariant) that.swap();
    });
  }

  root.RetinaImage = RetinaImage;

  RetinaImage.prototype.swap = function(path) {
    if (typeof path == 'undefined') path = this.path.at_2x_path;

    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);
      }
    }
    load();
  }

Can anyone explain why the image dimensions in the carousel are still zero-ing out?

That’s odd. I don’t have my Retina display these days so I cannot try right now (it drunk too much coffee, the screen is out unfortunately).

This problem is related to Retina.js though, you should ask over there, on their Github forums, there is a lot of support. I will always keep the version I use in the plugin updated.

To debug your issue though we would have to debut the Carousel javascript. It should set the width and height, it helps a lot always.

Alternatively, did you try the server-side ?

I’ve just had the same problem with images on slide shows. All except first slide where disappearing on ipad and iphone. I just added..
height:auto;width:auto;
On the images and it now works