diff --git a/image-embeds.mdx b/image-embeds.mdx index 5220cbc08..adb2c02a2 100644 --- a/image-embeds.mdx +++ b/image-embeds.mdx @@ -1,80 +1,113 @@ --- -title: 'Images and embeds' -description: 'Add image, video, and other HTML elements' -icon: 'image' +title: "Images and embeds" +description: "Add images, videos, and iframes" +icon: "image" --- + Photograph of a scenic landscape with purple flowers in the foreground, mountains in the background, and a blue sky with scattered clouds. + -## Image +## Images -Images are the most common way to add visual content to your documentation. +Add images to provide visual context, examples, or decoration to your documentation. -### Basics +### Basic image syntax -The [markdown syntax](https://www.markdownguide.org/basic-syntax/#images) lets you add images using the following code +Use [Markdown syntax](https://www.markdownguide.org/basic-syntax/#images) to add images to your documentation: ```mdx -![title](/path/image.jpg) +![Alt text describing the image](/path/to/image.png) ``` + -To make sure images are displayed correctly in production, add a forward slash to the image path (e.g. `/path/image.jpg`). + Always include descriptive alt text to improve accessibility and SEO. The alt text should clearly describe what the image shows. -Note that the image file size must be less than 20MB. Otherwise, we recommend hosting on a CDN provider like [S3](https://aws.amazon.com/s3), [Cloudinary](https://cloudinary.com) or a similar service. +Image files must be less than 20MB. For larger files, host them on a CDN service like [Amazon S3](https://aws.amazon.com/s3) or [Cloudinary](https://cloudinary.com). -### Embeds +### HTML image embeds -To get more customizability with images, you can also use embeds to add images. +For more control over image display, use HTML `` tags: ```html - +Main dashboard interface ``` -### Disable Image Zoom +#### Disable zoom functionality -To disable the default zoom on click for images, add the `noZoom` property to image embeds. +To disable the default zoom on click for images, add the `noZoom` property: -```html - +```html highlight="4" +Descriptive alt text ``` -### Linking Images +#### Link images -To link an image, for example to create a button on your docs, encompass the image in a link with the `noZoom` property. Images in `a` tags will automatically have a pointer cursor. +To make an image a clickable link, wrap the image in an anchor tag and add the `noZoom` property: ```html - + Mintlify logo ``` -### Dark Mode + + Images within anchor tags automatically display a pointer cursor to indicate they are clickable. + + +#### Light and dark mode images -To use separate images for light and dark mode, use Tailwind CSS to hide and show images. +To display different images for light and dark themes, use Tailwind CSS classes: ```html - - + +Light mode interface + + +Dark mode interface ``` -### Related +## Videos + +Mintlify supports [HTML tags in Markdown](https://www.markdownguide.org/basic-syntax/#html), giving you flexibility to create rich content. -For more information, we recommend the following sections: + + Always include fallback text content within video elements for browsers that don't support video playback. + - - Read the reference for the Frame component - +### YouTube embeds -## Videos +Embed YouTube videos using iframe elements: +```html +``` -
- - - -Mintlify supports [HTML tags in Markdown](https://www.markdownguide.org/basic-syntax/#html). This is helpful if you prefer HTML tags to Markdown syntax, and lets you create documentation with infinite flexibility. - - - -For YouTube videos use: - -```html + -``` + -For other videos, use: +### Self-hosted videos + +Use the HTML `