cloudinary / frontend-frameworks Goto Github PK

Cloudinary javascript frontend frameworks SDKs, including Shared HTML layer, Angular, React and Vue SDKs

License: MIT License

JavaScript 6.48% TypeScript 83.88% CSS 2.94% Shell 0.34% HTML 2.29% Vue 4.08%

cloudinary cloudinary-sdk cloudinary-javascript-library image-manipulation video-manipulation javascript javascript-library react-library angular-library vue-library

frontend-frameworks's Introduction

Cloudinary Frontend Frameworks

About this project

This project contains SDKs designed to work with Cloudinary url-gen.
These SDKs render CloudinaryImage or CloudinaryVideo objects into the DOM.

Packages contained within this project:

The React SDK used to render an image & video component. NPM | {@link ReactSDK|Reference}
The Angular SDK used to render an image & video component. NPM | {@link AngularSDK|Reference}

Each SDK also contains advanced features in the form of plugins, which extend the native HTMLImage and HTMLVideo elements.

{@link accessibility|accessibility} - Used to make your images more accessible to your users with visual disabilities.
{@link lazyload|lazyload} - Used to delay loading images if they are not yet visible on the screen.
{@link placeholder|placeholder} - Used to display a lightweight version of an image while the target image is downloading.
{@link responsive|responsive} - Used to resize your images automatically based on the viewport size.

Development setup

To build and link project:

clone project
npm run quickstart

Installation

To get started, install the npm client package of your choice along with our base package. For example, to use Cloudinary in a React environment, the following packages should be installed:

npm i @cloudinary/react @cloudinary/url-gen

Note: To use Angular install @cloudinary/ng.

Simple usage

The following is a simple example using React. For more information on React and other frameworks, navigate to the specific reference using the Packages menu.

import React from 'react'
// Cloudinary is used to configure your account and generate urls for your media assets
import {Cloudinary} from "@cloudinary/url-gen";
// Import the cloudinary media component (AdvancedImage / AdvancedVideo),
// and the plugins you want to use.
import {AdvancedImage, accessibility, responsive} from '@cloudinary/react';

// Once per project/app - configure your instance.
// See the documentation of @cloudinary/url-gen for more information.
const myCld = new Cloudinary({cloud: {cloudName: 'demo'}});

export const App = () => {
  // Create a new image object:
  const img = myCld.image('sample');

  // Render your component.
  return (
    <div>
      <AdvancedImage cldImg={img} plugins={[responsive(), accessibility()]}/>
    </div>
  )
};

Plugin Order

We recommend the following order when using our plugins to achieve the best results:

<AdvancedImage plugins={[lazyload(), responsive(), accessibility(), placeholder()]}/>

You can omit any plugin, but the order from above should remain.

Contributors

Repository is using Conventional Commits. To publish packages please read instructions in sdk-scripts.

frontend-frameworks's People

Contributors

Stargazers

Watchers

Forkers

grahamdigital bobyhw jgleal mycabin-eu indraraj26 moishinetzer dannyv-cloudinary sahanar11 cloudinary sofly pawelphilipczyk cloudy408 jroco-cloudinary santoshyadavdev

frontend-frameworks's Issues

React README usage confusing

Kind of a nitpick but:

missing Cloudinary import
the img var is declared twice, makes the example hard to follow

edit:
Reading it again, is not clear what the CloudinaryImage class is for 🤔

Does responsive plugin work as it should in React SDK?

For which package is this issue?

React

Describe the issue in a sentence or two.

Using the responsive plugin, the original image also loads, making the plugin redundant. I'm not sure if I've completely missed the point of a responsive plugin, but it seems like it's not working like it should. If I have a massive image that I want to load on a small screen, the responsive plugin should only load an image that is sized to fit on the small screen, but what's happening is the massive image gets loaded then a responsive one loads after that. So not only does not save any bandwidth, it actually increases it! Additionally, what is the point of continually loading smaller images if the screen size gets smaller? Surely it would make more sense to only load new images if the screen size increases? Again, seems like a complete waste of bandwidth and defeats the point of having this plugin. I can only assume this is a bug.

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[ ] Performance - Performance issues
[x] Behaviour - Functions aren’t working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[ ] Other (Specify)

Steps to reproduce

Use the following as taken from the docs:

const cloudinaryImage = new CloudinaryImage("sample", { cloudName: "demo" });

<AdvancedImage cldImg={cloudinaryImage} plugins={[responsive()]} />

Observe two image downloads in the network panel, one full size and one responsive.

Error screenshots

Browsers (if issue relates to UI, else ignore)

[ ] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[ ] All

Versions and Libraries (fill in the version numbers)

Node - 0.0.0
NPM - 0.0.0

Config Files (Please paste the following files if possible)

"@cloudinary/react": "^1.4.1",
"@cloudinary/url-gen": "^1.8.0",

Serve webp docs

Is there any information on how to serve WebP first using the AdvancedImage or AdvancedPicture component?

AdvancedImage component responsiveness compromised with conflicting plugins in React (17 and 18)

New issue for cloudinary/frontend-frameworks

"@cloudinary/react": "^1.11.0",

For which package is this issue?

"@cloudinary/react": "^1.11.0",

Describe the issue in a sentence or two.

The AdvancedImage component's responsiveness is compromised when used with conflicting plugins simultaneously, which can cause excessive data download for users. A simplified implementation that only utilizes the responsive plugin resolves the issue. This issue may be a bug in the React SDK.

Issue Type (Can be multiple)

Build - Can’t install or import the SDK
Performance - Performance issues
Behaviour - Functions aren’t working as expected
Documentation - Inconsistency between the docs and behaviour
Incorrect Types
Other (Specify)

Steps to reproduce

Use the AdvancedImage component with conflicting plugins such as the placeholder and lazyload plugins in a React app.
Observe the compromised responsiveness of the component and the excessive data download for some users.
Switch to a simplified implementation that only uses the responsive plugin to resolve the issue.

Error screenshots

N/A

Browsers (if issue relates to UI, else ignore)

Versions and Libraries (fill in the version numbers)

package SDK version

"@cloudinary/react": "^1.11.0"
React: "18.2.0" & "17.0.2"
Other relevant libraries: [insert version]

Config Files (Please paste the following files if possible)

Package.json:

Code Examples

Original implementation:

<AdvancedImage
  style={style}
  alt={alt}
  cldImg={myImage}
  plugins={[    ...(withBlur      ? [          placeholder({            mode: 'blur',          }),        ]
      : []),
    lazyload(),
    responsive({
      steps: 150,
    }),
  ]}
/>

Simplified implementation:

<AdvancedImage
  style={style}
  loading="lazy"
  alt={alt}
  cldImg={myImage}
  plugins={[
    responsive({
      steps: 150,
    }),
  ]}
/>

In the original implementation, the AdvancedImage component is used with three plugins: the placeholder plugin with a blur mode (if withBlur is true), the lazyload plugin, and the responsive plugin with 150 steps. In contrast, the simplified implementation only uses the responsive plugin with 150 steps and sets the loading attribute to "lazy". This results in a more efficient and responsive image-loading experience for users.

New issue for cloudinary/frontend-frameworks

Before proceeding, please update to the latest version and test if the issue persists

For which package is this issue?

latest cloudinary react readme

Describe the issue in a sentence or two.

I went to GitHub while researching an error I got and noticed that the README has some syntax errors, but I am also not experienced enough with this package to correct them.

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[ ] Performance - Performance issues
[ ] Behaviour - Functions aren’t working as expected
[x] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[ ] Other (Specify)

Steps to reproduce

Go to the readme for the react sdk

Error screenshots

@Angular List images by tag

Is it possible to add the feature to Angular?

Angular advanced-image does not update width and height inputs on responsive design

New issue for cloudinary/frontend-frameworks

Before proceeding, please update to the latest version and test if the issue persists

For which package is this issue?

"@cloudinary/ng": "^1.7.0"

Describe the issue in a sentence or two.

Input property bindings, width and height for advanced image do not update the inner img tag. They are set once during ngOnInit

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[ ] Performance - Performance issues
[ ] Behaviour - Functions aren’t working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[x] Other (Specify)

Steps to reproduce

Error screenshots

Browsers (if issue relates to UI, else ignore)

[ ] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[x] All

Versions and Libraries (fill in the version numbers)

package SDK version
Node - 0.0.0
NPM - 0.0.0

Config Files (Please paste the following files if possible)

Package.json

Repository

If possible, please provide a link to a reproducible repository that showcases the problem

Module not found: Can't resolve '@cloudinary/base/actions/delivery'

Hello all!
I've been trying to use Cloudinary's React SDK with the V2 version. I followed the steps described in the tutorial (https://cloudinary.com/documentation/react2_integration) but, when I install the packages and try to implement the base code to display an image, I got this error when compiling my code:

Failed to compile.

./node_modules/@cloudinary/html/utils/internalConstants.js
Module not found: Can't resolve '@cloudinary/base/actions/delivery' in '/Users/canserkanuren/workspace/Perso/cem-taxi-react/node_modules/@cloudinary/html/utils'

Can you guys help me out ?
Thank you

getting error Unexpected token 'export'

I have been getting error about Unexpected token 'export' when I was using @cloudinary/react

export { HtmlImageLayer } from './layers/htmlImageLayer';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/sandbox/node_modules/@cloudinary/react/index.js:1:12)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.@cloudinary/react (/sandbox/.next/server/pages/index.js:44:18)
    at __webpack_require__ (/sandbox/.next/server/webpack-runtime.js:33:42)
/sandbox/node_modules/@cloudinary/html/index.js:1

A codesanbox example: codesanbox

Image flickering when using @cloudinary/react lazyload after adding alt text

New issue for cloudinary/frontend-frameworks

Before proceeding, please update to the latest version and test if the issue persists

For which package is this issue?

@cloudinary/react

Describe the issue in a sentence or two.

After adding alt text to an image and adding the lazyload plugin, an image flickering is happening very briefly, as it show the alt text before the image. You can see it here if you refresh the demo a few times: https://codesandbox.io/p/sandbox/lazy-loading-lqip-react-js-sdk-2-0-forked-c3hsk6?file=%2Fsrc%2FLazyloading.js%3A34%2C40

I've tried adding a placeholder too and the issue remains the same. using onError to add a default image as shown here doesn't seem to work as well.

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[X] Performance - Performance issues
[X] Behaviour - Functions aren’t working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[ ] Other (Specify)

Steps to reproduce

Just add an image with alt text and lazyload plugin and then refresh the page a few times and you be able to see it a few times before the image loads

<AdvancedImage
              alt="This is the alt text"
              key={i}
              cldImg={cld.image(image)}
              plugins={[lazyload()]}
            ></AdvancedImage>

Error screenshots

You can see the "This is the alt text" alt text very quickly before the image loads

Browsers (if issue relates to UI, else ignore)

[] Chrome
[] Firefox
[ ] Safari
[ ] Other (Specify)
[X] All

Versions and Libraries (fill in the version numbers)

package SDK version
Node - 18.15.0
NPM - 9.6.7

Config Files (Please paste the following files if possible)

"dependencies": {
    "@cloudinary/react": "^1.13.0",
    "@cloudinary/url-gen": "^1.19.0",
[...]
}

Repository

https://codesandbox.io/p/sandbox/lazy-loading-lqip-react-js-sdk-2-0-forked-c3hsk6?file=%2Fsrc%2FLazyloading.js%3A33%2C13-38%2C30

Deep import warning still an issue with the new @cloudinary/ng package

Warning when starting [in an Nx environment]

Entry point '@cloudinary/ng' contains deep imports into '/media/user/external/bamboo/xml-data/build-dir/TRAV-SINMRFB-JOB1/node_modules/@cloudinary/url-gen/assets/CloudinaryImage'. This is probably not a problem, but may cause the compilation of entry points to be out of order

Quality transformation gets added twice (React SDK)

For which package is this issue?

React

Describe the issue in a sentence or two.

Hi, I have a custom reusable react "image" component that utilizes AdvancedImage. The component takes in a prop 'imageQuality' and it's a string, I have a function that simply chains .quality(imageQuality) to the cloudinary instance, which is then passed to AdvancedImage.

When I console log the tranformed url, I noticed that quality shows up twice... for example: https://res.cloudinary.com/myCloudName/image/upload/q_80/q_80/v1/xxxx.png

Any help is appreciated... thank you.

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[ ] Performance - Performance issues
[ x] Behaviour - Functions aren’t working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[ ] Other (Specify)

related Cloudinary imports:

import { AdvancedImage, responsive, placeholder } from '@cloudinary/react'
import { Cloudinary } from '@cloudinary/url-gen';
import {scale, fill, limitFill, crop} from "@cloudinary/url-gen/actions/resize";
import {dpr} from "@cloudinary/url-gen/actions/delivery";

function that chains .quality to image instance:

// get image quality
    function getQuality(imageQuality) {
    if (imageQuality === 'auto') {
      return 'q_auto:best'
    } else if (typeof +imageQuality && !Number.isNaN(+imageQuality)) {
      return Number(imageQuality);
    }
  }
  
 // chain quality
  function chainQuality(baseImage, imageQuality) {
    let transformedImage = baseImage.quality(getQuality(imageQuality));
    return transformedImage;
  }

using reducer and useEffect to conditionally chain 'quality' function:

  function reducer(state, action) {
    switch (action.type) {
      case 'quality':
        return {...state, image: chainQuality(state.image, state.imageQuality)};
      // ... with other action types 
    }
  }

  const initialState = {
    image: img,
    imageQuality: imageQuality,
    // ... with other props
  };

  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    if (imageQuality) {
      dispatch({ type: 'quality' });
    }
    // ... with other dispatches
  }, []);

result/problem - quality shows up twice in url:

 console.log('state', state.image.toURL());
 // returns something like https://res.cloudinary.com/myCloudName/image/upload/q_80/q_80/v1/xxxx.png

Versions and Libraries (fill in the version numbers)
Node - v16.16.0
NPM - 8.11.0

Package.json includes:
"@cloudinary/react": "^1.4.1",
"@cloudinary/url-gen": "^1.8.0",

Could not find a declaration file for module '@cloudinary/react'.

Could not find a declaration file for module '@cloudinary/react'

[BUG] Unexpected token 'export' - HtmlImageLayer

Something is wrong with htmlImageLayer. I'm getting this error:

node_modules/@cloudinary/html/index.js:1
export { HtmlImageLayer } from './layers/htmlImageLayer';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/node_modules/@cloudinary/react/index.js:1:12)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

Node: v12.22.1
yarn: 1.22.10

info Direct dependencies
├─ @cloudinary/[email protected]
└─ @cloudinary/[email protected]
info All dependencies
├─ @cloudinary/[email protected]
├─ @cloudinary/[email protected]
├─ @cloudinary/[email protected]
└─ @types/[email protected]

You can reproduce it here: https://codesandbox.io/s/cloudinary-react-beta-8-import-bug-feuk9

Cannot read properties of null (reading 'toURL') for cloudinary/ng

New issue for cloudinary/frontend-frameworks

Before proceeding, please update to the latest version and test if the issue persists

For which package is this issue?

"@cloudinary/ng": "^1.4.1",
"@cloudinary/url-gen": "^1.8.0",

Describe the issue in a sentence or two.

I have created pipe which is asynchronous getting key from X server then perform getImage.
This is how I am using in my template, The image is getting loaded properly but throwing error in console

  <advanced-image [cldImg]="path | cloudinaryGetImage | async"></advanced-image>

Issue Type (Can be multiple)

Steps to reproduce

… if applicable

Error screenshots

Browsers (if issue relates to UI, else ignore)

[X] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[ ] All

Versions and Libraries (fill in the version numbers)

package SDK version
Node - v14.17.1
NPM - 6.14.13
Angular: 13.2.2

Config Files (Please paste the following files if possible)

Package.json

Repository

If possible, please provide a link to a reproducible repository that showcases the problem

import { audio } from "@cloudinary/url-gen/qualifiers/source"; missing in "@cloudinary/react": "^1.11.2",

I am importing import { audio } from "@cloudinary/url-gen/qualifiers/source"; in react but it's not found although importing text , image and video works for me like below
import { text, image, video } from "@cloudinary/url-gen/qualifiers/source";

fix(Angular) - Regression error Unable to build library with a CloudinaryModule dependency

Error:

Building entry point '@iko/media/ui-cloudinary-image'
------------------------------------------------------------------------------
node_modules/@cloudinary/angular/lib/cloudinary.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of MediaUiCloudinaryImageModule, but could not be resolved to an NgModule class.

This likely means that the library (@cloudinary/angular) which declares CloudinaryModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

1 export declare class CloudinaryModule {
                       ~~~~~~~~~~~~~~~~


———————————————————————————————————————————————

>  NX   ERROR  Running target "media-ui-cloudinary-image:build" failed

Fails in:
"@cloudinary/angular": "1.0.0-beta.11",
"@cloudinary/base": "1.0.0-beta.4",

This works fine using
"@cloudinary/angular": "1.0.0-beta.8"

Project uses Angular 12.2 with all libraries using Ivy

lodash/clonedeep is not recognized. Did you mean lodash.clonedeep

Currently have a problem building. Using Rollup, lodash/clonedeep references in source code are not being recognized. However lodash.clonedeep currently work.

@cloudinary/[email protected]" has incorrect peer dependency "@angular/common@^10.0.0 || ^11.0.0 || ^12.0.0".

New issue for cloudinary/frontend-frameworks

Before proceeding, please update to the latest version and test if the issue persists

For which package is this issue?

@cloudinary/ng

Describe the issue in a sentence or two.

Bump peer dependencies

How does the React SDK v2 support fetch remote images?

I couldn't find anything about fetch remote image feature in the v2 code or documents. Did I miss something or it is not available?

Cannot find module '@cloudinary/url-gen' or its corresponding type declarations.

"@angular/core": "~14.1.0", "@cloudinary/ng": "^1.4.2", "@cloudinary/url-gen": "^1.8.1",

When I add CloudinaryModule in app.modules I am getting the following issues:

Error: node_modules/@cloudinary/html/types.d.ts:2:34 - error TS2307: Cannot find module '@cloudinary/url-gen/actions/transcode/VideoCodecAction' or its corresponding type declarations.

2 import { VideoCodecAction } from "@cloudinary/url-gen/actions/transcode/VideoCodecAction";

Do you know what I am missing here please ?

Uncaught promise TypeError: Cannot read properties of undefined (analyticsOptions)

For which package is this issue?

Current version (1.5.0) and previous versions from 1.0.0 (December 21, 2021)

Describe the issue in a sentence or two.

Uncaught exception when not passing analyticsOptions to HtmlImageLayer class constructor. The analyticsOptions is optional parameter for the class, but then when the values are assigned, doesn't have a fallback or check if analyticsOptions is undefined, so raises exception. Documentation also doesn't explain this option anywhere so impossible to configure.

Suggestion is to change logic to optionally add analytics options if parameter is set and ignore otherwise. Error raised on this line: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/html/src/layers/htmlImageLayer.ts#L19 but also present on line 39 of the same file

Issue Type (Can be multiple)

[x ] Performance - Performance issues
[x ] Behaviour - Functions aren’t working as expected
[x ] Documentation - Inconsistency between the docs and behaviour
[x ] Other (Specify): Bug

Steps to reproduce

new HtmlImageLayer(
	imgElement, // img element
	image, // CloudinaryImage
	plugins, // optional plugins
);

Error screenshots

Browser keep crashing with @cloudinary/ng when try use it inside loop in Angular

New issue for cloudinary/frontend-frameworks

Before proceeding, please update to the latest version and test if the issue persists

For which package is this issue?

@cloudinary/ng

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[ ] Performance - Performance issues
[ x] Behaviour - Functions aren’t working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[ ] Other (Specify)

Steps to reproduce

In my Angular App I get an Array with image details from Database with publicId field for example: images = [ { publicId : "something", cratedAt: "...", updatedAt: ".."}, etc.. ] .
And in my component I'm trying to loop over them and get the images from Cloudinary:
<advanced-image [cldImg]="getImg(image.publicId)">

The method looks like that:
getImg(publicId: string): CloudinaryImage {
console.log(publicId, 'publicId') const cld = new Cloudinary({
cloud: {
cloudName: environment.cloudinary.cloud_name,
},
})
return cld.image(publicId)
}

when I start the app, my browser crashes all the time. How can I fix this ? It was working before with angular 14 and the depreciated package @cloudinary/angular-5.x . I updated the project to Angular 16.

Browsers (if issue relates to UI, else ignore)

[ ] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[x ] All

Versions and Libraries (fill in the version numbers)

@cloudinary/ng: "^2.0.0",
Node - v18.17.0
NPM - 9.4.0

Placeholder plugin not doing anything

For which package is this issue?

@cloudinary/react 1.11.1 (and 1.11.0)

Describe the issue in a sentence or two.

I tried to implement the Placeholder plugin on my React application, based on the example found here: https://github.com/cloudinary-devs/cld-react-plugins
However the Placeholder plugin doesn't do anything, the image is loaded in high quality, it's like it's not there.
I tried to change the version to 1.8.0, the placeholder worked, but no more the responsive.

Issue Type (Can be multiple)

Steps to reproduce

import './App.css';
import { CloudinaryImage } from "@cloudinary/url-gen";
import {
  AdvancedImage,
  lazyload,
  placeholder
} from "@cloudinary/react";

function App() {

  const largeImage = new CloudinaryImage("oil", {
    cloudName: "demo"
  });

  return (
    <div className="App">
      <div style={{ height: "700px" }}>
        Scroll down for lazyloading a large image with a placeholder
      </div>
      <AdvancedImage
        style={{ height: "700px" }}
        cldImg={largeImage}
        plugins={[lazyload(),
        placeholder({ mode: 'pixelate' })
        ]}
      />
    </div>
  );
}

export default App;

Browsers (if issue relates to UI, else ignore)

[x] Chrome
[x] Firefox
[ ] Safari
[ ] Other (Specify)
[ ] All

Versions and Libraries (fill in the version numbers)

package SDK version
Node - 18.13.0
NPM - 8.19.3

Config Files (Please paste the following files if possible)

Package.json

  "dependencies": {
    "@cloudinary/react": "1.11.1",
    "@cloudinary/url-gen": "^1.9.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.14",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },

Vite cannot resolve entry for package "@cloudinary/html"

Vite cannot resolve entry for package "@cloudinary/html" because package.json specifies:

  "main": "dist/index.js",
  "umd": "dist/index.umd.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",

but actually there is no "dist" subdirectory in the package.
Like this:

  "main": "index.js",
  "umd": "index.umd.js",
  "module": "index.esm.js",
  "types": "index.d.ts",

builds without errors.

Create Ivy distribution

For which package is this issue?

@cloudinary/ng

Describe the issue in a sentence or two.

Angular >12 warns that Cloudinary module still using View Engine and to contact the module vendor

Processing legacy "View Engine" libraries:
- @cloudinary/ng [module/esm2015] (https://github.com/cloudinary/frontend-frameworks)
Encourage the library authors to publish an Ivy distribution.

Issue Type (Can be multiple)

[X] Performance - Performance issues

Can't resolve '@cloudinary/base/values/background' in 'packages/web/node_modules/@cloudinary/html'

Context

Using it with yarn version 2 workspace.

How to reproduce

Install two dependencies @cloudinary/base and @cloudinary/react inside a workspace
Start your app
Error appears.

More output

failed Re-building development bundle - 6.661s
ERROR in ./node_modules/@cloudinary/html/internalConstnats.js 5:0-64
Module not found: Error: Can't resolve '@cloudinary/base/values/background' in
'project/packages/web/node_modules/@cloudinary/html'
 @ ./node_modules/@cloudinary/html/accessibility.js 1:0-58 26:13-32 29:37-56
 @ ./node_modules/@cloudinary/html/index.js 4:0-48 4:0-48
 @ ./node_modules/@cloudinary/react/index.js 1:6-33

`AdvancedVideo` and `AdvancedImage` are not valid JSX.Elements in React.

Attempting to render either will throw this error:

JSX element class does not support attributes because it does not have a 'props' property.ts(2607)
'AdvancedImage' cannot be used as a JSX component.
  Its instance type 'AdvancedImage' is not a valid JSX element.
    Type 'AdvancedImage' is missing the following properties from type 'ElementClass': setState, forceUpdate, props, state, and 2 more.ts(2786)

This problem is visible in your live demo

Adding @cloudinary/ng package removes ng-reflect-* attributes

New issue for cloudinary/frontend-frameworks

Before proceeding, please update to the latest version and test if the issue persists

For which package is this issue?

@cloudinary/ng

Describe the issue in a sentence or two.

After I add the @cloudinary/ng package, the ng-reflect-* attributes throughout my client application are removed. It looks like the behavior probably originates from this PR, where prod mode is enabled: #63

Issue Type (Can be multiple)

Steps to reproduce

Import CloudinaryModule from @cloudinary/ng into app.module.ts

Error screenshots

Before importing CloudinaryModule:

After importing CloudinaryModule:

Browsers (if issue relates to UI, else ignore)

[ ] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[x] All

Versions and Libraries (fill in the version numbers)

package SDK version
Node - 14.17.0
NPM - 6.14.13

Config Files (Please paste the following files if possible)

Package.json
{
"name": "test-cloudinary-ng",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~13.2.0",
"@angular/common": "~13.2.0",
"@angular/compiler": "~13.2.0",
"@angular/core": "~13.2.0",
"@angular/forms": "~13.2.0",
"@angular/platform-browser": "~13.2.0",
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
"@cloudinary/ng": "^1.1.0",
"@cloudinary/url-gen": "^1.6.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.2.4",
"@angular/cli": "~13.2.4",
"@angular/compiler-cli": "~13.2.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
}

Repository

Here's a repo that reproduces the issue: nixallover/debug-cloudinary-ng#1

Incorrect URL Encoding when PublicID contains a GET query

Hi, we are using the auto-upload feature, and some of the images have query strings on their URL, but because of these URLs being uriencoded by the AdvancedImage component, Cloudinary returns a 400 error.

I've tracked the issue down to this line:
https://github.com/cloudinary/js-url-gen/blob/9a3d0a29ea77ddfd6f7181251615f34c2d8a6c5d/src/assets/CloudinaryFile.ts#L282

Maybe there could be an option to skip this?

thanks

Allow authentication token to be passed to React components

For our use case, we would like to generate an authentication token on our Node backend, then pass it to our React frontend to be used with the AdvancedImage react component.

It's a similar as this one from the legacy React package:
cloudinary/cloudinary-react#242

Ideally it would look something like this:

  <AdvancedImage cldImg={img} plugins={[responsive(), accessibility()]} token={token} />

Parallel lazyload() seems to cause drops in performances

Hi, on my builds I have noticed that when multiple images are requested in parallel, there are pretty significant drops in performances.

In my case, this is most noticeable with the scroll jamming for a second. Especially if there are more than 3-4 images at the same Y position (gallery, marquee's, ...)

I believe this could be fixed by adding new options in the Cloudinary configs.

Possible solution

Options:

lazyMode: parallel, sequential, hybrid
parallelLimit (amount of parallel requests allowed before chunking next sequential)
sequentialDelay (delay between each sequence)
...

This is just a theory, please share your thoughts and inputs on this.

Allow adding custom class to video tag

Is it possible to allow the option to add class names to the video tag? I want to make the video full width and I want to pass the class which makes the video full screen.

maybe <AdvancedVideo className="min-w-full" ... >

Errors building React app with @cloudinary/url-gen (eg: "export 'RoundCorners' (imported as 'RoundCorners') was not found in '@cloudinary/url-gen/actions/roundCorners' (module has no exports)")

We have build failures for our React app with these kinds of errors below since yesterday (Aug 15)

Using "@cloudinary/url-gen": "^1.8.0",, and clean installed already, and we are not aware of any change on our side in the relevant code.

Do you have any tip on how to fix it? Thanks in advance!

[1] ERROR in ./src/common/integration/cloudinary/AvatarImage.js 45:106-122
[1] export 'RoundCorners' (imported as 'RoundCorners') was not found in '@cloudinary/url-gen/actions/roundCorners' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 2:0-45
[1] export 'Border' (reexported as 'Border') was not found in './actions/border.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 3:0-57
[1] export 'RoundCorners' (reexported as 'RoundCorners') was not found in './actions/roundCorners.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 4:0-45
[1] export 'Effect' (reexported as 'Effect') was not found in './actions/effect.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 5:0-45
[1] export 'Rotate' (reexported as 'Rotate') was not found in './actions/rotate.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 6:0-45
[1] export 'Adjust' (reexported as 'Adjust') was not found in './actions/adjust.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 8:0-49
[1] export 'Underlay' (reexported as 'Underlay') was not found in './actions/underlay.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 9:0-71
[1] export 'NamedTransformation' (reexported as 'NamedTransformation') was not found in './actions/namedTransformation.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 10:0-49
[1] export 'Delivery' (reexported as 'Delivery') was not found in './actions/delivery.js' (module has no exports)
[1] 
ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 11:0-61
[1] export 'CustomFunction' (reexported as 'CustomFunction') was not found in './actions/customFunction.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 12:0-51
[1] export 'VideoEdit' (reexported as 'VideoEdit') was not found in './actions/videoEdit.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 13:0-51
[1] export 'Transcode' (reexported as 'Transcode') was not found in './actions/transcode.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 14:0-49
[1] export 'PSDTools' (reexported as 'PSDTools') was not found in './actions/psdTools.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions.js 15:0-49
[1] export 'Animated' (reexported as 'Animated') was not found in './actions/animated.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/adjust.js 1:0-75
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/adjust.js 2:0-326
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/adjust.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/animated.js 1:0-77
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/animated.js 2:0-98
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/animated.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/border.js 1:0-75
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/border.js 2:0-95
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/border.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/customFunction.js 1:0-112
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/customFunction.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/delivery.js 1:0-162
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/delivery.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/effect.js 1:0-446
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/effect.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/namedTransformation.js 1:0-114
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/namedTransformation.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/psdTools.js 1:0-115
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/psdTools.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/rotate.js 1:0-97
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/rotate.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/roundCorners.js 1:0-109
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/roundCorners.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/transcode.js 1:0-200
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/transcode.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/underlay.js 1:0-94
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/underlay.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/actions/videoEdit.js 1:0-124
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/videoEdit.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/actions'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/assets/CloudinaryImage.js 5:0-115
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/transformation/ImageTransformation.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/assets'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/assets/CloudinaryTransformable.js 6:0-119
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/actions/delivery/DeliveryFormatAction.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/assets'
[1] 
ERROR in ../../../node_modules/@cloudinary/url-gen/backwards/generateTransformationString.js 15:0-52
[1] Module not found: Error: Can't resolve './utils/isNumberLike' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/backwards'
[1] Did you mean 'isNumberLike.js'?
[1] BREAKING CHANGE: The request './utils/isNumberLike' failed to resolve only because it was resolved as fully specified
[1] (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
[1] The extension in the request is mandatory for it to be fully specified.
[1] Add the extension to the request.
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers.js 20:0-46
[1] export 'Color' (reexported as 'Color') was not found in './qualifiers/color.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers.js 21:0-56
[1] export 'Background' (reexported as 'Background') was not found in './qualifiers/background.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers.js 22:0-64
[1] export 'AudioFrequency' (reexported as 'AudioFrequency') was not found in './qualifiers/audioFrequency.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers.js 23:0-56
[1] export 'AudioCodec' (reexported as 'AudioCodec') was not found in './qualifiers/audioCodec.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers.js 24:0-58
[1] export 'AspectRatio' (reexported as 'AspectRatio') was not found in './qualifiers/aspectRatio.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers.js 25:0-64
[1] export 'ArtisticFilter' (reexported as 'ArtisticFilter') was not found in './qualifiers/artisticFilter.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers.js 26:0-64
[1] export 'AnimatedFormat' (reexported as 'AnimatedFormat') was not found in './qualifiers/animatedFormat.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers.js 28:0-70
[1] export 'ChromaSubSampling' (reexported as 'ChromaSubSampling') was not found in './qualifiers/chromaSubSampling.js' (module has no exports)
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers/animatedFormat.js 1:0-123
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/qualifiers/animatedFormat.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/qualifiers'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers/artisticFilter.js 1:0-284
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/qualifiers/artisticFilter.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/qualifiers'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers/aspectRatio.js 1:0-164
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/qualifiers/aspectRatio.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/qualifiers'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers/audioCodec.js 1:0-123
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/qualifiers/audioCodec.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/qualifiers'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers/audioFrequency.js 1:0-266
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/qualifiers/audioFrequency.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/qualifiers'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers/background.js 1:0-173
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/qualifiers/background.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/qualifiers'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers/chromaSubSampling.js 1:0-129
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/qualifiers/chromaSubSampling.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/qualifiers'
[1] 
[1] ERROR in ../../../node_modules/@cloudinary/url-gen/qualifiers/color.js 1:0-83
[1] Module not found: Error: Can't resolve '@cloudinary/transformation-builder-sdk/qualifiers/color.js' in '/Users/martin-work/dev/ws/web-apps/node_modules/@cloudinary/url-gen/qualifiers'

Problem with react import

Hello,
I have an error this is my code :

import React from "react";

import {accessibility, AdvancedImage, responsive} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/url-gen";
console.log(React)

interface Props {
  id: string;
}

const { cloudinary: { cloudName } } = JSON.parse(process.env.clientSettings);
//
// let cloudConfig = new CloudConfig({ cloudName });
// let urlConfig = new URLConfig({});
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
});

//dee
export default function() {
  // const img = new CloudinaryImage(id, cloudConfig, urlConfig);
  const myImage = cld.image('sample');
  // console.log('img', myImage)
  // return <p>de</p>
  return <div><AdvancedImage cldImg={myImage} plugins={[responsive(), accessibility()]} /></div>;
}

I have an error Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') _inheritsLoose
_inheritsLoose is called here (I shortened it for clarity) :

var AdvancedImage = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(AdvancedImage, _React$Component);
  [...]
}(React__default['default'].Component);

The problem seems to lie here :

var React = require('react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React)

But React is undefined
This issue is fixed if I download this package and import frontend-frameworks/frameworks/react/src/index I think it is because of my bundle system (webpack) but I'm not sure why ?

Could you directly export the src folder ?

[responsive()]: Step is not taken into account

Hi, I'm using the React SDK and the responsive() plugin doesn't seem to work properly for me.

Basically, regardless of the value I input in the plugin (ex: 400, [400, 800, 1200]), the scale that is fetched always matches the parent element.

So I get weird scales like 512, 647, ...

What I would expect

If the step is set to 400, the only scales that can be fetched would be 400, 800, 1200, 1600, ...
On retina, if the container width is 400, the image fetched should be 800
Images set to object-fit: cover, should still look good. (The aspect ratio of the image should also be taken into account when comparing to the container)

The SDK V1 was more complete regarding the responsive behaviors.

Alternatives

Add a sizes prop (setting it would opt-out of the container width; based responsive)

cannot use dpr(auto()) in React component (React SDK)

For which package is this issue?
React

Describe the issue in a sentence or two.
Hi, trying to upgrade cloudinary-react to use the updated frontend framework and having some trouble implementing image 'dpr'.

I have a custom reusable react "image" component that utilizes AdvancedImage, and I imported 'dpr' from cloudinary delivery folder. The custom image component has a 'imageDPR' prop and takes in a string, I have a function that calls dpr(auto()) or dpr(imageDPR input) on the cloudinary instance. Then passing that instance to AdvancedImage.

I'm getting an error that 'auto' is not defined.

I imported 'dpr' from the delivery folder, is there somewhere else I should import from?

Any help is appreciated... thank you.

Issue Type (Can be multiple)
[ ] Build - Can’t install or import the SDK
[ ] Performance - Performance issues
[x] Behaviour - Functions aren’t working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[x] Other (Specify)
import {dpr} from "@cloudinary/url-gen/actions/delivery"; and using dpr(auto()) is returning an error

related cloudinary imports:

import { AdvancedImage, responsive, placeholder } from '@cloudinary/react'
import { Cloudinary } from '@cloudinary/url-gen';
import {dpr} from "@cloudinary/url-gen/actions/delivery";

function in component showing "auto" is not defined:

// imageDPR prop value is 'defaultAuto' and the below function returns error that auto is not defined...
function setImageDPR(imageDPR) {
    switch (imageDPR) {
      case 'defaultAuto':
        return dpr(auto()); 
      case imageDPR.length:
        return dpr(imageDPR.toString());
      default:
        return '';
    }
  }

Versions and Libraries (fill in the version numbers)
Node - v16.16.0
NPM - 8.11.0

Config Files (Please paste the following files if possible)
"@cloudinary/react": "^1.4.1",
"@cloudinary/url-gen": "^1.8.0",

Argument of type 'string' is not assignable to parameter of type 'CompassQualifier'.ts(2345)

For which package is this issue?

@cloudinary/url-gen

Describe the issue in a sentence or two

Typescript throwing error on compass("south_east").

Issue Type (Can be multiple)

Steps to reproduce

Try default demo
https://cloudinary.com/documentation/react_integration#full_example

  myImage
    .resize(thumbnail().width(150).height(150).gravity(focusOn(FocusOn.face()))) // Crop the image.
    .roundCorners(byRadius(20)) // Round the corners.
    .effect(sepia()) // Apply a sepia effect.
    .overlay(
      // Overlay the Cloudinary logo.
      source(
        image("cloudinary_icon_blue").transformation(
          new Transformation()
            .resize(scale(50)) // Resize the logo.
            .adjust(opacity(60)) // Adjust the opacity of the logo.
            .adjust(brightness(200))
        ) // Adjust the brightness of the logo.
      ).position(
        new Position().gravity(
          compass("south_east")
          ).offsetX(5).offsetY(5)
      ) // Position the logo.
    )
    .rotate(byAngle(10)) // Rotate the result.
    .format("png"); // Deliver as PNG. */

Error screenshots

Browsers (if issue relates to UI, else ignore)

[ ] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[ ] All

Versions and Libraries (fill in the version numbers)

package SDK version
Node - v16.13.0
NPM - 8.1.0

Config Files (Please paste the following files if possible)

package.json

{
  "private": true,
  "name": "remix-app-template",
  "description": "",
  "license": "",
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
    "postinstall": "remix setup node"
  },
  "dependencies": {
    "@cloudinary/react": "^1.0.1",
    "@cloudinary/url-gen": "^1.5.1",
    "@headlessui/react": "^1.4.3",
    "@heroicons/react": "^1.0.5",
    "@remix-run/react": "^1.1.3",
    "@remix-run/serve": "^1.1.3",
    "@remix-run/vercel": "^1.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remix": "^1.1.3"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.1.3",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "autoprefixer": "^10.4.2",
    "concurrently": "^7.0.0",
    "postcss": "^8.4.6",
    "prettier": "2.5.1",
    "tailwindcss": "^3.0.22",
    "typescript": "^4.1.2"
  },
  "engines": {
    "node": ">=14"
  },
  "sideEffects": false
}

Repository

https://github.com/CodingCatDev/divvy-screen-size/tree/cloudinary-type-issue

Cannot enable prod mode after platform setup

Began evaluating the new Cloudinary Angular v2. I'm getting this error on my first try.

What could be wrong?

Here are my settings:

this.cld = new Cloudinary({
        cloud: {
          cloudName: environment.cloudinaryCloudName
        },
        url: {
          secure: true
        }
      });

Where cloudinaryCloudName is set to 'traveliko'.

Seeing this in your code:
/**

Enables production mode. Added to remove
ng reflects from dom.
*/

(0,_angular_core__WEBPACK_IMPORTED_MODULE_6__.enableProdMode)();
class CloudinaryModule {
}
CloudinaryModule.ɵfac = function CloudinaryModule_Factory(t) { return new (t || CloudinaryModule)(); };
CloudinaryModule.ɵmod = /*@__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_6__["ɵɵdefineNgModule"]({ type: CloudinaryModule });
CloudinaryModule.ɵinj = /*@__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_6__["ɵɵdefineInjector"]({ imports: [[]] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && _angular_core__WEBPACK_IMPORTED_MODULE_6__["ɵsetClassMetadata"](CloudinaryModule, [{
        type: _angular_core__WEBPACK_IMPORTED_MODULE_6__.NgModule,
        args: [{
                imports: [],
                declarations: [CloudinaryImageComponent, CloudinaryVideoComponent],
                exports: [CloudinaryImageComponent, CloudinaryVideoComponent]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && _angular_core__WEBPACK_IMPORTED_MODULE_6__["ɵɵsetNgModuleScope"](CloudinaryModule, { declarations: [CloudinaryImageComponent, CloudinaryVideoComponent], exports: [CloudinaryImageComponent, CloudinaryVideoComponent] }); })();

Vue 3 Support

For which package is this issue?

@cloudinary/vue3

Describe the issue in a sentence or two.

I see that there's a Vue 3 package in this repo but it appears to not be published. Is there a timeline for when we should be able to use Vue 3 components?