-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Remove Default 2-Stage Image Sizing (#431)
# Description
This removes the 2-stage image sizing that occurs on URLs generated via
the image component and helpers to avoid producing lower resolution
images that necessary for images with a larger original source.
Instead, this primarily provides a post-transformation resize mechanism
and a new `crop` API that provides the ability to customize how crops
are applied.
In an original example of:
```
<CldImage width height crop="fill" ... />
```
The resulting URL may look like:
```
/w_width,h_height,c_fill/transformations/w_width,c_limit/
```
This would always restrict the resulting image from being no larger than
the initial width, which is based on the desired render size, not the
original image's source size.
With the new crop API, by using:
```
<CldImage width height crop="fill" ... />
```
The resulting URL may look like:
```
transformations/w_width,h_height,c_fill/
```
And to replicate the original 2-stage effect, you can do:
```
<CldImage width height crop={{ type: 'fill', source: true }} ... />
```
Where the resulting URL may look like:
```
/w_width,h_height,c_fill/transformations/w_width,c_limit/
```
Please see the RFC for more context and reasoning:
#432
BREAKING CHANGE: Changes how cropping fundamentally works, introduces new functionality behind crop prop- Loading branch information
1 parent
2bf56c3
commit b8de6f0
Showing
36 changed files
with
7,255 additions
and
1,038 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,5 @@ | ||
| .codeBlock { | ||
| position: relative; | ||
| margin: 1.5em 0; | ||
| } | ||
|
|
||
| .codeBlockCode { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { CldImage } from '../../../next-cloudinary/dist'; | ||
| import { OG_IMAGE_WIDTH, OG_IMAGE_HEIGHT } from '../../../next-cloudinary/src/constants/sizes'; | ||
|
|
||
| const ExamplesCldOgImage = ({ ...props }) => { | ||
| return ( | ||
| <CldImage | ||
| width={OG_IMAGE_WIDTH} | ||
| height={OG_IMAGE_HEIGHT} | ||
| crop={{ | ||
| width: OG_IMAGE_WIDTH, | ||
| height: OG_IMAGE_HEIGHT, | ||
| type: 'fill', | ||
| gravity: 'center', | ||
| source: true | ||
| }} | ||
| sizes="100vw" | ||
| alt="" | ||
| {...props} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export default ExamplesCldOgImage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './ExamplesCldOgImage'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import {clsx } from "clsx" | ||
| import { twMerge } from "tailwind-merge" | ||
|
|
||
| export function cn(...inputs) { | ||
| return twMerge(clsx(inputs)) | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import Head from 'next/head'; | ||
| import { Callout, Steps, Tab, Tabs } from 'nextra-theme-docs'; | ||
|
|
||
|
|
||
| import OgImage from '../components/OgImage'; | ||
|
|
||
| import { CldImage } from '../../next-cloudinary'; | ||
| import { OG_IMAGE_WIDTH, OG_IMAGE_HEIGHT } from '../../next-cloudinary/src/constants/sizes'; | ||
|
|
||
| <Head> | ||
| <title>Installation - Next Cloudinary</title> | ||
| <meta name="og:title" content="Installing Next Cloudinary - Next Cloudinary" /> | ||
| <meta name="og:url" content={`https://next.cloudinary.dev/installation`} /> | ||
| </Head> | ||
|
|
||
| <OgImage | ||
| title="Changelog" | ||
| twitterTitle="Changelog" | ||
| /> | ||
|
|
||
| # Changelog | ||
|
|
||
| ## v6.0.0 | ||
|
|
||
| ### Overview | ||
|
|
||
| ### Changes | ||
|
|
||
| * Migrates project to pnpm ([#419](https://github.com/cloudinary-community/next-cloudinary/pull/419)) | ||
|
|
||
| **CldImage, getCldImageUrl, CldOgImage, getCldOgImageUrl** | ||
|
|
||
| <Callout emoji={false} type="warning"> | ||
| This is a fundamental change in how the API works | ||
| </Callout> | ||
|
|
||
| * Removes default 2-stage resizing to avoid low resolution images for larger source images ([#431](https://github.com/cloudinary-community/next-cloudinary/pull/431)) | ||
| * Learn more about [cropping](/cldimage/configuration#crop) | ||
| * Learn more about [responsive images](/guides/responsive-images) | ||
| * See the RFC with more details behind the change: https://github.com/cloudinary-community/next-cloudinary/discussions/432 | ||
|
|
||
| **CldImage** | ||
| * Deprecates `transformations` in favor of `namedTransformations` | ||
|
|
||
| **getCldImageUrl** | ||
| * Removes types GetCldImageUrl and GetCldOgImageUrl | ||
|
|
||
| **CldUploadWidget** | ||
| * Add Content-Type to CldUploadWidget signature endpoint ([#379](https://github.com/cloudinary-community/next-cloudinary/issues/379)) | ||
| * Deprecates some CldUploadWidget types in favor of natively defined types from [@cloudinary-util/types](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/types) | ||
| * CldUploadWidgetInfo, CldUploadWidgetPropsOptions, CldUploadWidgetResults | ||
| * Updates onError and onClose callbacks to have a consistent API with the rest of the callbacks ([#424](https://github.com/cloudinary-community/next-cloudinary/pull/424)) | ||
| * Deprecates onUpload in favor of onSuccess, matching the native Cloudinary Upload Widget API ([#424](https://github.com/cloudinary-community/next-cloudinary/pull/424)) | ||
|
|
||
| **CldVideoPlayer** | ||
| * Removes autoPlay in favor of autoplay | ||
| * Video Player: CldVideoPlayerPropsColors | ||
| * Deprecates some CldVideoPlayer types in favor of natively defined types from [@cloudinary-util/types](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/types) | ||
| * CldVideoPlayerPropsColors |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.