Thumbnail prop for `PrismicNextImage`

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.

<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.

<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

This issue has been labeled as a feature request since it was created using the 🙋‍♀️ Feature Request Template.

Hi there, thank you so much for your request!

Following our Maintenance Process, we will review your request and get back to you soon. If we decide to implement it, will proceed to implement the feature during the last week of the month. In the meantime, feel free to provide any details to help us better understand your request, such as:

The context that made you think of this feature request
As many details about the solution you'd like to see implemented, how it should behave, etc.
Any alternative solution you have considered

If you think you can implement the proposed change yourself, you're more than welcome to open a pull request implementing the new feature. Check out our quick start guide for a simple contribution process. Please note that submitting a pull request does not guarantee the feature will be merged.

- The Prismic Open-Source Team

prismicio / prismic-next