cross-posting this thread i made here since it bears on SICP project
Some general categories of solutions I’ve thought of:
i don’t like these (too much work/burden)
Depending on how you include the images in Ulysses, you could try specifying them in html instead of markdown syntax. Markdown would be like . 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">
</div>
curiously, this is what the examples using the CF logo image look like in the post preview:
Also, IDK what markdown processor ghost uses (or if ulysses does it prior to upload) but there are lots of ‘proprietary’ extensions; like discourse has this for the screenshot above: 
there’s some way to add css classes to stuff with markdown. i forget the syntax offhand. i think it depends on which specific markdown flavor you’re using. i don’t think it was in the original markdown spec. so you could probably figure out how to add image width stuff that way.
I paste images into Ulysses straight from the macOS clipboard. On my end in the Ulysses editor, they just appear as the actual image. The actual storage/organization of the images (as existing in some folder or file somewhere) isn’t exposed to the user. I assume they’re bundled together by Ulysses in some proprietary format or structure or whatever and then that ultimately gets translated into whatever final output you decide to publish too.
Since they just appear as images in Ulysses, I think I’m reliant on what Ulysses decides to expose for editing images through the interface - similar issue as with Ghost editor. Ulysses does let you specify image dimensions, but those don’t seem to be working 
gonna look at this thx
Apparently Ulysses has some support for specifying CSS classes: Styles & Themes - HTML Styles
IDK if those would get posted to ghost, but mb worth trying. Ulysses might also automatically add class names or other attributes to images – if so then you might be able to style them via like hijacking the css class / attrs with custom, additional CSS.
Moderator Action Notice: I broke these posts off and gave them their own topic cuz I decided they’re pretty distinct from the SICP stuff. Should have Replied as Linked Topic from the beginning probably.
Tangent: I was impressed by how easy Discourse made it to move the posts
Related to images, i edited post-content in the code on this page to gh-content and the it worked to auto-link images
I’ve made significant progress on finding a solution.
I found a script that performs resizing based on the values you enter in a specified format in the alt text of an image.
I modified the script, which I found in this thread, to account for a change in the names of CSS classes in a recent update to the default Ghost theme.
So right now, this is the script I am using on my ghost site:
// Creates Captions from Alt tags
$(".gh-content img").each(
function() {
// Let's put a caption if there is one
var altImg = $(this).attr("alt")
if (altImg) {
var widthImg = "100%";
var matching = altImg.match('@(100|[1-9][0-9]?)\%$')
if (matching !== null){
widthImg = matching[1] + "%";
altImg = altImg.slice(0,matching.index);
}
$(this).css({"width":widthImg, "display": "block", "margin": "auto"});
$(this).wrap(
'<figure class="image"></figure>'
).after(
'<figcaption>' +
altImg +
'</figcaption>'
);
}
});
The script works to resize images.
I’m having an issue trying to do the resizing on the Ulysses side.
So I think the script is intended to see stuff of the form “@X%” in the alt text of an image, where X is a value from 1 to 100, and then 1) perform a resizing of the image and 2) delete that “@X%” text from view
If I add alt text in the Ulysses editor, it just works as intended, no problem. Here is an example test page (which I intend to delete later) where the alt text I typed in the Ulysses editor is “test @50%”.
But if I add, say, “test @50%” as text in a Caption of an image within the Ulysses editor, the image gets resized but I get this weirdness where there are two captions, one showing just the intended caption text, and one showing the entirety of “test @50%”:
if I set “@50%” is the entirety of the caption in Ulysses, I only get one caption, but it says “@50%”
I may have to be content with just doing the resizing with this method using the Ghost editor, but if any knows of an easy fix to the issue I’m having with using Ulysses offhand, let me know please 
Yup. WRT the .match() – that’s using regex and you can test patterns via regexr.com (I use this often when doing regex stuff). One thing that may be important, the @xx% has to be the last thing in the alt text.
Here’s a screenshot of me testing the regex you posted:
And here’s a sharable link to that pattern + tests: https://regexr.com/5thjq
Looking at the raw source code of example 2 (with formatting):
<figure class="kg-card kg-image-card kg-card-hascaption">
<img src="https://blog.justinmallone.com/content/images/2021/05/DraggedImage-17.png" class="kg-image" alt="test @50%" loading="lazy">
<figcaption>test @50%</figcaption>
</figure>
This is the raw source code; it’s what exists before your JS runs. So you already have a figcaption element, but the script is adding a second one, which is why you’re getting 2 captions. Here’s what the code looks like (using ‘inspect element’) after the JS runs:
It’s a fairly simple fix IMO. I can give you more direction (or a soln) if you like, but here are some hints:
Consider testing the next sibling element after the img for whether it’s a figcaption or not. you can do this via the .next() method on the element returned (like $(this).next() I think). (there are also other neat helper methods to know about, like .parent() and .children().)
You actually still get 2 captions (that’s expected b/c it’s the same bug), but one caption is empty. again via inspect element:
PS: GJ re finding a soln. You’re pretty close.
idk why you’re doing all that.
Max linked that. the first one is what i suggested. try that. if that doesn’t work, do the second one in the pic, which i’ve done before. (but probably give the div a css class instead of inline styling.)
Sorry if I am confused. I appreciate the reply.
To clarify, do you mean you suggested the first one in the pic in your post?
Assuming so, my reply is that in Ulysses, I don’t get markdown for an image when I paste an image in, just the image itself, and in Ghost, I don’t get markdown for an image that has been uploaded, just an image card, so I’m not sure where I’d try adding the syntax for a proprietary extension in the workflow I want (which is to mostly do stuff in Ulysses and maybe touch up/quick pass in Ghost). Maybe if I was manually editing the page after it got created, I could see where to add width=150 or whatever in whatever syntax somewhere, but in Ulysses and Ghost, I am not sure where that would go.
I was trying to find a way to use something that Ulysses did expose to me, which is why I was trying to figure out a way to use the caption field, which is something Ulysses actually does make available for me to edit.
Then do the second one? Put a div around the image with a css class. You can make several classes for different image sizes.
My understanding of CSS isn’t great so apologies in advance for any confusion.
So I think you’re suggesting I could have like, CSS classes for, for example, small, medium, and large images, and specify an image as being a member of one of those classes to resize it?
I think that’s the same basic idea that Max was talking about here with his img.w20 example Resizing images in Ghost/Ulysses - #2 by Max
That could be fine (though I’d prefer to be able to specify stuff on an image by image basis if I want, but still, could be okay). But I’m not sure how I would specify a particular image’s class in Ulysses or Ghost when I want to resize it.
btw one of the suggestions in the “How to Style Images With Markdown” article is “Abuse Image Attributes As CSS Selector Targets”, which I think is what that script I pasted earlier is trying to accomplish. Specifically it’s relying on using (abusing?) the alt attribute.
I think Elliot meant: If you wrap the image in a div (just put HTML directly inline in your md file) then you can either use a class like <div class="blah"><img ... /></div> or put styles directly in the div like <div style="width: 150px"><img ... /></div>. (I realize the image is shown as an image and not HTML, just put the opening div tag above it and the closing div tag below it)
if you use classes, you could have 1 class or 500 depending. if you want to do it per-image then you can do inline styles like the second div example.
You’d just put the div tag around it. here’s a mockup in mspaint (pretend I took a screenshot of ulysses)
Granted, that might not work (could break when uploading to ghost or something), but that seems like a pretty easy way to do it. note: you can add css classes and inline styles at the same time, tho you don’t need to if you just want to set the width.
Oic. Thx. Yeah I tried using a div to style a single image in ulysses using the “raw source” syntax they have. It worked on the local preview of a ghost export on ulysses, but didn’t work on the live site. A few ulysses to ghost things seem broken. Maybe some other styling was overriding. I’ll investigate more tomorrow
So at the moment I’m just trying to test whether I can use divs to make style changes at all in the Ulysses to Ghost pipeline before I try to figure out a better/more organized way to handle changes I might want to make.
Here is what my Ulysses test document for exporting looks like on the editor end (the ~ is Ulysses syntax for raw source, meaning HTML or other such things)
First, as a baseline, I exported to regular HTML, just to make sure I had the syntax right and that I could get it to be applied in any context.
This test was successful - the div shrink the size of the image. Here’s a screenshot of the HTML in the test document
It’s not operating as intended on the Ghost blog though.
in fact i’m not seeing “my” div showing up there at all. hmmph. is it getting filtered out somewhere?
o weird. can u get any raw html to work? what about html on its own line without the raw html markup?
