diff --git a/CHANGELOG.md b/CHANGELOG.md index 17a5bd2..d3fef70 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/functions/resize-images.js b/functions/resize-images.js index dd22566..4745292 100644 --- a/functions/resize-images.js +++ b/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() +} diff --git a/src/util/getImageUrl.js b/src/util/getImageUrl.js index aa9c59e..6f1a0cc 100644 --- a/src/util/getImageUrl.js +++ b/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 }