5 Replies Latest reply on Jun 14, 2013 1:16 PM by designedbyjackley

    Load @2x retina images on retina equipped iPads?

    ajguy711

      I've seen a number of ways to dynamically load the retina version of an image (with @2x appended to the filename), but none of them seem to work with Edge animations. I'm guessing this is because these solutions work within CSS and not within embedded javascript. Has anyone found a method to dynamically load retina images based on the device?

        • 1. Re: Load @2x retina images on retina equipped iPads?
          TimJaramillo Level 4

          Hi there, you'd have to hack this yourself, but you could potentially leverage the image path variable, and change the path based on window.devicePixelRatio. Have one path be for non-retina and 1 path for retina devices, store 2 sets of images, 1 in each directory.

           

          The var "im" is set at the top of this file: youFileName_edge.js

          • 2. Re: Load @2x retina images on retina equipped iPads?
            ajguy711 Level 1

            Well, I gave it a shot. Here's the code I came up with. Unfortunately, it isn't working. Since I'm new to Javascript, I'm very open with the idea that I'm doing something wrong.

             

            function getDevicePixelRatio() {

            if(window.devicePixelRatio === undefined) return 1; // No pixel ratio available. Assume 1:1.

            return window.devicePixelRatio;

             

            }

                if(getDevicePixelRatio() > 1)

                {

                    var im='retina/';

                        }

                else

                {

                    var im='images/';

                    }

            1 person found this helpful
            • 3. Re: Load @2x retina images on retina equipped iPads?
              ajguy711 Level 1

              Wait! Never mind. I was editing the yourFileName_edge.js in the wrong place. You need to replace var im='images/' in the version of yourFileName_edge.js that results from publishing. Not the version in your original project folder.

               

              To be doubly sure, I replaced the retina version of the image with a different image in the correct dimensions, and sure enough the new image loaded on a retina iPad. Thank you so much for steering me in the right direction! Now anyone from Adobe want to natively implement this into the app?

              • 4. Re: Load @2x retina images on retina equipped iPads?
                TimJaramillo Level 4

                Awesome! Glad you got it working!

                • 5. Re: Load @2x retina images on retina equipped iPads?
                  designedbyjackley

                  Can you take a screen shot of where you added this in the file? I have tried over and over and everytime I try to add that code it prevents the file from loading at all?

                   

                  Any tips on the exact location on where you added this in the _edge.js file?

                   

                  This is the only reference I have found ... hack or not I really need to get this solution working.

                   

                  Also I started with Retina versions first... brought them in and sized them down... but I imagine if I repalce the assets with normal sized images it would shrink them down as well right?