Screenshots/Images - Placement, Sizing and Redrawing them on Obsidian Window Size Changes

Feature requests
1

Use case or problem

  1. Set a default size for pasted images (say 50%/75% of screen)
  2. Resize images when Obsidian window is resized

Proposed solution

  1. Set a default screen location (left, middle, right etc) and size (say 50%/75%/100% of screen) for pasted images.
  2. For 2, there is no solution. Many folks have multi monitors and use tools like Rectangle or Spectacles to resizing and move and resize Apps. Obsidian images do not automatically get resized when Obsidian App is resized.

Current workaround (optional)

  1. For 1, the current solution is to set ![[Pasted image 1111.png|1000]] or ![[Pasted image 1111.png|100x100]] manually each time. When you are taking notes during an online meeting, youtube study, etc and have 25 images, doing the same thing is a bit tedious.
3 Likes
2

You may be able to get what you want with CSS snippets.

3

Can you link to the doc on how does one do this please? I am a backend guy and css means classy something something to me :slight_smile:

4

Put image {align: left; width: 50%;} in a CSS snippet, and — if you are lucky — every image will occupy 50% of the width of the pane (no matter the pane’s size), and will align left.

You may need to add display: block; in there to make the alignment work; I forget what layout model images follow by default. Also, you actually want a newer syntax because block is deprecated, but I forget what the new terms are and this one will work. You can look up the proper version.

Obsidian’s markup is not simple, so you might need to refer to something more specific than image (probably a certain class of image, like image.whyisthissocomplicated). To figure out what you need, first search the forum for CSS reference. I know some people have documented at least some of the markup. I think there’s a pinned post somewhere.

If that doesn’t help, go to the menu bar (Mac) or window menus (Windows) and select View > Toggle Developer Tools (on Mac, anyway; might be arranged differently on Windows). This will open a sidebar on the right. At the very top left, click on the icon of a pointer in a box (hover for tooltip), then hover over an image in a note. A popup will show you info, the most prominent of which is the selector. In the sidebar you will see the corresponding HTML in the top part and CSS at bottom. Classes in HTML look like class="classyclass" (a space-separated list means multiple classes); in CSS like .classyclass.

Note also that you may need to use multiple selectors for the different views (source, live preview, reading).

For general CSS knowledge, see https://developer.mozilla.org/en-US/docs/Web/CSS.

Sorry it’s potentially complicated.

5

Does this work for you?
.markdown-source-view.mod-cm6 .internal-embed {width: 10%;}

3 Likes
6

Thank you, james1294. The solution is perfect.

1 Like