I’ve been using the Obsidian Digital Garden plugin made by oleeskild and it’s been working great. A lot of my notes have several diagrams I’ve made using Excalidraw and exported into SVGs and I’ve been trying to find a way to center in my digital garden. Here is the CSS snippet that I used in order to get it to work:
Allows me to both center and scale my image in Obsidian. However when I check my site, it seems that the image aligned in the center but my custom scaling is no longer present:
I read along some forum, can’t remember where, that removing the “[alt*=“center”]” part from the CSS snippet would make the behavior default and would allow me to just type ![[image.svg|450]] in order to get the picture to render properly but that didn’t work.
I don’t know what Prism does with images by default. I was going to write I don’t know how with Style Settings (plugin) one can manipulate this but I realized DG doesn’t (didn’t?) handle Style Settings settings anyway.
I do remember I’ve seen themes where those put all my images in the middle by default:
Blue Topaz
Chime
But if you don’t want to use those themes, you would need to forgo having to add ‘center’ in each link, meaning a custom snippet would need to be used.
Once you have that, you need to add your custom css to your ‘src/site/styles/user’ folder.
How to do that? Clone the git repo of your Digital Garden with Github Desktop, find the folder on your drive, copy the snippet there, and commit+push changes.
You would need to learn some git along the way.
But from the text I gather you managed to get the snippet up to the site?
So I’ve tried the two themes and their centering seems to work in obisidian but not in my Digital Garden?
I probably need to center them using a snippet instead. I’m not very familiar with git, do you have any tutorials you could link on how I’d go about adding the snippet?
Ok so I’ve followed the steps for adding custom css snippets to obsidian. I made the following folders and .css files according to oleeskild’s documentation like so:
That css snippet was what I used in my obsidian vault, auto-centering images without requiring a “center” added in each link, however it still didn’t work. My images are still left-aligned on my digital garden
I’m not quite sure since I haven’t tried centering them outside of obsidian before. Obsidian has been treating them like any other png and centering them with this snippet so I haven’t tried others.
I’ll go searching and trying other snippets and see if any of them prevent the icons from getting messed up. I’ll post here if I find one that works perfectly.
Ok so annoyingly enough, after some double-checking I still cannot scale my svgs actually. They will now auto-center without requiring me to type ‘center’, however they no longer scale and I cannot control their scale.