Resizing images in Ghost/Ulysses

Other
,
2

Depending on how you include the images in Ulysses, you could try specifying them in html instead of markdown syntax. Markdown would be like ![alt text](/image/path.png). Equivalently you could do something like this directly in the .md file: <img src="/image/path.png" width="50%" /> – the value for the width parameter can have diff units depending on what you are after; I think maybe just pixels and percentages work in the html attribute, but you can use more units via css.

Examples:

<img src="/uploads/default/original/1X/3b77537cc546aaf2a71c59ebe62548e1bce531de.png" width="20%" />
<img src="/uploads/default/original/1X/3b77537cc546aaf2a71c59ebe62548e1bce531de.png" width="150px" />
<img src="/uploads/default/original/1X/3b77537cc546aaf2a71c59ebe62548e1bce531de.png" width="40%" />



If that doesn’t work, you could mb add some CSS classes to style them, like:

img.w20 {
  width: "20vw"; /* 20% width of the entire page */
}

(which you’d use like <img src="blah" class="w20" />)

If those still don’t work (e.g. b/c you can’t use img tags directly or don’t know the URL of the image in advance), then there are more CSS tricks you can do, a few are mentioned in this article: https://www.xaprb.com/blog/how-to-style-images-with-markdown/.

The one’s that look good are “Use CSS And Special URL Parameters” where you refer to the image url like: cat.png#magicstring and have a css class like:

img[src*="#magicstring"] { /* css pseudo-selector */
  width: 20vw;
}

also wrapping it in a div (example directly from article)

<div style="width:150px; height:100px">
![Kitten](/media/2018/08/kitten.jpg)
</div>