Thumbnail prop for `PrismicNextImage`

[DiemasMichiels]

Hi!

I wanted to make a PR out of the blue, but let's first throw the feature on the table ┬─┬ノ( º _ ºノ)

Is your feature request related to a problem? Please describe.

Currently, the PrismicNextImage component expects you to choose your desired image size when initiating the component.

Ex <PrismicNextImage field={slice.primary.image} fallbackAlt='some fallback alt' />

When selecting a thumbnail, as it is called by Prismic, makes it possible to duplicate the component and select the required image size.

Ex <PrismicNextImage field={slice.primary.image['small']} fallbackAlt='some fallback alt' />

This can be ok in some use cases.
There is also a weird syntax where you wouldn't really expect it. Why is the first example without any specification and the second with? What does happen with the first example? Which image is selected? … (questions are rhetorical).

In my case, I use the image not as a thumbnail but as a better optimized size. Which means I have a few thumbnail options: main, small, large, …

With the current setup, this would be my code, which makes a long if statement of which to select.

Ex

<PrismicNextImage
    field={
      size >= 900
        ? slice.primary.image['large']
          : size <= 400
            ? slice.primary.image['small']
            : slice.primary.image
    }
    fallbackAlt='some fallback alt'
/>

Describe the solution you'd like

I would prefer there to be an extra prop added to the PrismicNextImage like thumbnail. This doesn't break anything and just gives extra functionality to the component where you can provide the thumbnail separately. The other functionality can perfectly still work.

Ex

<PrismicNextImage
    field={slice.primary.image}
    thumbnail={size >= 900 ? 'large' : size <= 400 ? 'small' : undefined}
    fallbackAlt='some fallback alt'
/>

Also look at this, how clean. The weird syntax is also kind of resolved because you specify undefined as a thumbnail, so you don't want a thumbnail image selected. Although I would change the name of thumbnail to something more clear, in slice machine it is called responsive views. I currently can't think of something good.

Additional context

In CONTRIBUTING.md the branch name is still called master. ;)

Now let's flip the table and hope it lands somewhere in a future release! (╯°□°)╯︵ ┻━┻ Thanks!

• Diemas