cloudinary-community / netlify-plugin-cloudinary Goto Github PK
View Code? Open in Web Editor NEWSupercharge images on your Netlify site with Cloudinary!
Home Page: https://netlify.cloudinary.dev/
License: MIT License
Supercharge images on your Netlify site with Cloudinary!
Home Page: https://netlify.cloudinary.dev/
License: MIT License
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
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
.
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()
.
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.
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.
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.
No.
The new version of the image is synced to Cloudinary and served on the website.
@netlify/build 29.33.5
[email protected] from Netlify app
Add Semantic Release to automate versioning and management
New major version release that includes smaller bundle size and fixes
Currently no tests exist for onPostBuild. This hook is where changes are made in the HTML source including replacing URLs with Cloudinary URLs.
Test cases should include but not limited to:
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.
https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters
https://cloudinary.com/documentation/advanced_url_delivery_options#private_cdns_and_cnames
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.
The Netlify image in the current README is hardly visible if using dark mode
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
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.
Allowing a string to be used as the value of maxSize.height and maxSize.width would allow users to:
Users should be able to specify maxSize.crop to help with optimizing the final aesthetic result of an automatically scaled image on a site.
I haven't considered alternatives, but I'm open to suggestions~
No tests exist for onBuild with a delivery type of upload.
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.
Currently only looking inside the src
property on images, should be additionally handling images within srcset
The demo site should be turned into documentation to help show the options and configurations available in a friendlier UX
Could be a good opp to try Starlight! https://starlight.astro.build/
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.
Not sure; I am a new Netlify UI user of this integration.
[[plugins]]
package = "netlify-plugin-cloudinary"
[plugins.inputs]
cloudName = "<Your Cloud Name>"
[plugins.inputs.maxSize]
height = 800
As a Netlify UI user, I had the following incorrect assumptions:
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
Netlify UI
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.
If a user is running Netlify CLI local development env (netlify deploy --build
) on Windows, generated Cloudinary URLs will contain %5C
.
Nope!
must be on windows
imagesPath
netlify deploy --build
netlify-plugin-cloudinary (onBuild event)
in the build logsThe 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 /
npx vitest
I wrote new tests to confirm the bug
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.
Using the default fetch API, you only need a Cloud Name, but the plugin requires API Key and Secret mistakenly.
Yes: #63
We want to be able to test the functions that upload images to Cloudinary without actually uploading them.
Mocking whatever functions need to be mocked in order to prevent uploads while still testing the plugin capability
Commented out after updating to test strings for creating tests on #30
SSee the following test cases:
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.
[[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);
https://www.netlify.com/blog/general-availability-netlify-sdk-software-development-kit/
Set a default folder name to the plugin's site name but allow override
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:
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:
c_limit
along with that if providedI 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
I'm pretty sure I got upload preset working over the summer with a test blog I was working with.
If an upload fails, we should attempt to re-upload.
Likely would only want to re-attempt that upload once.
Plugin error:
2:42:19 PM: ReferenceError: asset is not defined
When using upload type of delivery
Introduced in #30 when abstracting the getAsset
logic
upload
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:
Create abstracted functions that for this plugin and other potential plugins to consume to bring the generalized HTML parsing functionality to other packages.
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?
Somewhat. Previously preload tags weren't being replaced. They're being replaced now, but not correctly.
When using fetch, the netlify deployed URL is currently showing as undefined
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:
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.
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 π¦π
https://www.netlify.com/blog/introducing-netlify-image-cdn-beta/
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.
This is not a regression.
[[plugins]]
package = "netlify-plugin-cloudinary"
[plugins.inputs]
loadingStrategy = "eager"
src
attribute of an html img
tagInspect
to review attributesWhen inspecting the img
's attributes, I expect to see the loading
attribute be eager
since I specified it in my netlify.toml
I've got a fix already so will open a PR~
We can use Promise.all
to kick off page parsing in parallel
Should be tested to ensure working properly and is actually helping performance
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
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
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:
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.
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 π¦π
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.
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
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="..."
Potential cases:
cloudinary.url("hello", {
...options,
urlAnalytics: true,
sdkCode: "[Code]",
sdkSemver: "1.2.3",
techVersion: "1.2.3"
});
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--.
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.
introduced in #89
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.
Is it possible to have different input types in yaml?
imagesPath = '/mypath'
# or
imagesPath = [ '/mypath', '/myotherpath' ]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.