README.md

@@ -40,8 +40,6 @@ 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,10 +1,10 @@
 {
 	"id": "avatar",
 	"name": "Avatar",
-	"version": "1.1.0",
+	"version": "1.0.6",
 	"minAppVersion": "0.15.0",
 	"description": "Display an avatar image in your notes.",
 	"author": "froehlichA",
 	"authorUrl": "https://github.com/froehlichA",
 	"isDesktopOnly": false
-}
+}

package-lock.json

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

package.json

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

src/components/AvatarView.svelte

@@ -31,16 +31,6 @@
 		 * @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;
 	}
 
@@ -67,7 +57,6 @@
 				}[state.size]
 			: state.size
 		: 240;
-	$: objectPosition = state.objectPosition;
 
 	onMount(() => {
 		inSourceMode = isSourceMode();
@@ -129,9 +118,11 @@
 	}
 </script>
 
-<div class="avatar-view flex" class:reverse={state?.side === "right"}>
+<div class="flex" class:reverse={state?.side === "right"}>
 	<div
-		class="avatar-container relative"
+		class="avatar relative"
+		style:width={`${avatarSize}px`}
+		style:height={`${avatarSize}px`}
 		on:click={updateImage}
 		on:mouseenter={() => (hoverOnImage = true)}
 		on:mouseleave={() => (hoverOnImage = false)}
@@ -139,9 +130,6 @@
 		<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}
@@ -150,11 +138,7 @@
 			</Fab>
 		{/if}
 	</div>
-	<div
-		class="description relative"
-		on:click={enterEditMode}
-		class:editmode={!!editMode}
-	>
+	<div class="description relative" on:click={enterEditMode}>
 		<textarea
 			class="textarea"
 			bind:this={descriptionEditEl}
@@ -163,7 +147,7 @@
 			bind:value={state.description}
 		></textarea>
 		<span
-			class="avatar-plugin--md with-placeholder"
+			class="avatar-plugin--md-preview with-placeholder"
 			hidden={editMode}
 			bind:this={descriptionPreviewEl}
 			data-placeholder="Write your story..."
@@ -198,11 +182,10 @@
 		position: relative;
 	}
 
-	.avatar-container {
-		flex: 0 0 auto;
-	}
-
 	.avatar {
+		flex: 0 0 auto;
+		width: attr(data-size);
+		height: attr(data-size);
 		object-fit: cover;
 		border-radius: 6px;
 	}
@@ -210,11 +193,8 @@
 	.description {
 		flex: 1 1 auto;
 		word-break: break-word;
-		border-radius: 6px;
-	}
-
-	.description.editmode {
 		padding: 6px;
+		border-radius: 6px;
 	}
 
 	.textarea {

styles.css

@@ -2,15 +2,6 @@
 	float: right;
 }
 
-.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;
+.avatar-plugin--md-preview > * {
+	margin-top: 0;
 }

versions.json

@@ -5,7 +5,5 @@
 	"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.7": "0.15.0",
-	"1.1.0": "0.15.0"
-}
+	"1.0.6": "0.15.0"
+}