Resize embedded content

I’d like to be able to adjust the size of images and videos . It’s not very convenient to have a a single image take up almost the entire width/height of a page.

54 Likes

I also would like this as well. In addition, being able to zoom into an image (as a pop up that darkens the background like it does here on the obsidian forum, would be handy.

5 Likes

This is very important feature for me as well. I used to take lots of screenshot of graphs and flowchart to fill my notes. In preview mode it fills the page. Totally inconvenient the user experience. If i can do this with css, someone can help.

2 Likes

:100: I totally agree. Having to worry about downsizing images before uploading them to a note is hindering the speed of my note creation.

1 Like

One approach, that appears to be relatively markdown friendly, could be to place attributes in the currently unused pretty link position.

![[graphic.png|{width=50%}]]

Or just recognize that something like curly braces contain attributes

![[graphic.png{width=50%}]]

Alt text could be supported like this

![[graphic.png{width=50%}|alt-text]]

I’m linking this because it’s related and seems like pandoc has a reasonable approach, with the potential for additional utility

![[caption text]](graphic.png){width=50%}

or

![[graphic.png]]{width=50%}

This approach could easily allow alt-text

![[graphic.png|alt-text]]{width=50%}

As another option, I’ve seen something like this in the forums somewhere also.

![[<img  width="80px">graphic.png]]
7 Likes

As the title says, it would be great if we could forcefully resize images so they don’t take up the whole screen. Right now, when simply copy+pasting images from the web, you need to download them, resize them in PS/Gimp, then paste them into obsidian.

Some markdown syntax that already works in other programmes is as follows:

![[plunger-cap.png =50%x50%]] // percentage
![[plunger-cap.png =400x400]] // pixels

where the first integer is width, second is height.

What do you think?

In addition to syntax, as you propose, it would be great to also have a widget handle for dragging on the image and resizing it, while in Preview mode.

(And as I imagine it, that widget function would result in the Markdown syntax being updated in the Markdown source.)

6 Likes

Definitely a key feature

Note that it’s somewhat possible to do now by directly linking to the image and using HTML, e.g.,

<img style="width: 25%" src="app://local//[notebook dir]/obsidian/test1/48ubgp.jpg" alt="48ubgp.jpg">

but obviously this is not ideal.

Being able to provide a percentage or absolute width in particular is almost mandatory. Using the dev tools to set a global image preview size… not sustainable :wink:

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 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);
}
2 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 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

7 Likes

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