Merge pull request #2 from BuildFire/cloudImg-fix

fix for new cloudimage urls

Author: ctberger

src/control/content/components/LazyImg.js

@@ -18,14 +18,6 @@ export default class Image extends PureComponent {
     if (removeImage) removeImage(id, type);
   };
 
-  optimizeImage = url => {
-    const size = url.match(/\/\d+\D\d+\//g);
-    if (!url.includes('cloudimg.io') || !size || /png-lossy-\d\d.q\d\d/g.test(url)) {
-      return url;
-    }
-    return url.replace(/\/s\/crop\/\d+\D\d+\//g, `/crop${size[0]}png-lossy-65.q65.i1/`);
-  };
-
   handleImgError = e => {
     if (e.target) {
       e.target.src = e.target.attributes
@@ -60,19 +52,18 @@ export default class Image extends PureComponent {
     const { imageLib } = window.buildfire;
 
     const placeholderSrc = '../../../../../styles/media/holder-1x1.gif';
-    const croppedSrc = imageLib.cropImage(src, { width: 125, height: 125 });
-    const finalSrc = this.optimizeImage(croppedSrc);
+    const croppedSrc = imageLib.cropImage(src, { width: 125, height: 125, compression: 65 });
 
     return (
       <div className={`image ${selected ? 'selected' : ''}`} onClick={this.handleClick}>
         <img
-          src={fid ? placeholderSrc : finalSrc}
+          src={fid ? placeholderSrc : croppedSrc}
           alt={alt}
           className="lazy"
-          data-src={finalSrc}
+          data-src={croppedSrc}
           data-srcset={srcset}
           data-sizes={sizes}
-          data-fallbacksrc={croppedSrc}
+          data-fallbacksrc={src}
           width={width}
           height={height}
           onError={this.handleImgError}

src/control/content/containers/Content.js

@@ -31,7 +31,13 @@ class Content extends Component {
         if (!croppedImg.includes('cloudimg.io')) {
           return src;
         }
-        return croppedImg.replace(/\/s\/crop\/\d+\D\d+\//g, '/cdno/n/q1/');
+
+        let regex = /\/crop\/\d+\D\d+\/n\//g;
+
+        if (croppedImg.indexOf('/s/crop/') > -1) {
+          regex = /\/s\/crop\/\d+\D\d+\//g;
+        }
+        return croppedImg.replace(regex, '/cdno/n/q1/');
       };
 
       const imagePromises = selectedFiles.map(

src/widget/components/Image.js

@@ -13,14 +13,6 @@ export default class Image extends PureComponent {
     viewImage(image.src);
   };
 
-  optimizeImage = url => {
-    const size = url.match(/\/\d+\D\d+\//g);
-    if (!url.includes('cloudimg.io') || !size || /png-lossy-\d\d.q\d\d/g.test(url)) {
-      return url;
-    }
-    return url.replace(/\/s\/crop\/\d+\D\d+\//g, `/crop${size[0]}png-lossy-65.q65.i1/`);
-  };
-
   handleImgError = e => {
     if (e.target) {
       e.target.src = e.target.attributes
@@ -43,16 +35,19 @@ export default class Image extends PureComponent {
     const { image } = this.props;
     const { src } = image;
 
-    const croppedSrc = window.buildfire.imageLib.cropImage(src, { width: 125, height: 125 });
-    const finalSrc = this.optimizeImage(croppedSrc);
+    const croppedSrc = window.buildfire.imageLib.cropImage(src, {
+      width: 125,
+      height: 125,
+      compression: 65
+    });
 
     return (
       <div className="img__holder" onClick={this.openImage}>
         <LazyLoad height={125} overflow offset={window.innerHeight} throttle={0}>
           <img
             ref={this.image}
-            src={finalSrc}
-            data-fallbacksrc={croppedSrc}
+            src={croppedSrc}
+            data-fallbacksrc={src}
             alt="placeholder"
             onError={this.handleImgError}
             onLoad={this.handleOnLoad}

src/widget/containers/Widget.js

@@ -74,32 +74,26 @@ class Widget extends Component {
       preload: [1, 1]
     };
 
-    const optimizeImage = config => {
-      const { croppedSrc, width, height, compression } = config;
-      if (!croppedSrc.includes('cloudimg.io')) {
-        return croppedSrc;
-      }
-
-      return croppedSrc.replace(
-        /\/s\/crop\/\d+\D\d+\//g,
-        `/crop/${Math.floor(width)}x${Math.floor(height)}/${compression || 'n'}/`
-      );
-    };
-
     const galleryItems = (folderImages || images).map(img => {
-      const croppedSrc = imageLib.cropImage(img.src, { width: img.width, height: img.height });
       const { width, height } = img;
+      const croppedSrc = imageLib.cropImage(img.src, {
+        width,
+        height,
+        disablePixelRatio: true
+      });
+      const msrc = imageLib.cropImage(img.src, {
+        width: width / 2,
+        height: height / 2,
+        compression: 20,
+        disablePixelRatio: true
+      });
+
       return {
-        w: img.width,
-        h: img.height,
-        msrc: optimizeImage({
-          croppedSrc,
-          width: width / 2,
-          height: height / 2,
-          compression: 'q20.fgaussian4'
-        }),
-        src: optimizeImage({ croppedSrc, width, height, compression: 'q100' }),
-        sourceImg: img.src
+        src: croppedSrc,
+        sourceImg: img.src,
+        msrc,
+        w: width,
+        h: height
       };
     });
     this.gallery = new PhotoSwipe(pswpEle, photoSwipeUIdefault, galleryItems, options);