Additional options for Responsive Sizes prop

[smerchek]

While using Responsive Sizes, I've run into some snags that make things tedious to set up for my use-case.

Perhaps some of this would be solved by getting close to the next/image impl - #9

1. I only want to specify a height. A lot of times, I won't know the width of an element because that is dynamic but I will limit the height of the images. To get around the limitation of width being required, I have to manually calculate what the width should be, based on the height I desire. Is there a reason we can't provide height and allow the width to be derived?

Example with only-height support.

responsive={[
  { size: { height: 192 }, maxWidth: 639 },
  { size: { height: 288 }, maxWidth: 767 },
  { size: { height: 320 }, maxWidth: 1023 },
  { size: { height: 384 } },
]}

2. I have previously though of media queries in terms of min-width to match things like the tailwind breakpoints. I would prefer to say "use this image", "use this image for large screens", and finally "use this other image for extra large screens". I can still accomplish this with

Example with minWidth support.

responsive={[
  { size: { .. } },
  { size: { .. }, minWidth: 640 },
  { size: { .. }, minWidth: 768 },
  { size: { .. }, minWidth: 1024 },
]}

[Josh-McFarlin]

Hi Scott,

Apologies for the late response. I think specifying height is definitely something that can be added to this package. Also, since min-width is a media query, it can likely be used too. I have only tried using response images with max-width for the sizes attribute, but it would be nice to add support for other media queries.

In the meantime, I just found a fork of Remix-Image on npm that looks like it may support specifying image height. I have not tested it myself, but feel free to try. Hopefully, we can add height and additional media query support to this package soon! Here is the npm link, with the relevant changes being shown on the GitHub fork here.

If you would like to test additional media queries, try following the steps below, and let me know the results!

1. Create your own useResponsiveImage hook (based on https://github.com/Josh-McFarlin/remix-image/blob/master/src/hooks/responsiveImage.ts)

You will need to modify the hook to use a ResponsiveSize type of something along the following:

export type ResponsiveSize = {
  size: {
    width: number;
    height?: number;
  };
  maxWidth?: number;
  minWidth?: number;
};

Then you will need to allow this new media query to be used in the generated sizes

remix-image/src/hooks/responsiveImage.ts

Line 44 in 5015ec2

? `(max-width: ${resp.maxWidth}px) ${resp.size.width}px`

const sizes = [...responsive]
    .sort((resp1, resp2) => resp1.size.width - resp2.size.width)
    .map((resp) =>
      resp.maxWidth
        ? `(max-width: ${resp.maxWidth}px) ${resp.size.width}px`   //  <------ come up with new code to allow max-width or min-width
        : `${resp.size.width}px`
    );

3. Create your own Image component that uses your custom hook (based on https://github.com/Josh-McFarlin/remix-image/blob/master/src/components/Image/Image.tsx)