Resize embedded content

By the way, you can just directly copy the URL of the image (right click, copy image address/copy image link), and reference it like a external link, but with a !.

This would be a great feature to add! I use Obsidian to take notes with images attached by pasting. There’s no need to actually compress the embedded image file, adjust the display width would be enough!

Another markdown app I use has a link style like this to specify image width: ![IMAGE](resources/92144EFF1B136A725B5E70B356019505.jpg =430) it looks a lot like what Obsidian does, only has the addition = width part.

Clearly need this feature

+1 on this feature. as a PhD student in engineering, I take notes of a lot of formulations, like integer programs and so on. I usually copy the formulation on my notes from a paper, or from the class notes/ppt file, but end up with a HUGE image in the middle of the notes.

I would love to resize it to match the Obsidian font size for example.

1 Like

+1 This feature would be super helpful!

Would love this as well.

Edit: @dubinindmitry has a very elegant solution for this in his Obuntu theme. To your obsidian.css, add:

/* Enlarge image on hover */
.markdown-preview-view img {
  display: block;
  margin-top: 20pt;
  margin-bottom: 20pt;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /*experiment with values*/
  transition: transform 0.25s ease;
}

.markdown-preview-view img:hover {
  -webkit-transform: scale(2); /* experiment with values */
  transform: scale(2);
}
9 Likes

+1 from me.

Meanwhile one can try some workaround techniques based on “overloading” image’s attributes in combination with CSS selectors as described here: https://www.xaprb.com/blog/how-to-style-images-with-markdown/.

+1

I use a lot of images when taking notes (ecology, biology etc.) and they get unreadable many times with images taking all space.

1 Like

+1 for this. Would to really helpful for a student like me.

+1 yes please would be very helpful

Image resize will be implemented in a future release

15 Likes

+1 for me as well. Would like to migrate my notes from Quiver, which uses this syntax for its markdown

Is there any progress on this?

this is implemented. read the docs.

1 Like

How about posting a link to the relevant part of the doc? Your post would be so much more useful, then.

https://publish.obsidian.md/help/How+to/Embed+files

For embeds, use ![[image.png|100x100]]

29 Likes

That doesn’t seem to work with embedded PDFs, if I’m seeing this right? Or with embedded notes. I have small-ish notes for example that I would love to embed without a scrollbar, but they are slightly too long.

3 Likes

Ya, as best I can tell, the ![[file.pdf|SIZE]] syntax embeds the PDF, but the SIZE portion doesn’t do anything.

I’ve got a single-page PDF embedded in one of my notes, and it is displaying at 304px x 800x, where most of that 800x is empty vertical space, about 3 or 4 times taller than it needs to be. Plus, at only 304px wide, the preview is too small to be useful – nothing in the image is legible.

I suspect that the sizing might be decided by whatever internal process is producing the source of the embedded iframe, something showing up as blob:app://obsidian.md/ecc6c4ed-f072-4c51-b323-1433fb20386c.

Request: Allow for PDF previews to be sized, much as images are currently sizable.

Note: If I use the Inspector view to munge the CSS for the iframe element, I can make that bigger or smaller – but the PDF preview remains the same size. This is not useful behavior.

11 Likes

I’m going to give this post another +1 as I’m still hoping for some time of visual scaling tool (perhaps in the WYSIWYM editor) and alignment/justification.

3 Likes

+1
Does someone know if those feature are planned ?

9 Likes