angeloashmore commented 2 years ago

Types of changes

[ ] Chore (a non-breaking change which is related to package maintenance)
[x] Bug fix (a non-breaking change which fixes an issue)
[ ] New feature (a non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

This PR adds support for width and height props in <PrismicNextImage> when the layout prop is intrinsic or fixed.

When using the intrinsic or fixed layout, the width and height props define the size of the rendered image. If no width or height are given, the image's source dimensions are used.

When using responsive or fill, the width and height props define the source image's dimensions. The provided Image field already contains this information, thus the width and height props are not allowed in this situation.

Examples

Default layout (intrinsic)

// The height is derived from the image's aspect ratio.
<PrismicNextImage field={myImageField} width="400" />

// The width is derived from the image's aspect ratio.
<PrismicNextImage field={myImageField} height="300" />

// The width and height are explicitly defined.
<PrismicNextImage field={myImageField} width="300" height="400" />

`layout="intrinsic"`

// The height is derived from the image's aspect ratio.
<PrismicNextImage field={myImageField} width="400" layout="intrinsic" />

// The width is derived from the image's aspect ratio.
<PrismicNextImage field={myImageField} height="300" layout="intrinsic"/>

// The width and height are explicitly defined.
<PrismicNextImage field={myImageField} width="300" height="400" layout="intrinsic" />

`layout="fixed"`

// The height is derived from the image's aspect ratio.
<PrismicNextImage field={myImageField} width="400" layout="fixed" />

// The width is derived from the image's aspect ratio.
<PrismicNextImage field={myImageField} height="300" layout="fixed"/>

// The width and height are explicitly defined.
<PrismicNextImage field={myImageField} width="300" height="400" layout="fixed" />

`layout="responsive"`

// The dimensions are derived from the image's metadata.
// `width` and `height` are not allowed.
<PrismicNextImage field={myImageField} layout="responsive" />

`layout="fill"`

// The dimensions are derived from the image's metadata.
// `width` and `height` are not allowed.
<PrismicNextImage field={myImageField} layout="fill" />

Checklist:

[x] My change requires an update to the official documentation.
[x] All TSDoc comments are up-to-date and new ones have been added where necessary.
[x] All new and existing tests are passing.

🐻

github-actions[bot] commented 2 years ago

size-limit report 📦

Path	Size
./dist/index.mjs	4.22 KB (+3.11% 🔺)

codecov-commenter commented 2 years ago

Codecov Report

Merging #42 (b39e405) into main (dd2f06b) will not change coverage. The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main       #42   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           11        11           
  Lines          672       713   +41     
  Branches        33        43   +10     
=========================================
+ Hits           672       713   +41

Impacted Files	Coverage Δ
src/PrismicNextImage.tsx	`100.00% <100.00%> (ø)`

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

webda2l commented 2 years ago

It will be nice to handle the https://nextjs.org/docs/api-reference/next/future/image as well because the current image component has its days numbered now.