Add pictures and video

Keep your slide file and its pictures together in one folder. That makes the presentation easier to move and share later.

Your assistant can place pictures for you once they are in the folder. Tell it which file belongs where and what it shows:

Put img/garden.jpg on the opening slide, full size, and the three
photos in img/beds/ side by side on the slide about planting.

When it suggests pictures you do not have yet, it names the files it expects; mdeck check lists the ones still missing.

Keep the files together#

For example, your folder could look like this:

my-talk/
  my-talk.md
  img/
    garden.jpg
  video/
    tour.mp4

img and video are ordinary folders you create. Their names are suggestions, not special mdeck requirements.

Put a picture on a slide#

Write a line like this where you want the picture:

![A community garden in spring](./img/garden.jpg)

The words in square brackets describe the picture. The part in parentheses is its location, starting from the folder containing your slide file. ./ means “start in this folder.”

Use forward slashes in image paths, including on Windows. Simple filenames without spaces are easiest to work with.

For a picture beside text or a picture that fills the slide, use one of the picture layouts.

Show the whole picture#

Picture layouts usually fill their available space, which can crop the edges. To keep the whole picture visible, use fit: contain:

:::meta
layout: image-text
props:
  image: ./img/garden.jpg
  alt: "A community garden in spring"
  fit: contain
:::
# The whole garden

For a cropped picture, use fit: cover. You can add position: "left center" or position: "70% 50%" to choose which part stays in view.

Pictures that follow the theme#

An SVG drawing can take its colours from the theme, so it matches every theme, palette, and light or dark. Colour it with the palette's names instead of fixed colours, for example fill: var(--accent, #1f3fd1); the colour after the comma is used wherever the picture is shown on its own. The names are --bg, --surface, --ink, --ink-soft, --muted, --rule, --accent, --accent-2, --accent-3 and --on-accent.

It works wherever a picture goes: in the slide text (![…](./img/drawing.svg)) or as the image of a layout. In a layout, add fit: contain so the whole drawing shows. The tour example's title picture, examples/showcase/img/mdeck.svg, works this way. An AI assistant can draw one for you:

Draw an SVG title picture for this talk that uses the palette's
colours, with a transparent background, and put it on the title slide.

A drawing that builds up#

Such a drawing is part of the slide, so its parts can appear one at a time, like the points of a list. Put each part in a group and number it with data-step: the parts appear in the order of their numbers, and parts with the same number appear together.

<g data-step="1">…the first box…</g>
<g data-step="1">…the second box…</g>
<g data-step="2">…the arrow between them…</g>

The numbers decide the order, not where a part is in the file, so an arrow can be drawn under the boxes and still appear after them. With hotspots on (see Zoom in on part of a slide), data-hotspot on a group gives it a key of its own. The same drawing can be on several slides; each copy keeps its arrowheads and gradients.

mdeck check looks at these drawings: it names colours that stay fixed in dark mode, palette names without a colour after the comma, and styles that would reach the rest of the slide. An assistant can do all of it for you:

Draw the three stages of the pipeline as an SVG in the palette's colours
that builds up one stage at a time, and make each stage a hotspot.

Add a video file#

Paste this line into a normal slide, or into one side of a split slide:

<videoplayer src="./video/tour.mp4" />

This is a special instruction to mdeck. You only need to change the filename. The player shows controls so you can choose when to play the video.

To start a video when its slide appears, add play="auto":

<videoplayer src="./video/tour.mp4" play="auto" />

Automatic playback is muted. Leaving the slide stops the local video; automatic videos also return to the beginning.

Presenting from an iPad paired with your laptop? Play, pause or jump in the video on the iPad, and the audience window on the projector does the same, with the sound; see Present from an iPad.

Show an online video#

Use url instead of src for a YouTube, Vimeo, or SwitchTube address:

<videoplayer url="https://www.youtube.com/watch?v=YOUR_VIDEO_ID" />

Replace the example address with your video's address. Online videos need an internet connection and permission from the video service to appear in another page. Test them before your talk. They play only where you start them: a paired iPad cannot start one on the projector, as it can a video file.

If a picture does not appear#

Check the spelling of the filename and folder, including capital letters. Then run:

mdeck check my-talk.md

mdeck reports local files it cannot find. For sharing, use a built presentation, so the necessary files travel with it.