Obsidian Avatar

This plugin provides you with a component that will display a small image with some accompanying text. That's it.

To use, insert the following snippet into your markdown.

```avatar
```

Editing the picture / description

In source mode, you can edit the codeblock directly:

```avatar
image: your-image-here.png
description: This will be displayed as the description!
```

In live preview mode, click on the image to change it (then either select one from your vault, or paste in a URL to a picture online), or edit the description by clicking on it (Don't forget to click the button to save your changes!)

The description editor supports all markdown features of Obsidian.

More options

The following options are available through the YAML codeblock:

• image?: string
  • A path or URL to an image. Optional, defaults to a picture of the file path initials.
• description: string
  • The description displayed next to the image.
• side?: "left" | "right"
  • The side on which the avatar will be displayed. Optional, defaults to "left".
• size?: "small" | "medium" | "large" | number
  • The size of the avatar. May be either small (180x180px), medium (240x240px), large (320x320px), or any custom width as a number. Optional, defaults to medium.
• objectPosition?: string
  • How to position the image within the square container surrounding it. For example, "left" would show the left side of a landscape picture, "right" the right side. Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/object-position for more information.

Installation

Using Obsidian

1. Open Obsidian
2. Open Settings -> Community Plugins
3. Click on Turn on Community plugins if prompted
4. Click on Browse, and search for Avatar
5. Install & enable the plugin

Manual installation

1. Download the latest release .zip from the Releases section of this Github repository
2. Extract the .zip to your vault's plugin folder: <vault>/.obsidian/plugins
3. Reload Obsidian