obsidian-plugin/maradotwebp_obsidian-avatar
1
0
Fork 0
mirror of https://github.com/maradotwebp/obsidian-avatar.git synced 2026-07-22 07:30:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

allow user to position image within container

Browse source
This commit is contained in:
mara.froehlich 2025-06-25 20:39:06 +02:00
parent 0777249a18
commit 253668b983
2 changed files with 14 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -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"`. - The side on which the avatar will be displayed. Optional, defaults to `"left"`.
- `size?: "small" | "medium" | "large" | number` - `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`. - 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 ## Installation

12
src/components/AvatarView.svelte
View file

@ -31,6 +31,16 @@
* @default "medium" * @default "medium"
*/ */
size?: "small" | "medium" | "large" | number; 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; description: string;
} }
@ -57,6 +67,7 @@
}[state.size] }[state.size]
: state.size : state.size
: 240; : 240;
$: objectPosition = state.objectPosition;
onMount(() => { onMount(() => {
inSourceMode = isSourceMode(); inSourceMode = isSourceMode();
@ -130,6 +141,7 @@
alt="Avatar" alt="Avatar"
style:width={`${avatarSize}px`} style:width={`${avatarSize}px`}
style:height={`${avatarSize}px`} style:height={`${avatarSize}px`}
style:object-position={objectPosition}
src={state.image ? normalizeImgPath(state?.image) : fallbackImage} src={state.image ? normalizeImgPath(state?.image) : fallbackImage}
/> />
{#if inSourceMode && hoverOnImage} {#if inSourceMode && hoverOnImage}