Consider "ar" param, and improve sensible defaults when no imgixParam…

…s is specified
datocms · Mar 25, 2021 · 55b1d0f · 55b1d0f
1 parent 1518ded
commit 55b1d0f
Show file tree

Hide file tree

Showing 7 changed files with 324 additions and 103 deletions.
diff --git a/src/hooks/sourceNodes/createTypes/utils/buildGatsbyImageDataFields.js b/src/hooks/sourceNodes/createTypes/utils/buildGatsbyImageDataFields.js
@@ -61,24 +61,38 @@ module.exports = ({ cacheDir }) => {
  return null;
  }
 
- if (props.width) {
- imgixParams.w = props.width;
+ let finalSize = getSizeAfterTransformations(image.width, image.height, imgixParams);
+
+ // props.width and props.height
+ // * For a fixed layout, these define the size of the image displayed on screen.
+ // * For a constrained image, these define the maximum size, as the image will scale down to fit smaller containers if needed.
+ // * For a full width layout, these are ignored
+ //
+ // If the imgixParams do not specify how/if the image should be resized,
+ // than we apply some sensible defaults using props.image and props.height
+ // otherwise, imgixParams decide the width/height of the source image,
+ // and props.width/props.height only determine how big the <img /> will
+ // be presented to the final user
+
+ if (finalSize.height === image.height && finalSize.width == image.width) {
+ if (props.layout === 'FIXED' && props.width && props.height) {
+ // we give the source image the requested aspect ratio
+ imgixParams.ar = `${props.width}:${props.height}`;
+ imgixParams.fit = 'crop';
+ finalSize = getSizeAfterTransformations(image.width, image.height, imgixParams)
+ } else if (props.layout === 'CONSTRAINED' && (props.width || props.height)) {
+ // we give the source image the requested width/height as their maximum value
+ if (props.w) {
+ imgixParams.w = props.width;
+ }
+ if (props.h) {
+ imgixParams.h = props.height;
+ }
+ imgixParams.fit = 'max';
+ finalSize = getSizeAfterTransformations(image.width, image.height, imgixParams)
+ }
  }
 
- if (props.height) {
- imgixParams.h = props.height;
- }
-
- if (props.width && props.height && !imgixParams.fit) {
- imgixParams.fit = 'crop';
- }
-
- const finalSize = getSizeAfterTransformations(
- image.width,
- image.height,
- imgixParams,
- );
-
  const sourceMetadata = {
  width: finalSize.width,
  height: finalSize.height,

diff --git a/src/hooks/sourceNodes/createTypes/utils/getSizeAfterTransformations.js b/src/hooks/sourceNodes/createTypes/utils/getSizeAfterTransformations.js
@@ -16,31 +16,62 @@ module.exports = function getSizeAfterTransformations(
  }
 
  if (
- ['facearea', 'clamp', 'crop', 'fill', 'fillmax', 'scale'].includes(
- params.fit,
- ) &&
+ ['facearea', 'clamp', 'fill', 'fillmax', 'scale'].includes(params.fit) &&
  params.w &&
  params.h
  ) {
  width = parseInt(params.w);
  height = parseInt(params.h);
 
- if (params.fit === 'crop') {
- if (params['max-h']) {
- height = Math.min(height, parseInt(params['max-h']));
- }
+ return { width, height };
+ }
 
-  if (params['max-w']) {
-  width = Math.min(width, parseInt(params['max-w']));
-  }
+ if (params.fit === 'crop' && ((params.w && params.h) || params.ar)) {
+ let width = null;
+ let height = null;
 
- if (params['min-h']) {
- height = Math.max(height, parseInt(params['min-h']));
- }
+ const w = params.w && parseInt(params.w);
+ const h = params.h && parseInt(params.h);
+
+ if (params.ar) {
+ const [arW, arH] = params.ar.split(':');
+ const aspectRatio = parseFloat(arW) / (arH ? parseInt(arH) : 1);
+
+ const originalAr = originalWidth / originalHeight;
+
+ const aspectRatioSize =
+ aspectRatio > originalAr
+ ? [originalWidth, originalWidth / aspectRatio]
+ : [originalHeight * aspectRatio, originalHeight];
 
- if (params['min-w']) {
- width = Math.max(width, parseInt(params['min-w']));
+ if (w) {
+ width = w;
+ height = h / aspectRatio;
+ } else if (h) {
+ height = h;
+ width = h * aspectRatio;
+ } else {
+ [width, height] = aspectRatioSize;
  }
+ } else {
+ width = w;
+ height = h;
+ }
+
+ if (params['max-h']) {
+ height = Math.min(height, parseInt(params['max-h']));
+ }
+
+ if (params['max-w']) {
+ width = Math.min(width, parseInt(params['max-w']));
+ }
+
+ if (params['min-h']) {
+ height = Math.max(height, parseInt(params['min-h']));
+ }
+
+ if (params['min-w']) {
+ width = Math.max(width, parseInt(params['min-w']));
  }
 
  return { width, height };

diff --git a/test/fixtures/graphql-responses/multilingual/csv-asset.json b/test/fixtures/graphql-responses/multilingual/csv-asset.json
@@ -27,7 +27,9 @@
  "newFixed": null,
  "newFluidW": null,
  "newFluidH": null,
- "newFluidWH": null
+ "newFluidWH": null,
+ "newFixedSmallerThanOriginal": null,
+ "newFluidWSmallerThanOriginal": null
  }
  }
 }