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

  • Resolved Jamie Thingelstad

    (@thingles)


    11 years, 7 months ago

    I was very very excited to see your plugin. One of my sites is just to highlight my photography and having retina optimized images was something I really want. I activated v0.4 of WP Retina 2x on my site using WordPress 3.4.2 and the AutoFocus Pro theme.

    It works great, but there is one problem. I’m not sure if it’s a bug in WP Retina 2x, retina.js or AutoFocus Pro. I tried to debug it a bit but I think something odd is happening in the Javascript.

    The problem is that on blog posts that have multiple images, and use a gallery slider, after WP Retina 2x is installed any image beyond the very first image with a retina optimized size gets an image of height and width 0.

    Okay, here is an example of it working great on a post with a single image. This is awesome:

    http://photog.thingelstad.com/curves-and-peak/

    That does exactly what it should do.

    Now, on this next one, you’ll notice 3 images in a slider. The first image has a retina optimized version and it loads right. The 2nd image does not have a retina optimized version, and it loads right. The 3rd image does have a retina optimized version and it is blank. Inspecting the HTML shows the problem.

    http://photog.thingelstad.com/skogafoss/

    The HTML for the 3rd image is

    <img width="0" height="0" src="http://photog.thingelstad.com/wp-content/photog_thing/uploads/2012/09/20120904-143502-0001-800x468@2x.jpg" class="attachment-full-post-thumbnail" alt="20120904-143502-0001" title="20120904-143502-0001">

    Since it doesn’t happen on the 2nd image, it seems like something is happening in retina.js when it successfully finds a @2x image for the 3rd one and swaps it out. I tried replacing the js/retina.js in WP Retina 2x with the most recent retina.js and had the same behavior.

    Thanks for looking at this. I’m hopeful this is something minor and I can retina optimize all my images.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Jamie Thingelstad

    (@thingles)

    11 years, 7 months ago

    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();
  }
    Plugin Author Jordy Meow

    (@tigroumeow)

    11 years, 6 months ago

    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.

    Thread Starter Jamie Thingelstad

    (@thingles)

    11 years, 6 months ago

    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.

    cgiuk

    (@cgiuk)

    11 years, 5 months ago

    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

    Thread Starter Jamie Thingelstad

    (@thingles)

    11 years, 5 months ago

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

    Plugin Author Jordy Meow

    (@tigroumeow)

    11 years, 5 months ago

    @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)

    jon linton

    (@liz-dos-reis)

    11 years, 1 month ago

    Commenting seems easy enough, …I’m wondering if anyone would mind looking at the slideshows on this page: http://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?

    Plugin Author Jordy Meow

    (@tigroumeow)

    11 years, 1 month ago

    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 ?

    james godwin

    (@james-godwin)

    10 years, 11 months ago

    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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Plugin: WP Retina 2x] Bug when using Autofocus Pro theme’ is closed to new replies.