WordPress.org

Ready to get started?Download WordPress

Forums

Retina Image Support
Something's not right (12 posts)

  1. drfingerless
    Member
    Posted 11 months ago #

    I have installed and am testing this plugin and while it is serving the correct images to retina and non-retina screens somehow the retina screens are not recognising that the retina-ready image they are being sent is already retina-ready so they are doubling its size (again) resulting in an image twice the necessary size. The example can be seen at the URL http://partito.draftsite.net.au. The top 'PARTITO' banner logo will have the URL of http://partito.draftsite.net.au/wp-content/uploads/2013/03/partito_logo3.gif if viewed on a non-retina screen and has dimensions of 550 x 135 pixels. When viewed on a retina screen the URL being correctly served is http://partito.draftsite.net.au/wp-content/uploads/2013/03/partito_logo3@2x.gif however this image having dimensions of 1100 x 270 pixels is being displayed at twice its size i.e. the retina screen is not recognising that this is already a retina-ready image! What to do?

    http://wordpress.org/plugins/retina-image-support/

  2. greggh3
    Member
    Plugin Author

    Posted 11 months ago #

    Hi DrFingerless,

    please set the dimensions via html on that image to 550x135 and you should be good to go.

    I'll add this note in the FAQ

  3. drfingerless
    Member
    Posted 11 months ago #

    Thanks for this advice, Greggh3. I'll give it a shot and let you know how I go. I'm just wondering how this might be applied to background images where the size is not able to be expressed explicitly in the html. What are your thoughts?

  4. greggh3
    Member
    Plugin Author

    Posted 11 months ago #

    If you're doing images as background images in css, you'll need to set the width and height of the div or element you're styling. You'll also want to set the background-size correctly for the retina declaration.

    something like

    background-size: 550px 135px;

  5. drfingerless
    Member
    Posted 11 months ago #

    Greg, the site that I am working on is located at http://partito.draftsite.net.au. You can see that there are a couple of background images for the site (the triangular confetti images top-left and bottom-right). These images are set as page backgrounds and are designed to show more or less depending on the volume of content within that div. Like most background images their great advantage is that you often don't specify the size of the div that they background, particularly in a no-repeat situation - you just position the image (often top-left) and let the div expand to fit its variable content allowing as much or as little of the background image to be visible (a varying amount). In our case in most circumstances the background images will be nearly always completely visible, but the div could expand well beyond their borders. The point being that it is not usually known what size the div will exhibit, and it will vary depending on what content the author adds or removes from the site. In that case how should I proceed?

    Further, is the background-size attribute meant to tell the retina image to display at, for example, 200 x 200 or to display in retina dimensions as 400 x 400?

  6. drfingerless
    Member
    Posted 11 months ago #

    By the way your advice regarding inline images was spot on - we have those images behaving well.

  7. greggh3
    Member
    Plugin Author

    Posted 11 months ago #

    I haven't tested this a ton, but setting the background size css should work, you will just need to do this in a media query specific to retina devices. this will make it so the image scales to the right px size on retina devices.

    so your image is might be 640x640 and the retina one is 1280x1280 but in the retina media query you're setting the background size to 640x640.

    That should work. Let me know if it doesn't.

  8. drfingerless
    Member
    Posted 11 months ago #

    Greg, it doesn't seem to have done the trick. You can see for yourself. The retina device is pulling the correct retina version of the background image (the triangle confetti image in the top-left corner of the site) but it is failing to resize according to the background-size declaration. I wonder if there is a problem with my media query declaration which is as follows (normal size is 550 x 734, retina is double this):

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) { 
    
      /* Retina-specific stuff here */
    #big-background-image {
    	background-size:550px 734px;
    }
    }
  9. greggh3
    Member
    Plugin Author

    Posted 11 months ago #

    what retina device are you checking with? macbook pro? if so can you check in firebug and see if the background-size is working? I see it's set at 100% in the regular css.

  10. greggh3
    Member
    Plugin Author

    Posted 11 months ago #

    also i see big-background-image is 1500x725 and not 550x734

  11. drfingerless
    Member
    Posted 11 months ago #

    Greg, I seem to have had mixed results with these background images. I have two layered background images of triangular confetti on the above-mentioned site and it looks like I have got them to work on both retina and regular screens. But now there are some icons that are displayed as background images at the top of each blog post that you can see on the retina screen continue to be displayed at double size. I have set the widths of the containing element to the smaller size and set the same containing element's background-size to be the same smaller size in the retina media query. I have uploaded the two image versions to the same directory with the larger having the same name as the smaller with the addition of @2x at the end of the name. Clearly I am still missing something. Any clues?

  12. greggh3
    Member
    Plugin Author

    Posted 10 months ago #

    this could be a result of some css overriding your image width/height of those that are displaying too big. It could be a max-width declaration somewhere.

Reply

You must log in to post.

About this Plugin

About this Topic