Using images in a Slidum Markdown presentation

svg icon in markdown presentation

Images are an important part of a presentation and Slidium supports different ways to use them in your slides.

Even if images are managed using the regular Markdown syntax, reading this guide is important to fully understand the specificities of the application.

Markdown syntax for images

Regular syntax

![alt text](https://www.domain.com/image.jpg "Title")

You can specify a title but for the moment, there is no real usage of it.

Reference-style syntax

![alt text][logo]
...
[logo]: https://github.com/icon48.png "Title"

Sandboxing and Slidium resources manager

Slidium is a sandboxed application and hence, by default, can only access to restricted locations.

Unfortunately, creating presentations often require to add content (images,…) located outside these trusted locations.

Slidium provides a resources manager that analyses the resources contained in your slides and asks you to allow it to read the folders where your images ares stored.

When you gives the read rights to Slidium, there are persistent and will be restored during the next launch of of the application

slidium images manager

Slidium images manager

Relative or absolute path?

Slidium can support relative image paths. It is only possible if the current presentation file is saved. Otherwise, Slidium is unable to calculate the relative paths.

When using relative paths, you need to keep in mind that if you move the file, you need to move images as well. It is recommended to keep both presentation file and images in the same folder.

Rules

When you specify an image, you need to specify an URL. It means a valid URL. For instance, you cannot have spaces, they have to be escaped and replaced by %20.

Adding images

Slidium offers different ways to add images to your slides:

By typing them

It is the most basic one. However, this is not the easiest way. You need to remember the exact path to the image.

By using drag and drop

This is the preferred method. Drag any image from the Finder and drop it in Slidium, at the place you want to insert it. Slidium will add the markdown tag around it.

By using the insert menu option

It will open a regular file open dialog allowing you to select the picture you want to insert.

Images as full slide background

In addition of using images as part of the slide, Slidium allows to define a full slide background image as slide metadata.

It has several benefits:

  • You can have a different transition for the background and the content.
  • Caching is more efficient, especially if you are using large images and if the running hardware is limited (having an iOS version of Slidium is not science fiction).

You just need to inform the URL of the image after Background meta data key, like this example:

---

Background: path/to/image.jpg

SVG icons

Sometimes you need more that bitmap pictures, you need an easy way to add a simple icon to illustrate.

Slidium comes bundled with hundred of SVG icons, powered by !!!!linea!!!! icons sets.

They are multipurpose and render nice at all resolutions.

The syntax is similar to a regular image, instead of indicating the path to the image, you just need to inform the SVG icon name.

![](svg_icon_name.svg)

Remembering all the names is not an easy task and ad no value. Slidium hence provide a completion list. You can start to type the first letter of an icon, and you will get a list of available graphics with their preview.

svg icon in markdown presentation