Crop not working for fluid gatsby-image

iljapanic commented 5 years ago

Description of the issue: Fluid images queried via grapqhl are not being cropped when both maxWidth and maxHeight are defined.

Relevant snippet:

fluid(maxWidth: 450, maxHeight: 500, imgixParams: { fm: "jpg", auto: "compress" }) {
    ...GatsbyDatoCmsFluid
}

(I've tried messing with imgix parameters as well to no avail.)

Issue preview:

The issue only affects images from the datocms source plugin. If you look at the Instagram images on the bottom of the front page you can see cropping is working (I have tested non-square ratios to check)

Cropping was working fine when I was using version 2.0.2 of the plugin and only showed up when I have upgraded to the latest version.

Environment:

node 10.15.3
gatsby 2.7.5
gatsby-source-datocms 2.1.5

iljapanic commented 5 years ago

I have just tried with 2.0.2 and it works as expected. Also oddly enough, the order of arrays got reversed as well (to the order that is shown in Dato CMS).

matjack1 commented 5 years ago

Hey @iljapanic sorry for the delay here :(

If you pass maxWidth it will ignore the maxHeight, but I can reproduce that maxHeight gets ignored.

Also, since it's a fluid image, wouldn't make sense to ignore one or the other?

stefanoverna commented 5 years ago

@matjack1 we'll check if maxHeight gets ignored. @iljapanic I'm sorry but I'm not sure I understand, can you elaborate? What's the value of the srcset for both 2.0.2 and 2.1.5?

iljapanic commented 5 years ago

@matjack1 If I understand correctly, fluid images are meant to serve different sizes based on the size of the screen, but I should still be able to use queries to crop the source images?

@stefanoverna

A preview of the site using 2.0.2 (images not skewed)

A preview of the site using 2.1.11 (images skewed)

The only difference between the sites is the version of `gatsby-source-datocms``, every single line of code it otherwise identical.

`srcset` snippets:

2.0.2

<img sizes="(max-width: 450px) 100vw, 450px" srcset="https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress&amp;fit=crop&amp;fm=jpg&amp;h=126&amp;w=113 113w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress&amp;fit=crop&amp;fm=jpg&amp;h=250&amp;w=225 225w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress&amp;fit=crop&amp;fm=jpg&amp;h=500&amp;w=450 450w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress&amp;fit=crop&amp;fm=jpg&amp;h=750&amp;w=675 675w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress&amp;fit=crop&amp;fm=jpg&amp;h=1000&amp;w=900 900w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress&amp;fit=crop&amp;fm=jpg&amp;h=1500&amp;w=1350 1350w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress&amp;fit=crop&amp;fm=jpg&amp;h=500&amp;w=450 450w" src="https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress&amp;fm=jpg&amp;h=500&amp;w=450" alt="" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;">

2.1.11

<img sizes="(max-width: 450px) 100vw, 450px" srcset="https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress%2Cformat&amp;dpr=0.05&amp;fm=jpg&amp;w=2560 113w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress%2Cformat&amp;dpr=0.09&amp;fm=jpg&amp;w=2560 225w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress%2Cformat&amp;dpr=0.18&amp;fm=jpg&amp;w=2560 450w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress%2Cformat&amp;dpr=0.27&amp;fm=jpg&amp;w=2560 675w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress%2Cformat&amp;dpr=0.36&amp;fm=jpg&amp;w=2560 900w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress%2Cformat&amp;dpr=0.53&amp;fm=jpg&amp;w=2560 1350w,
https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress%2Cformat&amp;dpr=1&amp;fm=jpg&amp;w=2560 2560w" src="https://www.datocms-assets.com/7350/1540746566-fluorite.jpg?auto=compress%2Cformat&amp;fm=jpg" alt="" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;">

`GemstonePreview.js`

import React from 'react';
import { Link } from 'gatsby';
import Img from 'gatsby-image';

// styles
import styles from '../css/components/GemstonePreview.module.css';

const GemstonePreview = ({ gemstone }) => {
  const name = gemstone.name;
  const subtitle = gemstone.subtitle;
  const image = gemstone.featuredImage.fluid;
  const slug = gemstone.slug;

  return (
    <article className={styles.gemstone}>
      {/* image */}
      <div className={styles.image}>
        <Link to={`/kameny/${slug}`}>
          <Img fluid={image} />
        </Link>
      </div>

      {/* body */}
      <div className={styles.body}>
        <div className={styles.header}>
          <h2 className={styles.name}>{name}</h2>
          <div className={styles.subtitle}>{subtitle}</div>
        </div>
        <div className={styles.link}>
          <Link to={`/kameny/${slug}`}>Více o kameni &rarr;</Link>
        </div>
      </div>
    </article>
  );
};

export default GemstonePreview;

`GemstonePreview.module.css`

@import '../utils/variables.css';

.gemstone {
  margin-top: 3rem;
  text-align: center;
}

.subtitle {
  color: var(--shade-3);
  font-style: italic;
}

.image {
  max-width: 55%;
  margin: 0 auto;
}

.link {
  margin-top: 0.25rem;
}

.link a {
  font-weight: var(--fw-medium);
  text-decoration: none;
}

@media (--desktop) {
  .gemstone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
  }

  .gemstone:nth-last-of-type(2n) {
    text-align: right;
  }

  .gemstone:nth-last-of-type(2n) .body {
    order: -1;
    padding-right: 2rem;
    padding-left: 0;
  }

  .image {
    width: 35%;
    max-width: 100%;
  }

  .body {
    width: 65%;
    padding-left: 2rem;
  }
}

.image {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

dante-blitz commented 5 years ago

I also ran into the same issue with v2.1.11.

Setting maxWidth and MaxHeight does not crop images. I've also reverted back to v2.0.2 and images are now being cropped when maxWidth and maxHeight and specified.

matjack1 commented 5 years ago

@iljapanic @dante-blitz would this PR: https://github.com/datocms/gatsby-source-datocms/pull/70 make sense for your case?

datocms / gatsby-source-datocms