release version 1.1.0

README.md

@@ -40,6 +40,8 @@ The following options are available through the YAML codeblock:
     -   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. <small>Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/object-position for more information.</small>
 
 ## Installation
 

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "avatar",
 	"name": "Avatar",
-	"version": "1.0.6",
+	"version": "1.1.0",
 	"minAppVersion": "0.15.0",
 	"description": "Display an avatar image in your notes.",
 	"author": "froehlichA",

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "obsidian-avatar",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "obsidian-avatar",
-			"version": "1.0.6",
+			"version": "1.0.7",
 			"license": "MIT",
 			"devDependencies": {
 				"@tsconfig/svelte": "^3.0.0",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-avatar",
-	"version": "1.0.6",
+	"version": "1.1.0",
 	"description": "An obsidian plugin for displaying an avatar image in front of your notes. ",
 	"main": "main.js",
 	"scripts": {

src/components/AvatarView.svelte

@@ -31,6 +31,16 @@
 		 * @default "medium"
 		 */
 		size?: "small" | "medium" | "large" | number;
+		/**
+		 * Alignment of the avatar image within the container.
+		 *
+		 * Corresponds to the `object-position` CSS property.
+		 *
+		 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
+		 *
+		 * @default "50% 50%"
+		 */
+		objectPosition?: string;
 		description: string;
 	}
 
@@ -57,6 +67,7 @@
 				}[state.size]
 			: state.size
 		: 240;
+	$: objectPosition = state.objectPosition;
 
 	onMount(() => {
 		inSourceMode = isSourceMode();
@@ -118,11 +129,9 @@
 	}
 </script>
 
-<div class="flex" class:reverse={state?.side === "right"}>
+<div class="avatar-view flex" class:reverse={state?.side === "right"}>
 	<div
-		class="avatar relative"
-		style:width={`${avatarSize}px`}
-		style:height={`${avatarSize}px`}
+		class="avatar-container relative"
 		on:click={updateImage}
 		on:mouseenter={() => (hoverOnImage = true)}
 		on:mouseleave={() => (hoverOnImage = false)}
@@ -130,6 +139,9 @@
 		<img
 			class="avatar"
 			alt="Avatar"
+			style:width={`${avatarSize}px`}
+			style:height={`${avatarSize}px`}
+			style:object-position={objectPosition}
 			src={state.image ? normalizeImgPath(state?.image) : fallbackImage}
 		/>
 		{#if inSourceMode && hoverOnImage}
@@ -138,7 +150,11 @@
 			</Fab>
 		{/if}
 	</div>
-	<div class="description relative" on:click={enterEditMode}>
+	<div
+		class="description relative"
+		on:click={enterEditMode}
+		class:editmode={!!editMode}
+	>
 		<textarea
 			class="textarea"
 			bind:this={descriptionEditEl}
@@ -147,7 +163,7 @@
 			bind:value={state.description}
 		></textarea>
 		<span
-			class="avatar-plugin--md-preview with-placeholder"
+			class="avatar-plugin--md with-placeholder"
 			hidden={editMode}
 			bind:this={descriptionPreviewEl}
 			data-placeholder="Write your story..."
@@ -182,10 +198,11 @@
 		position: relative;
 	}
 
-	.avatar {
+	.avatar-container {
 		flex: 0 0 auto;
-		width: attr(data-size);
-		height: attr(data-size);
+	}
+
+	.avatar {
 		object-fit: cover;
 		border-radius: 6px;
 	}
@@ -193,10 +210,13 @@
 	.description {
 		flex: 1 1 auto;
 		word-break: break-word;
-		padding: 6px;
 		border-radius: 6px;
 	}
 
+	.description.editmode {
+		padding: 6px;
+	}
+
 	.textarea {
 		width: 100%;
 		height: 100%;

styles.css

@@ -2,6 +2,15 @@
 	float: right;
 }
 
-.avatar-plugin--md-preview > * {
-	margin-top: 0;
+.markdown-preview-view .avatar-view {
+	margin-block-start: var(--p-spacing);
+	margin-block-end: var(--p-spacing);
+}
+
+.avatar-plugin--md > *:first-child {
+	margin-block-start: 0;
+}
+
+.avatar-plugin--md > *:last-child {
+	margin-block-end: 0;
 }

versions.json

@@ -5,5 +5,7 @@
 	"1.0.3": "0.15.0",
 	"1.0.4": "0.15.0",
 	"1.0.5": "0.15.0",
-	"1.0.6": "0.15.0"
+	"1.0.6": "0.15.0",
+	"1.0.7": "0.15.0",
+	"1.1.0": "0.15.0"
 }