Merge branch '106-placeholder-photo' into 'master'

Resolve "Placeholder photo"

Closes #106

See merge request genesys-pgr/genesys-ui!98

src/crop/ui/c/CropCard.tsx

@@ -31,6 +31,7 @@ const style = (theme) => ({
   mediaImage: {
     // maxHeight: '100%',
     minWidth: '100%',
+    maxWidth: '100%',
     width: 'auto' as 'auto',
     height: 'auto' as 'auto',
     position: 'absolute' as 'absolute',
@@ -46,12 +47,26 @@ const CropImage = ({classes, crop}: { classes: any, crop: CropDetails}) => {
   // console.log(`renderImage`, crop);
   const hasCover = crop.covers && crop.covers.length > 0;
   const image = hasCover ? crop.covers[0] : null;
+  const thumbSizes: number[] = [ 200, 300, 600 ];
+
+  let x: string = '';
+  let sizes: string = '';
+  if (image) {
+    for (const size of thumbSizes) {
+      x += `/proxy/uploads/d/_thumbs${image.thumbnailPath}/${size}x${size}.png ${size}w, `;
+    }
+    sizes += `(max-width: 600px) 200px, `;
+    sizes += `(min-width: 1800px) 600px, `;
+    sizes += `300px`;
+    // x += `/proxy/uploads/d${image.storagePath} ${image.width}w`;
+    // sizes += `${image.width}px`;
+  }
 
   return (
     <div className={ classes.media }>
     { hasCover &&
-      <img className={ classes.mediaImage } srcSet={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/200x200.png 1x, /proxy/uploads/d${image.storagePath} 4x` }
-      src={ `/proxy/uploads/d${image.storagePath}` } alt={ crop.name } /> }
+      <img className={ classes.mediaImage } srcSet={ x } sizes={ sizes }
+        src={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/300x300.png` } alt={ crop.name } /> }
     { !hasCover &&
       <img className={ classes.mediaImage } src={ `images/crop-placeholder.jpg` } alt={ crop.name } />
     }