How to use images in Markdown?
Images are an important part of a presentation and Slideas 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
![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.
![alt text][logo] ... [logo]: https://github.com/icon48.png "Title"
Supported Image Formats
Slideas supports the most common image types:
Using PDF as images
- You can use PDF files as images.
- They will be rendered as PDF (not rasterised)
- Only the first page of the PDF will be visible.
- PDF can only be used as “regular” images and not for background.
Using SVG as images
- SVG can also be used for images.
- SVG file needs to have explicit dimensions in pixels. Example:
<svg width="120px" height="40px" viewBox="0 0 60 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
- SVG can only be used as “regular” images and not for background.
Sandboxing and Slideas resources manager
Slideas 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.
Slideas 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 Slideas, there are persistent and will be restored during the next launch of of the application
Relative or absolute path?
Slideas can support relative image paths. It is only possible if the current presentation file is saved. Otherwise, Slideas 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.
- 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.
- Remote(online) image cannot be served over
httpsis mandatory for security reasons.
Slideas 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 Slideas, at the place you want to insert it. Slideas 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, Slideas 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 Slideas is not science fiction).
You just need to inform the URL of the image after
Background meta data key, like this example:
Sometimes you need more that bitmap pictures, you need an easy way to add a simple icon to illustrate.
Slideas comes bundled with more than thousand icons, powered by Google Material Design Icons.
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 icon name.
All icons have the
Remembering all the names is not an easy task and ad no value. Slideas 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.
Icons sizesIcons have the size of the current text element. If there are inside a Title 1, they will have for instance the font size of H1. If you want a bigger or smaller icon, you can specify an explicit size:
|Size name||Size in em|
# Sizes ![xs](mi_directions_boat) ![s](mi_directions_boat) ![m](mi_directions_boat) ![l](mi_directions_boat) ![xl](mi_directions_boat) ![xxl](mi_directions_boat)