feat: Adds assetType as available CldImage configuration (#378)

# Description

Adds `assetType` to allow resource configuration for CldImage.

## Type of change

<!-- Please select all options that are applicable. -->

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Fix or improve the documentation
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [x] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [x] I have created an
[issue](#377)
ticket for this PR
- [x ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/colbyfayock/next-cloudinary/pulls) for the
same update/change?
- [x] I have performed a self-review of my own code
- [x] I have run tests locally to ensure they all pass
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes needed to the documentation

---------

Co-authored-by: Colby Fayock <[email protected]>

docs/pages/cldimage/configuration.mdx

@@ -1382,6 +1382,13 @@ underlays={[{
     }
   ]}
   data={[
+    {
+      prop: 'assetType',
+      type: 'string',
+      default: () => (<code>image</code>),
+      example: () => (<code>video</code>),
+      more: () => (<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/image_transformations#transformation_url_structure">More Info</a>)
+    },
     {
       prop: 'config',
       type: 'object',
@@ -1427,6 +1434,23 @@ underlays={[{
   ]}
 />
 
+#### `assetType`
+
+Configures the asset type for the delivered resource.
+
+This defaults to an image for the CldImage component.
+
+**Examples**
+
+Create an image thumbnail from a video asset:
+
+```jsx copy
+assetType="video"
+```
+
+[Learn more about Asset Types](https://cloudinary.com/documentation/image_transformations#transformation_url_structure) on the Cloudinary docs.
+
+
 #### `config`
 
 Allows configuration for the Cloudinary environment.

docs/pages/cldimage/examples.mdx

@@ -990,6 +990,40 @@ Text overlays allow you to place text on top of an image.
   ```
 </CodeBlock>
 
+## Misc
+
+### Video Thumbnail
+
+`assetType`: Specifies the type of asset to be delivered.
+
+This is handy when wanting to create an image thumbnail from a video, where the asset type would be "video", yet delivering an image.
+
+<HeaderImage>
+  <CldImage
+    assetType="video"
+    width="1920"
+    height="1080"
+    src={`${process.env.VIDEOS_DIRECTORY}/dog-running-snow`}
+    sizes="100vw"
+    alt=""
+  />
+</HeaderImage>
+
+<CodeBlock>
+  ```jsx copy showLineNumbers
+  import { CldImage } from 'next-cloudinary';
+
+  <CldImage
+    assetType="video"
+    width="1920"
+    height="1080"
+    src="<Your Video Public ID>"
+    sizes="100vw"
+    alt=""
+  />
+  ```
+</CodeBlock>
+
 ## More Examples
 
 Find more examples on [Social Card Templates](/templates/social-media-cards).

next-cloudinary/src/components/CldImage/CldImage.tsx

@@ -22,7 +22,8 @@ const CldImage = forwardRef<HTMLImageElement, CldImageProps>(function CldImage(p
   const CLD_OPTIONS = [
     'deliveryType',
     'preserveTransformations',
-    'strictTransformations'
+    'strictTransformations',
+    'assetType',
   ];
 
   transformationPlugins.forEach(({ props = [] }) => {