Version Packages (beta)

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

main is currently in pre mode so this branch has prereleases rather than normal releases. If you want to exit prereleases, run changeset pre exit on main.

⚠️⚠️⚠️⚠️⚠️⚠️

Releases

@responsive-image/[email protected]

Major Changes

• #614 2d10626 Thanks @simonihmig! - Use Record-based API for cloudinary transformations

  Instead of passing cloudinary transformations as a string according to the Cloudinary Transformation URL API, you need to pass them as an object. If you want to use chained transformations, pass an array of objects.

  // using @resposive-image/cdn
  const simpleTransformation = cloudinaryProvider('foo/bar.jpg', {
    transformations: { co: 'rgb:20a020', e: 'colorize:50' },
  });
  
  const chainedTransformation = cloudinaryProvider('foo/bar.jpg', {
    transformations: [
      { co: 'rgb:20a020', e: 'colorize:50' },
      { ar: '1.0', c: 'fill', w: '150' },
      { r: 'max' },
    ],
  });

  {{!-- using @responsive-image/ember }}
  <ResponsiveImage
    @src={{responsiveImageCloudinaryProvider
      "foo/bar.jpg"
      transformations=(hash co="rgb:20a020" e="colorize:50")
    }}
  >

@responsive-image/[email protected]

Major Changes

• #614 2d10626 Thanks @simonihmig! - Use Record-based API for cloudinary transformations

  Instead of passing cloudinary transformations as a string according to the Cloudinary Transformation URL API, you need to pass them as an object. If you want to use chained transformations, pass an array of objects.

  // using @resposive-image/cdn
  const simpleTransformation = cloudinaryProvider('foo/bar.jpg', {
    transformations: { co: 'rgb:20a020', e: 'colorize:50' },
  });
  
  const chainedTransformation = cloudinaryProvider('foo/bar.jpg', {
    transformations: [
      { co: 'rgb:20a020', e: 'colorize:50' },
      { ar: '1.0', c: 'fill', w: '150' },
      { r: 'max' },
    ],
  });

  {{!-- using @responsive-image/ember }}
  <ResponsiveImage
    @src={{responsiveImageCloudinaryProvider
      "foo/bar.jpg"
      transformations=(hash co="rgb:20a020" e="colorize:50")
    }}
  >

Patch Changes

• #646 9661f86 Thanks @simonihmig! - Remove use of @ember/render-modifiers

• Updated dependencies [2d10626]:

  • @responsive-image/[email protected]

@responsive-image/[email protected]

Major Changes

• #608 a3f94f2 Thanks @simonihmig! - Use imagetools for more image processing options

  @responsive-image/webpack is now using the imagetools-core package for image processing via sharp. This now supports not only scaling to different sizes and generating different image formats as before, but also a lot of other directives for image manipulation.

  Breaking Changes: Some parameters passed to the loader as defaults directly or using as query parameters in imports had to change to align with that library:

  • widths has been renamed to w
  • formats to format
  • the separator for array vlues has been changed to ; instead of ,

  Example: import image from './path/to/image.jpg?w=400;800&responsive';

@responsive-image/[email protected]

Minor Changes

• #640 49b242d Thanks @simonihmig! - Support serve mode in vite-plugin

• #619 cb2e67f Thanks @simonihmig! - Introduce new @responsive/vite-plugin with basic Vite loader

• #642 7ca5b5c Thanks @simonihmig! - Add LQIP support to vite-plugin