Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions create/image-embeds.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "Images and embeds"
description: "Add images, videos, and iframes"

Check warning on line 3 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L3

'iframes' should use sentence-style capitalization.
---

Add images, embed videos, and include interactive content with iframes to your documentation.
Expand All @@ -26,34 +26,45 @@
```

<Tip>
Always include descriptive alt text to improve accessibility and SEO. The alt text should clearly describe what the image shows.

Check warning on line 29 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L29

Spell out 'SEO', if it's unfamiliar to the audience.
</Tip>

Image files must be less than 20 MB. For larger files, host them on a CDN service like [Amazon S3](https://aws.amazon.com/s3) or [Cloudinary](https://cloudinary.com).

Check warning on line 32 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L32

Spell out 'CDN', if it's unfamiliar to the audience.

### HTML image embeds

Check warning on line 34 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L34

'HTML image embeds' should use sentence-style capitalization.

For more control over image display, use HTML `<img>` tags:

```html
```jsx
<img
src="/images/dashboard.png"
alt="Main dashboard interface"
height="300"
style={{height: "300px", width: "400px"}}
className="rounded-lg"
/>
```

#### Resize images with inline styles

Use JSX inline styles with the `style` attribute to resize images:

```jsx
<img
src="/images/architecture.png"
style={{width: "450px", height: "auto"}}
alt="Diagram showing the architecture of the system"
/>
```

#### Disable zoom functionality

Check warning on line 59 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L59

Use 'capability' or 'feature' instead of 'functionality'.

To disable the default zoom on click for images, add the `noZoom` property:

Check warning on line 61 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L61

Use 'turn off' or 'off' instead of 'disable'.

```html highlight="4"
<img
src="/images/screenshot.png"
alt="Descriptive alt text"
noZoom
height="200"
noZoom
/>
```

Expand All @@ -66,14 +77,13 @@
<img
src="/images/logo.png"
alt="Mintlify logo"
noZoom
height="100"
noZoom
/>
</a>
```

<Note>
Images within anchor tags automatically display a pointer cursor to indicate they are clickable.

Check warning on line 86 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L86

Use 'they're' instead of 'they are'.
</Note>

#### Light and dark mode images
Expand Down Expand Up @@ -114,7 +124,7 @@
src="https://www.youtube.com/embed/4KzFe50RQkQ"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

Check warning on line 127 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L127

Use semicolons judiciously.

Check warning on line 127 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L127

Use semicolons judiciously.

Check warning on line 127 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L127

Use semicolons judiciously.

Check warning on line 127 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L127

Use semicolons judiciously.

Check warning on line 127 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L127

Use semicolons judiciously.
allowFullScreen
></iframe>
```
Expand Down Expand Up @@ -142,7 +152,7 @@
></video>
```

### Autoplay videos

Check warning on line 155 in create/image-embeds.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

create/image-embeds.mdx#L155

'Autoplay videos' should use sentence-style capitalization.

To autoplay a video, use:

Expand Down