Contact avatars with Supercharged Links

Hi all! I’ve been using Obsidian for about six months now, and during that time I’ve done a fair bit of finagling and finessing and tweaking. I’ve just opened a pull request for the wonderful Supercharged Links plugin which makes it much easier to access attributes from CSS.

My specific use case was to show avatars for my “contact” notes directly in Obsidian. My very minimal example looks like this:

…and uses this CSS:

.data-link-icon[data-link-photo^="https" i]:empty {
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	vertical-align: middle;
	background-image: var(--data-link-photo);
	background-size: cover;
	box-shadow: 0 1px 4px #0008;
	border-radius: 100%;
	margin: -0.5em 0.2em -0.5em 0;
}

.data-link-icon[data-link-photo^="https" i]:not(:empty)::before {
	content: '';
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	vertical-align: middle;
	background-image: var(--data-link-photo);
	background-size: cover;
	box-shadow: 0 1px 4px #0008;
	border-radius: 100%;
	margin: -0.5em 0.2em -0.5em 0;
}

In my personal vault, I have perhaps been a little bit wilder, with full-on contact chips including indicators of the type of contact based on its directory.
image

And to make it easier to see people, I’ve added a simple hover for the photo to blow it up:

image

I’m not sure if this is useful or of interest to other people, but I figured it was worth sharing! :slight_smile: My PR isn’t yet approved or merged, so for now you’ll need to grab it from my fork if you want to play with this.

3 Likes

This is awesome!

1 Like