diff --git a/manifest.yml b/manifest.yml index 459b1fb..99a9330 100644 --- a/manifest.yml +++ b/manifest.yml @@ -21,3 +21,9 @@ inputs: required: false description: "The method in which in which images are loaded (Ex: lazy, eager)" default: "lazy" + - name: sizes + required: false + description: "The sizes attribute for the img tag" + - name: steps + required: false + description: "The steps attribute for the img tag" \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0abb23d..9ac18ea 100644 --- a/src/index.js +++ b/src/index.js @@ -33,7 +33,8 @@ module.exports = { deliveryType, uploadPreset, folder = process.env.SITE_NAME, - imagesPath = CLOUDINARY_ASSET_DIRECTORIES.find(({ inputKey }) => inputKey === 'imagesPath').path + imagesPath = CLOUDINARY_ASSET_DIRECTORIES.find(({ inputKey }) => inputKey === 'imagesPath').path, + sizes } = inputs; if ( !host && deliveryType === 'fetch' ) { @@ -71,14 +72,14 @@ module.exports = { try { _cloudinaryAssets.images = await Promise.all(imagesFiles.map(async image => { const publishPath = image.replace(PUBLISH_DIR, ''); - const cloudinary = await getCloudinaryUrl({ deliveryType, folder, path: publishPath, localDir: PUBLISH_DIR, uploadPreset, - remoteHost: host + remoteHost: host, + sizes }); return { @@ -86,7 +87,8 @@ module.exports = { ...cloudinary } })); - } catch(e) { + } catch (e) { + console.log(e) utils.build.failBuild(e.message); return; } @@ -165,7 +167,8 @@ module.exports = { deliveryType, loadingStrategy, uploadPreset, - folder = process.env.SITE_NAME + folder = process.env.SITE_NAME, + sizes } = inputs; const cloudName = process.env.CLOUDINARY_CLOUD_NAME || inputs.cloudName; @@ -196,7 +199,8 @@ module.exports = { uploadPreset, folder, localDir: PUBLISH_DIR, - remoteHost: host + remoteHost: host, + sizes }); await fs.writeFile(page, html); diff --git a/src/lib/cloudinary.js b/src/lib/cloudinary.js index b608ffe..17d9158 100644 --- a/src/lib/cloudinary.js +++ b/src/lib/cloudinary.js @@ -69,6 +69,7 @@ async function getCloudinaryUrl(options = {}) { localDir, remoteHost, uploadPreset, + sizes } = options; const { cloud_name: cloudName, api_key: apiKey, api_secret: apiSecret } = cloudinary.config(); @@ -84,6 +85,7 @@ async function getCloudinaryUrl(options = {}) { let fileLocation; let publicId; + let srcset; //mine if ( deliveryType === 'fetch' ) { // fetch allows us to pass in a remote URL to the Cloudinary API @@ -101,9 +103,10 @@ async function getCloudinaryUrl(options = {}) { let fullPath = filePath; - if ( !isRemoteUrl(fullPath) ) { - fullPath = path.join(localDir, fullPath); - } + // if ( !isRemoteUrl(fullPath) ) { + // fullPath = path.join(localDir, fullPath); + // } + const id = await createPublicId({ path: fullPath @@ -112,8 +115,13 @@ async function getCloudinaryUrl(options = {}) { const uploadOptions = { folder, public_id: id, - overwrite: false - } + overwrite: false, + eager: sizes.map(({ width, height, crop }) => ({ + width, + height, + crop + })) + }; if ( uploadPreset ) { uploadOptions.upload_preset = uploadPreset; @@ -136,11 +144,15 @@ async function getCloudinaryUrl(options = {}) { }); } + // console.log("RESULTS!!: ", results); + // Finally use the stored public ID to grab the image URL const { public_id } = results; publicId = public_id; fileLocation = fullPath; + // srcset uses url from results + srcset = results.eager.map(({ url }) => url); } const cloudinaryUrl = cloudinary.url(publicId, { @@ -157,7 +169,8 @@ async function getCloudinaryUrl(options = {}) { return { sourceUrl: fileLocation, cloudinaryUrl, - publicId + publicId, + srcset }; } @@ -187,11 +200,12 @@ async function updateHtmlImagesToCloudinary(html, options = {}) { localDir, remoteHost, loadingStrategy = 'lazy', + sizes } = options; const errors = []; const dom = new JSDOM(html); - + console.log("SIZES:",sizes) // Loop through all images found in the DOM and swap the source with // a Cloudinary URL @@ -210,21 +224,26 @@ async function updateHtmlImagesToCloudinary(html, options = {}) { cloudinaryUrl = asset.cloudinaryUrl; } + let urlsrcset; + // If we don't have an asset and thus don't have a Cloudinary URL, create // one for our asset if ( !cloudinaryUrl ) { try { - const { cloudinaryUrl: url } = await getCloudinaryUrl({ + const { cloudinaryUrl: url, srcset:srcset } = await getCloudinaryUrl({ deliveryType, folder, path: imgSrc, localDir, uploadPreset, remoteHost, - loadingStrategy + loadingStrategy, + sizes }); cloudinaryUrl = url; + urlsrcset = srcset; + // console.log(urlsrcset) } catch(e) { const { error } = e; errors.push({ @@ -235,6 +254,8 @@ async function updateHtmlImagesToCloudinary(html, options = {}) { } } + console.log(urlsrcset) + $img.setAttribute('src', cloudinaryUrl); $img.setAttribute('loading', loadingStrategy);