Just a couple of questions around images

Support
1

Hi everyone,

I am relatively new to markdown and to Joplin, I was wondering if someone could give me a few tips on working with images in markdown?

I can get images on the internet working just fine with things like Joplin icon

But I do write quite a few articles at work with images that are just local to my machine. So i tried adding in a local image using

and ![](file://c:\temp\image.png) and neither worked for me.

Is it best to not use local paths? Should I instead use copy and paste feature in so images can be referenced using the ID?

The last thing is sizing an image or aligning it. I am guessing that I should go with html code when there is a need for that?

2

Hey :slight_smile:

You only have to write it like this: ![](file://C:/Temp/image.jpg). Take a look to the / in the path.

2 Likes
3

Ahhh thought i did try that but clearly not or i got something wrong because that does work.

@Angel_Crawford_ftw If you dont mind, how about aligning (left, centre or right) or setting the size? Sometimes the source image is not exactly the size i want :slight_smile:

1 Like
4

Ah! I was really tired and didn't even read the rest of your questions.

I think, there is only one advantage of using the local Image over the Copy/Paste, and that's space. If you use a sync target like Dropbox at example, and you only have 500MB of space there, then use the local image path. But I use Joplin like over 2 Years now, and have 10GB Sync Space and a good bunch of notes with images. And I didn't even get near the 10 GB (400MB actually). And I use a lot of images with Copy/Paste! So a lot of images are double on my PC. One time in my Joplin storage and one time on my drive elsewhere.
There is one BIG downside on the local path. If you want to use a sync target in the future! If you want to sync your notes to another PC or to our phone. Then the image isn't viewable, because it's only a path and the image is lying on one PC only. I use Joplin for work, too. Have Joplin on my work laptop and my private PC.
And: Images that are too big, get resized by Joplin automatically :wink:

If you want to size or align a image, you have to use CSS. But there is a simple "hack" for this.
For example, add this CSS to your userstyle.css:

/* Idea from: https://stackoverflow.com/a/39614958 */
img[alt$=">"] { width: 200px;  }
img[alt$="<"] { margin-left: calc(100% - 200px);  width: 200px;  }
img[alt$="><"] { display: block;  margin: 0 auto;  }

And add images with markdown ALT parameter:

![>](file://C:/Temp/image.jpg)
![Write something else as alt <](file://C:/Temp/image.jpg)
![><](file://C:/Temp/image.jpg)

If you want to use more than one size (200px in my example above), you could change the CSS like this:

img[alt$=">200"] { width: 200px;  }
img[alt$="<200"] { margin-left: calc(100% - 200px);  width: 200px;  }
img[alt$="><200"] { display: block;  margin: 0 auto;  }
	
img[alt$=">300"] { width: 300px;  }
img[alt$="<300"] { margin-left: calc(100% - 300px);  width: 300px;  }
img[alt$="><300"] { display: block;  margin: 0 auto;  }

![><200](file://C:/Temp/image.jpg)
![><300](file://C:/Temp/image.jpg)
/* ... */

Hope I could be more of a help now xD

3 Likes
5

Thank you @Angel_Crawford_ftw that is some really good info.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.