Add optional imgix integration for images

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.2.3 - 2018-05-21
+
+* Add optional imgix integration for images
+* Return to console.log for build console messages
+
+## 0.2.2 - 2018-05-21
+
+* Use ora for build console message
+
 ## 0.2.1 - 2018-05-17
 
 * Log netlifySiteUrl when viewing CMS on localhost

functions/resize-images.js

@@ -7,13 +7,12 @@ const sharp = require('sharp')
 const glob = util.promisify(globCb)
 const readFile = util.promisify(fs.readFile)
 
-const { sizes, resizedDir, outputDir } = require('../src/util/getImageUrl')
-const dirPrefix = './public'
+const { sizes, imgixUrl } = require('../src/util/getImageUrl')
 
 const options = {
+  inputDir: './public/images/uploads',
+  outputDir: './public/images/uploads/resized',
   sizes,
-  inputDir: `${dirPrefix}${outputDir}`,
-  outputDir: `${dirPrefix}${resizedDir}`,
   imageFormats: ['jpg', 'jpeg', 'png', 'gif', 'webp']
 }
 
@@ -41,7 +40,7 @@ const saveImages = ({ buffer, filename }) => {
         filename,
         extname
       )}.${size}${extname}`
-      const outputFile = path.resolve(options.outputDir, newFilename)
+      const outputFile = `${options.outputDir}/${newFilename}`
       const fileExists = await doesFileExist({ filename: outputFile })
       if (fileExists) return console.log(`↩️  ${outputFile} exists, skipping`)
       return saveImage({ buffer, size, outputFile })
@@ -87,4 +86,8 @@ const resizeImages = async () => {
   }
 }
 
-resizeImages()
+if (imgixUrl) {
+  console.log(`📡  Using imgix to resize images: ${imgixUrl}`)
+} else {
+  resizeImages()
+}

src/util/getImageUrl.js

@@ -1,6 +1,10 @@
 const sizes = [10, 300, 600, 1200, 1800]
 const outputDir = '/images/uploads/'
 const resizedDir = '/images/uploads/resized/'
+const imgixUrl = null // imgix web folder domain e.g. https://example.imgix.net (no trailing slash)
+
+const getImgixUrl = ({ path, size }) =>
+  `${imgixUrl}${encodeURI(path)}?w=${size}&fit=max&auto=compress`
 
 const parseFilename = filename => {
   const parts = filename.match(/(.+)\.([\w]+)$/)
@@ -18,7 +22,14 @@ const getImageSrcset = path => {
   const pathname = encodeURI(filename.replace(outputDir, resizedDir))
 
   const srcset = sizes
-    .map(size => `${pathname}.${size}.${extname} ${size}w`)
+    .map(
+      size =>
+        `${
+          imgixUrl
+            ? getImgixUrl({ path, size })
+            : `${pathname}.${size}.${extname}`
+        } ${size}w`
+    )
     .join(', ')
   return srcset
 }
@@ -40,6 +51,7 @@ const getImageSrc = (path, sizeRequested) => {
 
   const { filename, extname } = parseFilename(path)
   const pathname = encodeURI(filename.replace(outputDir, resizedDir))
+  if (imgixUrl) return getImgixUrl({ path, size })
   return `${pathname}.${size}.${extname}`
 }
 
@@ -48,5 +60,6 @@ module.exports = {
   getImageSrc,
   sizes,
   outputDir,
-  resizedDir
+  resizedDir,
+  imgixUrl
 }