Import an Image or a mp4 video

To import an image or a video within a documentation page, store your image/video in the /static/images/ folder with a file path corresponding to your documentation page file path. Then use the following partial code within your content:

Image / Gifs

{{< img src="path/to/your/image" alt="Your image description" >}}

Note: Use .png format for images. Use .mp4 format for videos.

Available parameters are:

• src - [Required]: Path to your image in the static/images of the documentation repo. The image path should match your current file path in content/en/ folder
• alt - [Required]: A short description of your image that is read aloud to someone using assistive technology, but is hidden from a sighted user.
• href - [Optional]: Set an href link for the image.
• width- [Optional]: Override the width of your image, can be an absolute or relative value.
• height- [Optional]: Override the height of your image, can be an absolute or relative value.
• caption- [Optional]: An image caption is text that displays on the screen.

Replacing a cached image

If your new image needs to have the same path/filename as a cached one, you'll need to purge it from the cache. Go into the [tools section of the Imgix dashboard][https://dashboard.imgix.com/tools] and go to "Purge Single Image". Put in the non-Imgix URL of the image—for example, https://datadog-docs-staging.imgix.net/cswatt/security/images/security_monitoring/explorer/share_signal.png

Video

To import a .mp4 video on the doc page use the following partial code:

{{< img src="path/to/your/video.mp4" alt="Your image description" video="true">}}

Available parameters are:

• src - [Required]: Path to your video in the static/images of the documentation repo. The video path should match your current file path in content/en/ folder
• alt - [Required]: A short description of your image
• video - [Required]: Set it to true to enable proper video display.
• href - [Optional]: Set an href link for the image.
• width- [Optional]: Override the width of your image, can be an absolute or relative value.
• height- [Optional]: Override the height of your image, can be an absolute or relative value.