diff --git a/docs/pages/cldimage/configuration.mdx b/docs/pages/cldimage/configuration.mdx index 229c2a01..e90e1c76 100644 --- a/docs/pages/cldimage/configuration.mdx +++ b/docs/pages/cldimage/configuration.mdx @@ -1382,6 +1382,13 @@ underlays={[{ } ]} data={[ + { + prop: 'assetType', + type: 'string', + default: () => (image), + example: () => (video), + more: () => (More Info) + }, { 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. diff --git a/docs/pages/cldimage/examples.mdx b/docs/pages/cldimage/examples.mdx index 8539ba52..24e04082 100644 --- a/docs/pages/cldimage/examples.mdx +++ b/docs/pages/cldimage/examples.mdx @@ -990,6 +990,40 @@ Text overlays allow you to place text on top of an image. ``` +## 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. + + + + + + + ```jsx copy showLineNumbers + import { CldImage } from 'next-cloudinary'; + + + ``` + + ## More Examples Find more examples on [Social Card Templates](/templates/social-media-cards). \ No newline at end of file diff --git a/next-cloudinary/src/components/CldImage/CldImage.tsx b/next-cloudinary/src/components/CldImage/CldImage.tsx index 02352593..c88e6088 100644 --- a/next-cloudinary/src/components/CldImage/CldImage.tsx +++ b/next-cloudinary/src/components/CldImage/CldImage.tsx @@ -22,7 +22,8 @@ const CldImage = forwardRef(function CldImage(p const CLD_OPTIONS = [ 'deliveryType', 'preserveTransformations', - 'strictTransformations' + 'strictTransformations', + 'assetType', ]; transformationPlugins.forEach(({ props = [] }) => {