add_image_size and iPad Retina Display (high pixel density)

1 Views

i was just wondering if anyone has come up with or thought about a solution for inline images and the new iPad coming out.

i would love to use a combination of add_image_size and this jQuery Script (https://github.com/mcilvena/jQuery-Retina-Display-Plugin) to pull this off.

Read More

basically, we have content contributors in the office that would upload an image at say 900 x 900 pixels, and then the system would keep one large image for the retina display and then generate another image at 50% of that size for normal displays.

just curious if anyone has seen this being done.

Cheers!

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. I developed a plugin that does that. It creates the new images for you (with @2x), tells you if the original image is not big enough (and give you a ‘Reupload’ button), then serves it to the clients using two methods (a image handler or a script). Please try it and tell me if I can make it better for you. It is available on WordPress Repository: http://wordpress.org/extend/plugins/wp-retina-2x.

  2. You should use a combination of PHP and js, so that your not loading a tons of unused images.

    Its would be pretty east to just create a ipad add_image_size and check the referrer in your template.

    For example:

        if(stristr($_SERVER['HTTP_USER_AGENT'], 'Mozilla/5.0(iPad;')) {
        // probably an iPad
        // the loop args
       echo wp_get_attachment_image( $attachment->ID, 'ipad' );
    }else{
       // show regular images
       // the loop args
       echo wp_get_attachment_image( $attachment->ID, 'medium' );
    }

    Also worth checking out this: http://retina-images.complexcompulsions.com/

  3. WordPress can already generate thumbnails at various sizes when you upload them. You just use Add Image Size to add the sizes you need.

    You can set a number of sizes that would suit your needs. You will probably have to alter the script slightly to look for different image names (the re-sized image names should be consistent to be able to do this). I believe in this case, the smaller images have some part of the image size appended to the end of the name so instead of the JavaScript adding -2x to the end of the file names, you would need to have it remove the image size.