Images iPhone

Images help tell a story. You can add images in Presenter locally, or from the web. In addition, you have plenty of customization options to make sure your images display exactly as you want them to.

Adding Images

To add an image, use the Media menu, Unsplash integration—or simply copy/paste, or drag-and-drop from anywhere. With Presenter for iOS you can add both local images, or link directly to images on the Internet.

The Media menu will initially open in a half-screen view. Simply swipe up to reveal the full menu.

Presenter supports multiple image formats:

Format	Extension
Portable Network Graphics	.apng, .png
Graphics Interchange Format	.gif
WebP	.webp
Joint Photographic Experts Group	.jpg, .jpeg
Tagged Image File Format	.tif, .tiff
Scalable Vector Graphics	.svg
Portable Document Format	.pdf

Syntax

Presenter supports Markdown syntax for images, which you enter like this:

![](image-name.png)

However, an easier way is to use Content Blocks Syntax, where you add the image’s path or URL, for example:

/assets/image-name.png

https://source.net/image-name.jpeg

To insert an image, open the Media menu, head to Add Media, then select your preferred option (Files, Photo Library, Stock Photos or YouTube). Or, tap on an image that’s already in the Media Manager. You can also drag-and-drop an image or paste a URL directly into Presenter.

An .iapresenter file is a .zip that includes your Markdown presentation file and the images you add to it, so there’s no need to store them separately. Images linked by URL aren’t included: they load from their source, so they need to stay online. You can manage images from the Media menu.

Presenter uses two virtual folders for its images:

• assets for graphics you add to a presentation, e.g. /assets/image-name.png
• theme for reference graphics that come bundled with a theme, e.g. /Theme/image.jpg

Use the asset folders when working with graphics (images and video) in your presentation. You’ll use the theme folder to change graphics in layout themes.

The Media Menu

You’ll find the Media button in the bottom toolbar. From the Media menu you can:

• View a list of all your assets
• Delete images (tap the image, then choose Delete)
• Rename images or get a preview (tap the image, then choose Rename or Quick Look)
• Add YouTube video links
• Add images from Unsplash with Stock Photos

Image Options

If you use Content Blocks Syntax, you can also control some of the image’s aspects via its metadata (this option isn’t available with Markdown syntax).

Tap the image block in the Editor, and a floating menu appears above it with various options. Tap ⋯ for all Image Options. As you add or remove options you’ll see them listed in the Editor, for example:

/Theme/image1.jpg

size: contain

x: right

If you prefer keeping your hands on the keyboard, you can type image commands instead, for example:

• size: contain
• x: left
• y: bottom
• background: true
• filter: lighten
• opacity: 50%

Setting the Size

You can assign an image’s size to either Cover, or Contain.

Cover: The image is resized to entirely cover the available space while preserving its aspect ratio. The image will be clipped if it doesn’t exactly match the aspect ratio of its container.

Contain: The image fills all available space while preserving its aspect ratio. It will appear letterboxed if its aspect ratio doesn’t match the container’s aspect ratio.

Choosing an Alignment

Choose between:

• Center (default), left or right for horizontal alignment
• Center (default), top and bottom for vertical alignment

In Presenter, images live in containers. A container can be the full slide, a column, or a cell in a
grid. Keep in mind that vertical or horizontal alignment positions depend on the aspect ratio of the image and its container.

Order

You can choose between Content (default) or Background for your image. As Content, an image shares space with other elements, such as titles. When set as Background, the title and other elements will appear on top of it. If the rendering looks odd due to the brightness or complexity of the image, try changing the filters or opacity to improve text visibility.

Style

You can add lighten, darken, grayscale, sepia, and blur filters to your image, as well as change its opacity. These options are useful when you use an image as a background with other elements on top of it.

CSS Classes

If you’re comfortable with CSS, you can define a class in a Custom Theme and apply it to any content block, such as an image.

When calling the CSS Class from your custom theme in the Editor, please use this simple syntax: Class: your css class name

Descriptions

Best practice with images is to assign both a title and alternative text to improve accessibility.

Adding Captions

To display a caption, add it as an H4 heading by typing #### before your caption text, along with the image.

The caption’s position depends on the order in which you place those elements. The caption’s size stays the same, no matter which order you choose.

Add the H4 heading first if you want it to introduce or briefly describe the image beneath it. Display the image first if you want it to be more prominent, while the caption beneath it provides secondary detail or context.

Images