support for data-at2x

README.md

@@ -28,6 +28,14 @@ In this case, we've set our resolution cap at "3". When the page loads, retina.j
 
 If the environment does have 3x capabilities, retina.js will serve up the 3x image. It will expect that url to be `/images/my_image@3x.png`. If the environment has capabilities to display images at higher densities than 3x, retina.js will serve up the image of the highest resolution that you've provided, in this case 3x.
 
+*data-at2x*
+
+retina.js retains some legacy support for using the `data-at2x` attribute to manually specify the location of your high resolution variant. However, by manually including the path to a high res variant, retina.js will not be able to dynamically serve images at multiple sizes in response to different environments. Instead, it will work as it always has – if the environment resolution is greater than 1x, it will serve the high res image URL you provided. The one change is that retina.js no longer requires you to use the `data-at2x` attribute for this. Instead, you can simply include a URL string instead of a number in your `data-rjs` attribute, as follows:
+
+```html
+<img src="/images/my_image.png" data-rjs="/images/2x/my_image.png" />
+```
+
 
 ## How to use
 

dist/retina.js

@@ -30,7 +30,7 @@ var environment = hasWindow ? window.devicePixelRatio || 1 : 1;
 var srcReplace = /(\.[A-z]{3,4}\/?(\?.*)?)$/;
 
 /*
- * Define our selector for elements to target.
+ * Define our selectors for elements to target.
  */
 var selector = 'img[data-rjs]';
 
@@ -113,13 +113,16 @@ function setSourceIfAvailable(image, retinaURL) {
 /**
  * Attempts to do an image url swap on a given image.
  *
- * @param  {Element} image An image in the DOM.
+ * @param  {Element}       image An image in the DOM.
+ * @param  {String}        src   The original image source attribute.
+ * @param  {String|Number} rjs   The pixel density cap for images provided.
  *
  * @return {undefined}
  */
-function swapImage(image) {
-  var src = image.getAttribute('src');
-  var cap = chooseCap(image.getAttribute('data-rjs') || 1);
+function dynamicSwapImage(image, src) {
+  var rjs = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
+
+  var cap = chooseCap(rjs);
 
   /*
    * Don't do anything if the user didn't provide a source or if the
@@ -131,6 +134,21 @@ function swapImage(image) {
   }
 }
 
+/**
+ * Performs an image url swap on a given image with a provided url.
+ *
+ * @param  {Element} image  An image in the DOM.
+ * @param  {String}  src    The original image source attribute.
+ * @param  {String}  hdsrc  The path for a 2x image.
+ *
+ * @return {undefined}
+ */
+function manualSwapImage(image, src, hdsrc) {
+  if (environment > 1) {
+    setSourceIfAvailable(image, hdsrc);
+  }
+}
+
 /**
  * Collects all images matching our selector, and converts our
  * NodeList into an Array so that Array methods will be available to it.
@@ -150,7 +168,19 @@ function getImages() {
  */
 function retina() {
   getImages().forEach(function (img) {
-    return swapImage(img);
+    var src = img.getAttribute('src');
+    var rjs = img.getAttribute('data-rjs');
+    var rjsIsNumber = !isNaN(parseInt(rjs, 10));
+
+    /*
+     * If the user provided a number, dynamically swap out the image.
+     * If the user provided a url, do it manually.
+     */
+    if (rjsIsNumber) {
+      dynamicSwapImage(img, src, rjs);
+    } else {
+      manualSwapImage(img, src, rjs);
+    }
   });
 }
 

src/retina.js

@@ -19,7 +19,7 @@
   const srcReplace = /(\.[A-z]{3,4}\/?(\?.*)?)$/;
 
   /*
-   * Define our selector for elements to target.
+   * Define our selectors for elements to target.
    */
   const selector = 'img[data-rjs]';
 
@@ -102,13 +102,14 @@
   /**
    * Attempts to do an image url swap on a given image.
    *
-   * @param  {Element} image An image in the DOM.
+   * @param  {Element}       image An image in the DOM.
+   * @param  {String}        src   The original image source attribute.
+   * @param  {String|Number} rjs   The pixel density cap for images provided.
    *
    * @return {undefined}
    */
-  function swapImage(image) {
-    const src = image.getAttribute('src');
-    const cap = chooseCap(image.getAttribute('data-rjs') || 1);
+  function dynamicSwapImage(image, src, rjs = 1) {
+    const cap = chooseCap(rjs);
 
     /*
      * Don't do anything if the user didn't provide a source or if the
@@ -120,6 +121,21 @@
     }
   }
 
+  /**
+   * Performs an image url swap on a given image with a provided url.
+   *
+   * @param  {Element} image  An image in the DOM.
+   * @param  {String}  src    The original image source attribute.
+   * @param  {String}  hdsrc  The path for a 2x image.
+   *
+   * @return {undefined}
+   */
+  function manualSwapImage(image, src, hdsrc) {
+    if (environment > 1) {
+      setSourceIfAvailable(image, hdsrc);
+    }
+  }
+
   /**
    * Collects all images matching our selector, and converts our
    * NodeList into an Array so that Array methods will be available to it.
@@ -140,7 +156,21 @@
    * @return {undefined}
    */
   function retina() {
-    getImages().forEach(img => swapImage(img));
+    getImages().forEach(img => {
+      const src = img.getAttribute('src');
+      const rjs = img.getAttribute('data-rjs');
+      const rjsIsNumber = !isNaN(parseInt(rjs, 10));
+
+      /*
+       * If the user provided a number, dynamically swap out the image.
+       * If the user provided a url, do it manually.
+       */
+      if (rjsIsNumber) {
+        dynamicSwapImage(img, src, rjs);
+      } else {
+        manualSwapImage(img, src, rjs);
+      }
+    });
   }
 
   /*

test/functional/public/index.html

@@ -61,7 +61,7 @@
     <script type="text/javascript">
       // Spoof the browser into thinking it is Retina
       // comment the next line out to make sure it works without retina
-      window.devicePixelRatio = 3;
+      // window.devicePixelRatio = 3;
     </script>
   </head>
   <body>
@@ -139,18 +139,40 @@ <h3>Bg @3x</h3>
         <div class="bg3"></div>
       </div>
 
+      <h2>External URLs</h2>
+
+      <!-- This image does not opt in. It will always be shown at 1x -->
+      <div class="img-wrapper">
+        <h3>Naming Convention</h3>
+        <p>
+          This image is pulled in externally. Retina.js should still work
+          on external files. Thanks to
+          <a href="http://powinteractive.com">POWINTERACTIVE</a>
+          for unwittingly allowing us to borrow their logo :)
+        </p>
+        <img
+          src="http://powinteractive.com/wp-content/uploads/2015/03/pow-circle-logo.png"
+          data-rjs="2"
+        />
+      </div>
+
+      <!-- This image does not opt in. It will always be shown at 1x -->
+      <div class="img-wrapper">
+        <h3>Non-Conventional</h3>
+        <p>
+          retina.js continues to provide basic support for manually indicating
+          a direct URL for a "retina" image. Note that this technique does not
+          allow for multiple images to be associated with multiple pixel densities.
+        </p>
+        <img
+          src="https://www.google.com/logos/2012/doisneau12-hp.jpg"
+          data-rjs="http://www.google.com/logos/2012/wilhelm_busch-2012-hp.jpg"
+          style="max-width: 100%"
+        />
+      </div>
+
     </div>
 
-    <p>
-      This image is pulled in externally. Retina.js should still work
-      on external files. Thanks to
-      <a href="http://powinteractive.com">POWINTERACTIVE</a>
-      for unwittingly allowing us to borrow their logo :)
-    </p>
-    <img
-      src="http://powinteractive.com/wp-content/uploads/2015/03/pow-circle-logo.png"
-      data-rjs="2"
-    />
 
     <script type="text/javascript" charset="utf-8" src="retina.min.js"></script>
   </body>