Contact avatars with Supercharged Links

[barryvan]

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.

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

I’m not sure if this is useful or of interest to other people, but I figured it was worth sharing! 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.

[Molibdeno]

This is awesome!

[talkingwires]

I’ve been pulling my hair out all week trying to cobble together a solution for getting an image from either the frontmatter or an embed on a page, then display it as an icon before the page’s title everywhere it appears. (This wiki as an example of what I’m aiming for.)

The Iconize plugin’s no good because it only supports SVGs. The functionality to link directly to a local file was removed from Obsidian. I was beginning to doubt there was any way for a CSS snippet to see and display an image inside Obsidian’s vault, and that I’d have to host them on a remote server, which is kind of ridiculous.

Anyways, that‘s a long way of saying that I’m super excited to find your project! I see that your merge request’s been open since April, that you added info to the readme as requested, synced up the branches just a couple days ago, yet @emile is still dragging their heels…

So, mind if I just go with your fork? On GitHub, there’s no release, and main.js hasn’t been updated, so I’ll need to compile the Typescript project myself? I’m new to this, it there anything more to it than cloning your repo and running npm?

Thanks again for making this!

[barryvan]

Well good news, @talkingwires – the wonderful @Emile has merged this into the main repo and made a new release that incorporates it. Let me know if you have any issues with this and if there’s anything I can help with to get this working for you.

[n9gg]

Hey I am actually having issues getting this to work. Do I still need to setup some kind of supercharged links tag/attribute search? Are there any plugin’s that mess with it? I’ve added a custom links.css to the snippets folder, turned it on in appearance, added photo:: with a url and nothing happens hmm

Edit: Figured it out, you have to set “photo” as an attribute to be tracked in the settings!

[talkingwires]

I saw! I was in the process of creating a dev environment on my phone—my ancient computer have up the ghost—got as far as compiling the Typescript project, and was sussing out merging your branch to my cloned git repo when I the update appeared.

Maybe I’ve been trying to crack this for too long and missing something obvious, but I just cannot make it work with local images. I’ve tried every variation I can think of in both the frontmatter and in the body of a note…

(inline-icon:: ![[images/icons/icon.png]])
(inline-icon:: [[images/icons/icon.png]])
(inline-icon:: ![[obsidian://open?vault=MyVault&file=images%2Ficons%2Ficon.png))

…but nothing works. Remote images seem to work fine. Any ideas? I would really appreciate some help with this.

[barryvan]

Yeah, I ran into the same issues. The (hacky) workaround I have is to run a local server to host the images… I happened to have nodejs installed, so I used npx http-server to host the images locally.

My work computer (where I use this) is a Mac. The steps to get this working on MacOS (for me, at least) were:

1. Install nodejs using Homebrew
2. Create a new automation using Automator.app, which just runs a shell script:

eval "$(/opt/homebrew/bin/brew shellenv)"
npx http-server /Users/barryvanoudtshoorn/Library/CloudStorage/OneDrive-Personal/Documents/Obsidian/barryvan/_Attachments/avatars

3. Save this to ~/Applications
4. In the Settings app, under “Login Items”, add this new automation
5. (Optional) Use Vanilla.app to hide the spinning cog from the menubar

Then in each of my contact notes, I reference against localhost:

photo:: http://127.0.0.1:8080/wonde/barry_van_oudtshoorn.jpg

It’s a bit of a faff, but once it’s all set up it seems to work OK.

I had initially gone around and hot-linked to people’s LinkedIn photos, but this was problematic because:

• The URL changed whenever someone changed their avatar – including by adding or removing “Hiring” or “Open to work” banners
• LinkedIn started getting grumpy with my usage and started rate limiting and ultimately blocking these responses

With this in mind, then, I adopted the http-server approach I outlined above. A similar approach would work on any platform, except maybe Android and iOS.

[barryvan]

As you’re wanting this to work on your phone, you might be able to get something working with a cloud storage service like Dropbox, OneDrive, iCloud, or Google Drive. I haven’t tested it, but perhaps you could put all the images you want in a folder there, and set them to be shared so they don’t require a login/password – that way, you could (in theory) link directly to them.

Another option, if you’re technically inclined, might be to leverage a Github repo or your own web hosting.

Of course, all these options require you making things public, albeit with some level of obscurity. Not sure what other options there really are for local files, though. Technically, it might be possible to do something very hacky in the plugin like detect a local file, resolve it, then base64 encode it into a URL for direct CSS consumption – but I suspect that would be very problematic performance-wise.

[liamh]

Is this currently the only way to add images next to links dynamically for a note? Are there any plugins that out-of-the-box enable this functionality? I’m hoping for something that works on desktop and mobile which simply lets me add an “image” to a note (e.g., like Notion) that when I reference that note in another note, it shows the image next to the note inline. Ideally this would be something that does not involve hosting servers, editing CSS fils, etc. Does anything like it exist?

[talkingwires]

(Okay, this forum doesn’t prompt for confirmation if you fat finger the “delete” button while searching for an “edit” button. Noted.)

@barryvan Thanks for all your help! I ended up reluctantly abandoning local images, since everything I read and tried indicates it would necessitate either a change upstream in Electron, or Obsidian relaxing security for local files. I have not dug through their code, but I suspect Iconize’s SVG limitation is related to this. Like you suggested, they are probably reencoding the graphics into text in the CSS, which is not far removed from how information in SVGs is already stored.

@liamh Many hours of searching and fiddling with various plugins lead me to conclude this is the only method that currently works. Any other methods you may find were accomplished in older versions Obsidian that used a more relaxed Electron security configuration. (Obsidian is made with Electron, which is basically a framework for creating applications using existing web technologies, and commonly used by applications that deal in nicely formatted and dynamically generated text files.) Unfortunately, you’re gonna need to get your hands dirty, with both CSS snippets and hosting the images somewhere outside your Vault.

The former isn’t all that difficult, and you could just take the example provided in the README and drop it into a CSS snippet, change the names of the dataview fields, and tweak the values to your liking. Oh, and don’t forget to add your field to the list of fields Supercharged Links scans!

As for the latter, Obsidian cannot “see” anything outside of the Vault, and everything inside the Vault is accessed by locations stored in memory, not the local filesystem. Obsidian resolves links to everything stored in this memory itself, but a CSS needs a URL to either a local or remote filesystem. It cannot “see” a Vault location stored in memory.

There’s no way around this limitation—believe me, I’ve tried!—so any image you wish to use must exist on a filesystem accessible via a URL. That means a web server, running either locally, or online.

[jpfieber]

I’d like to try setting this up in my vault but I’m not understanding the Supercharged Links setup. I put together that I need to add Photo as an attribute to track, and the image has to be hosted at a URL. Do you need to create a separate ‘styling’ for every contact, or does it look at every link with the photos attribute, and use the photos attribute value to generate the icon? In either case, seems like it should get the attribute value from the note frontmatter, so what do you set as the “attribute value” when configuring the styling?

EDIT: OK, I think I found the answer to that question, I put ‘starts with’ and entered ‘https’. I now see it’s trying to put something in front of my links, but the image doesn’t appear. I added a snippet with your exact css code. I uploaded a jpg to both Google Drive and to OneDrive and shared the images to anyone with the link. I can see the image if I open an ‘inprivate’ window and paste in the same URL I’m using in the frontmatter. Is there a limit to the dimensions of the image or something else I need to know about images that will work?

[barryvan]

Glad to hear it’s starting to come together for you, @jpfieber!

There’s nothing about the image size etc. that should cause any issues. Are you able to perhaps share a screenshot of what you’re seeing in front of your links?

The CSS I’ve written is also built on styling the CSS link text, not on adding content before, so in your selector, ensure you have the first checkbox selected. Here’s my config:

If you’re using non-frontmatter attributes (i.e. ones that are just inline, like photo:: https://...), make sure you have that option enabled, too.

[jpfieber]

Here’s my configuration in Supercharged Links:

You can see at the bottom of the second picture how it’s putting that circle before the word ‘Note’, it does the same thing to my links in notes that have the ‘photo’ attribute (I do include it in the frontmatter). I notice your screenshot doesn’t have the circle there, despite us having identical settings. Presumably the circle is supposed to have the picture in it, but it doesn’t in the notes, just white like you see it here.

[barryvan]

That’s really strange, @jpfieber! Any chance you could inspect one of those using the developer tools in Obsidian and screenshot it here?

I notice you have another selector there, and it appears to have some fancy styling happening too… Could it perhaps be that you have a conflicting selector? Perhaps try disabling those (I think turning off all the style options should do so).

[jpfieber]

I did already remove other ‘conflicting’ styles, there are none left that would apply to this type of link. I DM’d you the code, hope you notice something. Perhaps try the image link to see if you can see it? I tried in an inprivate window and another browser and it opens for me, so I think it is publicly available as needed.

[jpfieber]

It’s something to do with the image. I put the link to your image in, and it’s displaying in the circle. I looked closer at the OneDrive link, and when I right-click the image to save it, It shows it as a json file, so the page that shows up at that URL isn’t an image. I tried the same with the Google Drive link, and it doesn’t just display the image, it gives you a ‘view’ of it with options on how to open it, so it isn’t a true image either. Looking into other options on where to save it where I can get a real url for the image file.

[jpfieber]

I got it working. I setup a basic webserver on my Synology NAS, and it’s pulling the jpg successfully from there. For anyone else trying this, simply sharing an image file from OneDrive or Google Drive won’t work as the URL you get isn’t directly to the image, it’s a wrapper around the image that won’t work for this purpose. Thanks for your help in narrowing this down @barryvan !

[barryvan]

So glad you got it working, @jpfieber!

[jpfieber]

What code did you use for hover? I have:

.data-link-icon[data-link-photo^="http" i]:hover {
	transform: scale(5);
	border-radius: 5%;
}

This works fine in notes, but when I hover over a link in the navigation bar, the text gets large and I can’t even see the icon. I don’t know CSS well enough to figure out how to stop it from working in the navigation area.

[barryvan]

Hmm… To be perfectly honest, I ended up removing the hover in my own vault. If you want it to only happen in the editor, you can probably do this by scoping the CSS to just the editor area:

.view-content .data-link-icon[data-link-photo^="http" i]:hover {
  transform: scale(5);
  border-radius: 5%;
}