Bug Report

Describe the bug

If a user is running Netlify CLI local development env (netlify deploy --build) on Windows, generated Cloudinary URLs will contain %5C.

Is this a regression?

Nope!

Steps To Reproduce the error

must be on windows

1. cd into the root directory of a linked netlify site's repo
2. Verify that your netlify.toml enables the cloudinary integration and does not specify imagesPath
3. Build Netlify locally:

netlify deploy --build

4. Look for section netlify-plugin-cloudinary (onBuild event) in the build logs

Expected behaviour

The redirects should always contain / since they are for a URI, not a file path. In the case of Windows, I would expect the \ which is then escaped to \\ to be replaced with /

CodeSandbox or Live Example of Bug

1. Check out my branch locally
2. cd to tests dir
3. npx vitest

Screenshot or Video Recording

I wrote new tests to confirm the bug

Your environment

• OS: Windows 11
• Node version: 18
• Npm version: 9.8.1

Additional context

I'm trying to do Netlify CLI local development and noticed that the Cloudinary URLs looked wonky. As someone on Windows, I'd like to be able to contribute to this project and make sure the tests run as expected.

Feature Request

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Bug Report

Describe the bug

Using the default fetch API, you only need a Cloud Name, but the plugin requires API Key and Secret mistakenly.

Is this a regression?

Yes: #63

Feature Request

Is your feature request related to a problem? Please describe.

We can allow configuration of a "max size" to avoid images being delivered beyond that size

This can be done using c_limit, which will downscale but not upscale while preserving aspect ratio

If we do something along the lines of c_limit,w_900,h_900, this will:

• scale width to 900 if landscape and width is above
• scale height to 900 if portrait and height is above
• preserving the aspect ratio
• not upscaling at all

Describe the solution you'd like

Can be along the lines of:

[[plugins]]
  package = "netlify-plugin-visual-diff"
    [plugins.inputs]
    
      [[plugins.inputs.maxSize]]
        width = 900
        height = 900

Which would provide blanket downscaling as a max size for all images:

• Both attributes are optional
• Only apply a width or height to the image if specified
• Only add c_limit along with that if provided

Feature Request

Is your feature request related to a problem? Please describe.

No tests exist for onBuild with a delivery type of upload.

Describe the solution you'd like

The tests need to be able to mock the requests to avoid making real uploads and ensure the redirects are being added for that particular delivery type.

Feature Request

Is your feature request related to a problem? Please describe.

https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters
https://cloudinary.com/documentation/advanced_url_delivery_options#private_cdns_and_cnames

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Bug Report

Describe the bug

When using fetch, the netlify deployed URL is currently showing as undefined

Is this a regression?

Steps To Reproduce the error

Expected behaviour

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Your environment

• OS:
• Node version:
• Npm version:
• Browser name and version:

Additional context

Bug Report

Describe the bug

When a user provides a netlify.toml file k/v pair: plugins.inputs.loadingStrategy: eager it is ignored and instead uses lazy for all img loading attributes.

Is this a regression?

This is not a regression.

Steps To Reproduce the error

1. Have a Netlify site with the Cloudinary integration enabled
2. Create a netlify.toml in the site's root dir
3. Add the following code:

[[plugins]]
package = "netlify-plugin-cloudinary"
  [plugins.inputs]
  loadingStrategy = "eager"

4. Add an image to the site's static resources
5. Refer to the added image in the src attribute of an html img tag
6. Save + commit + push all changes
7. Deploy site with latest changes
8. Go to site
9. Right click image and select Inspect to review attributes

Expected behaviour

When inspecting the img's attributes, I expect to see the loading attribute be eager since I specified it in my netlify.toml

Your environment

• Netlify Build Version: 29.26.3
• Node version: 18
• Npm version: 9.8.1
• Browser name and version: Chrome 119.0.6045.106

Additional context

I've got a fix already so will open a PR~

Feature Request

Is your feature request related to a problem? Please describe.

New major version release that includes smaller bundle size and fixes

Images should by default use the loading="lazy" attribute.

This should be configurable in the Netlify file-based configuration to turn it off if someone prefers

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

Hi @colbyfayock ,

I was just going through this project and saw Issue Template is missing, as per Github Community Standards recommendations that would make the project contributor friendly.

Let me know if this is something you would allow me to implement under Hacktoberfest.

Feature Request

Is your feature request related to a problem? Please describe.

The Netlify image in the current README is hardly visible if using dark mode

Describe the solution you'd like

It would be nice to have the image change dynamically, adapting to the user's theme

Dark mode would look like this:

I'd be more than happy to work on it if it gets approved

Bug Report

Describe the bug

As a Netlify UI user of the publicly available (production) netlify-plugin-cloudinary integration, I am limited to using v1.10.2 (release/npm), despite the latest versions being available.

When a Netlify UI user interacts with the integration's card, the current links do not redirect to the version-specific content.

As a new Netlify UI user, this caused some confusion when I ran into build errors that maxSize (available in v1.11.0) was not a valid input.

Is this a regression?

Not sure; I am a new Netlify UI user of this integration.

Steps To Reproduce the error

1. Via the Netlify UI, enable the Cloudinary integration for $site
2. Create a netlify.toml file in $site's root dir
3. Copy/paste the following into netlify.toml + save, commit, push to trigger Netlify deployment:

[[plugins]]
  package = "netlify-plugin-cloudinary"

  [plugins.inputs]
  cloudName = "<Your Cloud Name>"

  [plugins.inputs.maxSize]
  height = 800

4. Netlify build will fail, complaining of invalid input "maxSize"
5. Review logs to find cloudinary version used, 1.10.2

Expected behaviour

As a Netlify UI user, I had the following incorrect assumptions:

1. Netlify would use the latest available version of the plugin; actual is pinned on v1.10.2
2. Netlify would allow me to specify which version of the plugin to use during build time; actual is possible via the Netlify UI (see Lighthouse integration example in screenshots below), but not specifically for the cloudinary plugin... I was unsuccessful in my attempts to specify the version in my netlify.toml and am unsure if that is possible.
3. Netlify UI Integration Card links would take me to the version-specific content for the version used by Netlify UI:
   • Review changelog:
     • actual: https://github.com/cloudinary-community/netlify-plugin-cloudinary/releases
     • expected: https://github.com/cloudinary-community/netlify-plugin-cloudinary/releases/tag/v1.10.2
   • Read docs:
     • actual: https://github.com/cloudinary-community/netlify-plugin-cloudinary#readme
     • expected: https://github.com/cloudinary-community/netlify-plugin-cloudinary/tree/v1.10.2#readme

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Actual Review changelog link

Actual Read docs link

Example of Netlify UI option for changing version

netlify.toml does not allow plugin version to be specified, fails build

netlify.toml plugin input included maxSize, fails build because the version used is 1.10.2, not 1.11.0

Your environment

Netlify UI

• Node version: v18.18.2
• Npm version: v9.8.1
• Netlify build version: @netlify/build 29.25.0

Additional context

Hello and congrats on the latest release! Thanks so much to all the contributors for their time and effort on this project.

I don't have experience publishing public or private integrations on Netlify; the information presented is strictly from a Netlify UI end-user perspective.

The CLOUDINARY_ASSETS environment variable is currently used to pass information between the different event handlers of this plugin. Would it make more sense to use a variable at the top-level scope of the main file instead?

One difference is: environment variable values should be strings, whereas the value of this variable is currently an object. Also, environment variables added by plugins can be seen in the build command. In this case, I think the value would be [object Object] since I believe Node.js would serialize it using String().

Feature Request

Is your feature request related to a problem? Please describe.

Uploads should be made concurrently and configurable to higher amounts.

We should add to documentation that enterprise customers are likely the ones who want to increase concurrency as they may hit rate limiting if they raise it on a free or selfserve plan.

Describe the solution you'd like

[[plugins]]
  package = "netlify-plugin-visual-diff"
    [plugins.inputs]
      uploadConcurrency = 10

Default is 10, but configurable to a higher amount

For the concurrency mechanism, we can use the pLimit package, such as:

import pLimit from 'p-limit';
...
const limitUploadFiles = pLimit(4);
...
const uploadsQueue = filesToUpload.map((upload) => {
        return limitUploadFiles(() => {
          async function uploadFile() {
            const imageToUpload = upload as Image;
            const formData = new FormData();

            formData.append('file', imageToUpload.file);

            const results = await fetch('/api/upload', {
              method: 'POST',
              body: formData
            }).then(r => r.json());

            return results
          }
          return uploadFile();
        });
      });

      await Promise.all(uploadsQueue);

Feature Request

Is your feature request related to a problem? Please describe.

The demo site should be turned into documentation to help show the options and configurations available in a friendlier UX

Describe the solution you'd like

Could be a good opp to try Starlight! https://starlight.astro.build/

Bug Report

Describe the bug

The app router adds preload tags. The plugin is currently replacing the value with the image paths, but because of how the redirects are set up to work, it ends up creating a duplicate request

preload tags run /images/[image].jpg where in order for Fetch to not create a redirect loop, we add /cld-assets/images/[image].jpg

The preload should include the Cloudinary URL?

Is this a regression?

Somewhat. Previously preload tags weren't being replaced. They're being replaced now, but not correctly.

Feature Request

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

    cloudinary.url("hello", {
      ...options,
      urlAnalytics: true,
      sdkCode: "[Code]",
      sdkSemver: "1.2.3",
      techVersion: "1.2.3"
    });

Describe alternatives you've considered

Additional context

Feature Request

When an image is created through static rendering, it includes the actual image prepended to a MD5 of image. For example, an image bird-8172597_1280.jpg is uploaded to Cloudinary as bird-8172597_1280-725f0013dd4d83931bd8e4036f727dac.jpg. Consider dropping the value after the last - so that the image name is retained.

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Bug Report

Describe the bug

I am doing the Arcane Wiki tutorial with the added feature of using a preset.

I am using Netlify environment variables for Cloud Name, API key, and API Secret

and this is my netlify.toml file

[[plugins]]
  package = "netlify-plugin-cloudinary"

  [plugins.inputs]
  cloudName = "YOUR_CLOUDNAME"
  deliveryType = "upload"
  uploadPreset = "arcane"

Here is my Cloudinary account showing the arcane preset

Here is what I get upon deploy

Is this a regression?

I'm pretty sure I got upload preset working over the summer with a test blog I was working with.

Steps To Reproduce the error

Expected behaviour

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Your environment

• OS:
• Node version:
• Npm version:
• Browser name and version:

Additional context

We can use Promise.all to kick off page parsing in parallel

Should be tested to ensure working properly and is actually helping performance

Feature Request

Is your feature request related to a problem? Please describe.

https://www.netlify.com/blog/introducing-netlify-image-cdn-beta/

Cloudinary supports generating responsive images.

https://cloudinary.com/documentation/responsive_images#responsive_breakpoint_generator

cloudinary.uploader.v2.upload("sample.jpg", { responsive_breakpoints: { create_derived: true, bytes_step: 20000, min_width: 200, max_width: 1000, transformation: { crop: 'fill', aspect_ratio: '16:9', gravity: 'auto' } } }, function(error, result) { console.log(result); });

The sizes used should be configurable in the Netlify file-based configuration. Ideally we could also target configuration, for instance, using element selectors to use specific sizes for that specific element(s).

For example: All images get sizes="..." while .my-images get sizes="..."

More Info

• https://cloudinary.com/blog/introducing_intelligent_responsive_image_breakpoints_solutions
• https://www.responsivebreakpoints.com/

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Bug Report

Describe the bug

Plugin error:

2:42:19 PM:   ReferenceError: asset is not defined

When using upload type of delivery

Is this a regression?

Introduced in #30 when abstracting the getAsset logic

Steps To Reproduce the error

1. Input uploadDelivery set to upload
2. Trigger build and deploy

This plugin is throwing errors to report user errors. However, uncaught exceptions in Build plugins are reported as plugin errors. Instead, the utils.build.failBuild() utility function should be used so the errors are reported as user-caused in the Netlify UI.

Feature Request

Is your feature request related to a problem? Please describe.

You can configure cloud name in both an environment variable and in a plugin input - if both are different values, we should warn in the logs that this is the case to help debugging.

Feature Request

Netlify offers a set of image transformations using three query parameters nf_resize, w and h. These parameters can be mapped to Cloudinary parameters c_, w_ and h_. Consider re-writing the Netlify URLs to Cloudinary URL format.

Additionally, if the setup has a default transformation, this may also need to be applied. For example, f_auto,q_auto.

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Feature Request

Is your feature request related to a problem? Please describe.

If an upload fails, we should attempt to re-upload.

Likely would only want to re-attempt that upload once.

Feature Request

Currently, image URLs are published with f_auto,q_auto. Consider adding option so that users can specify additional parameter like width, height, DPR. This settings could be applied in the netlify.toml file.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Feature Request

Is your feature request related to a problem? Please describe.

We want to be able to test the functions that upload images to Cloudinary without actually uploading them.

Describe the solution you'd like

Mocking whatever functions need to be mocked in order to prevent uploads while still testing the plugin capability

Additional context

Commented out after updating to test strings for creating tests on #30

SSee the following test cases:

• should create a Cloudinary URL with delivery type of upload from a local image
• should create a Cloudinary URL with delivery type of upload from a remote image

Feature Request

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Feature Request

Is your feature request related to a problem? Please describe.

I would like to specify a Cloudinary crop mode from my netlify.toml file; the current default value is limit and cannot be changed via netlify.toml.

I would also like to be able to specify "auto" as the value for maxSize.height and/or maxSize.width so that I can scale images automatically using Client Hints.

Describe the solution you'd like

Allowing a string to be used as the value of maxSize.height and maxSize.width would allow users to:

1. scale image widths automagically
2. dictate how big the "jumps" between automagic image widths should be, reducing cache misses

Users should be able to specify maxSize.crop to help with optimizing the final aesthetic result of an automatically scaled image on a site.

Describe alternatives you've considered

I haven't considered alternatives, but I'm open to suggestions~

Potential cases:

• Referencing an image that isn't a Cloudinary-supported file (if the node uploader fails)
• Restricting a remote URL from being downloaded through the node uploader (if this is possible)

Currently only looking inside the src property on images, should be additionally handling images within srcset

Create abstracted functions that for this plugin and other potential plugins to consume to bring the generalized HTML parsing functionality to other packages.

The plugin can only safely transform images that are on page in the statically compiled HTML.

To try to catch others, we can provide a redirect mechanism that will forward the images along, redirecting the request to a Cloudinary image.

See the following for an example:

https://github.com/netlify/petsofnetlify/blob/main/netlify.toml#L5

Feature Request

Is your feature request related to a problem? Please describe.

Currently no tests exist for onPostBuild. This hook is where changes are made in the HTML source including replacing URLs with Cloudinary URLs.

Describe the solution you'd like

Test cases should include but not limited to:

• Delivery Type: fetch vs upload
• Images Path: 1 vs multiple

Set a default folder name to the plugin's site name but allow override

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Bug Report

Describe the bug

When I replaced an image with a newer version and deployed it in Netlify, the image was not updated to Cloudinary, and the old version was served.

Is this a regression?

No.

Steps To Reproduce the error

1. In a site, replace an image with a new version, keeping the same file name.
2. Deploy the site to Netlify with properly configured netlify-plugin-cloudinary
3. Navigate to the website
4. The old version of the image is served. Cloudinary media library also shows the old version of the image

Expected behaviour

The new version of the image is synced to Cloudinary and served on the website.

Your environment

@netlify/build 29.33.5
[email protected] from Netlify app

Bug Report

Describe the bug

introduced in #89

Is this a regression?

Steps To Reproduce the error

Expected behaviour

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Your environment

• OS:
• Node version:
• Npm version:
• Browser name and version:

Additional context

If an image already exists in the Cloudinary account, we shouldn't try to re-upload it.

Can use the overwrite: false flag similar to:

https://github.com/jlengstorf/netlify-image-optimization-plugins/blob/master/packages/remark-local-image-to-cloudinary/upload.js#L17

Feature Request

Is your feature request related to a problem? Please describe.

We can take advantage of the Netlify cache utilities to save the recorded state of assets.

This includes keeping records of what images are uploaded as well as things like what upload preset was used (if any) so that we can force re-process all images with the new upload preset if set.

We're currently storing

Describe the solution you'd like

We're currently storing asset state in the following internally accessible object:

https://github.com/colbyfayock/netlify-plugin-cloudinary/blob/main/src/index.js#L22

We may be able to latch on to this for storing the results.

Netlify has a cache util that would allow us to easily store these details:

https://github.com/netlify/build/blob/main/packages/cache-utils/README.md

Feature Request

Is your feature request related to a problem? Please describe.

imagesPath currently is a single location, allow the ability to configure multiple local paths in the event images are being delivered from more than one local source.

Describe the solution you'd like

Is it possible to have different input types in yaml?

imagesPath = '/mypath'

# or

imagesPath = [ '/mypath', '/myotherpath' ]

Bug Report

Image links present in <link rel="preload" as="image" href="* are currently not being updated. They still point to original image source. For example, on this page, these references still exist.

<link rel="preload" as="image" href="/vercel.svg" fetchpriority="high">
<link rel="preload" as="image" href="https://cdn.pixabay.com/photo/2023/08/08/18/01/butterfly-8177925_1280.jpg">
<link rel="preload" as="image" href="https://cdn.pixabay.com/photo/2023/08/06/10/01/bird-8172597_1280.jpg">
<link rel="preload" as="image" href="/next.svg" fetchpriority="high">

Consider parsing and converting these links to upload or simply build Cloudinary URL as the actual upload may occur when the asset is discovered within an <img> tag.

Describe the bug

Is this a regression?

Steps To Reproduce the error

Expected behaviour

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Your environment

• OS:
• Node version:
• Npm version:
• Browser name and version:

Additional context

Add Semantic Release to automate versioning and management

https://github.com/semantic-release/semantic-release

The plugin is generating images via https://main--whatever.netlify.app instead of the correct https://whatever.netlify.app resulting in cloudinary rejecting the image and returning 401.

Please correct this to use either the custom domain or the domain minus main--.

Feature Request

Is your feature request related to a problem? Please describe.

https://www.netlify.com/blog/general-availability-netlify-sdk-software-development-kit/