Bilder

Bilder helfen, eine Geschichte zu erzählen. In Presenter genügt es, ein Bild in den Editor zu ziehen. Wie es auf der Folie erscheint, lässt sich danach genau einstellen.

Bilder hinzufügen

Ein Bild lässt sich in den Editor ziehen oder dort einfügen. Das geht mit Bildern auf dem Mac ebenso wie mit Links zu Bildern im Web.

Diese Bildformate funktionieren in Presenter:

Syntax

Presenter versteht die Markdown-Syntax für Bilder. Sie sieht so aus:

![](image-name.png)

Einfacher geht es mit der Contentblock-Syntax. Hier steht nur der Pfad oder die URL des Bildes. Beides lässt sich hineinziehen oder einfügen, zum Beispiel:

/assets/image-name.png

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

Eine .iapresenter-Datei ist ein .zip-Archiv. Es enthält die Markdown-Datei der Präsentation und alle eingefügten Bilder. Die Bilder müssen also nicht separat gespeichert werden. Bilder, die nur per URL verlinkt sind, fehlen darin. Presenter lädt sie von ihrer Quelle, deshalb müssen sie online bleiben. Verwalten lassen sich die Bilder im Media Manager des Inspectors (siehe unten).

Presenter kennt für Bilder zwei virtuelle Ordner:

• assets für Grafiken, die zu einer Präsentation hinzugefügt werden, zum Beispiel /assets/image-name.png
• theme für Grafiken, die ein Theme mitbringt, zum Beispiel /Theme/image.jpg

Bilder und Videos einer Präsentation gehören in den Ordner assets. Über den Ordner theme werden Grafiken in Layout-Themes ausgetauscht.

Der Media-Manager-Tab

Der Tab Media Manager liegt rechts oben im Inspector. Ist der Inspector geschlossen, lässt er sich so öffnen:

• über Menu → View → Show/Hide Inspector
• mit dem Tastenkürzel ⌥⌘I
• mit zwei Fingern auf dem Trackpad vom rechten Rand nach links wischen

Im Media Manager kann man:

• alle Grafiken sehen, also Bilder und Videos
• Grafiken in den Editor ziehen
• ungenutzte Bilder löschen
• Grafiken umbenennen (samt Dateiendung, zum Beispiel .png)
• Links zu YouTube-Videos hinzufügen
• Bilder von Unsplash hinzufügen

Bildoptionen

Mit der Contentblock-Syntax lassen sich einige Eigenschaften eines Bildes über Metadaten steuern. Mit Markdown-Syntax geht das nicht. Ein Klick auf den Bildblock im Editor öffnet oben ein schwebendes Menü mit Optionen. Was dort gewählt wird, steht danach auch im Editor, zum Beispiel:

/Theme/image1.jpg

size: contain

x: right

Wer die Hände lieber auf der Tastatur lässt, gibt die Befehle direkt ein, zum Beispiel:

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

Grösse festlegen

Für die Grösse gibt es zwei Optionen: Cover und Contain.

Cover: Das Bild füllt den verfügbaren Platz ganz aus. Sein Seitenverhältnis bleibt dabei erhalten. Hat der Container ein anderes Seitenverhältnis, wird das Bild beschnitten.

Contain: Das Bild nutzt den verfügbaren Platz, so weit es geht. Auch hier bleibt sein Seitenverhältnis erhalten. Hat der Container ein anderes Seitenverhältnis, bleiben am Rand Streifen frei.

Ausrichtung

Zur Wahl stehen:

• horizontal: zentriert (Standard), links oder rechts
• vertikal: zentriert (Standard), oben oder unten

In Presenter steht jedes Bild in einem Container. Das kann die ganze Folie sein, eine Spalte oder eine Zelle in einem Raster. Wie sich die Ausrichtung auswirkt, hängt vom Seitenverhältnis des Bildes und seines Containers ab.

Reihenfolge

Ein Bild kann Content (Standard) oder Background sein. Als Content teilt es sich den Platz mit anderen Elementen, etwa mit Titeln. Als Background liegt es hinter dem Titel und allen anderen Elementen. Ist das Bild zu hell oder zu unruhig, lässt sich der Text darauf schlecht lesen. Filter oder eine geringere Deckkraft helfen dann am meisten.

Stil

Filter können ein Bild aufhellen, abdunkeln, in Graustufen oder Sepia zeigen oder weichzeichnen. Auch die Deckkraft lässt sich ändern. Das hilft vor allem, wenn ein Bild als Hintergrund hinter anderen Elementen liegt.

CSS-Klassen

Wer mit CSS vertraut ist, kann in einem eigenen Theme eine Klasse definieren und sie jedem Contentblock zuweisen, etwa einem Bild. Im Editor wird die Klasse so aufgerufen: Class: your css class name

Beschreibungen

Jedes Bild sollte einen Titel und einen Alternativtext haben. Das macht die Präsentation barrierefreier.

Bildunterschriften hinzufügen

Als Bildunterschrift dient eine H4-Überschrift auf derselben Folie wie das Bild. Dafür #### vor den Text setzen. Ob die Bildunterschrift über oder unter dem Bild erscheint, hängt von der Reihenfolge ab. Ihre Grösse bleibt in beiden Fällen gleich.

Steht die H4-Überschrift zuerst, führt sie in das Bild darunter ein oder beschreibt es kurz. Steht das Bild zuerst, tritt es stärker hervor. Die Bildunterschrift darunter ergänzt dann Details oder Hintergrund.

Gestaltung

Design

Ein Theme wählen und im Design-Tab nach Wunsch anpassen.

Layouts

Man fügt Text und Bilder ein, Presenter wählt das passende Layout.

Videos

Lokale Videos in den Editor ziehen oder YouTube-Videos verlinken.

Themes

Die mitgelieferten Themes von Presenter und die Gestaltungsideen hinter jedem einzelnen.

Eigene Themes

Wer sich mit Code auskennt, baut mit HTML und CSS ein eigenes Theme von Grund auf.