I’ve always liked the way Dave Winer includes occasional small images right-aligned on scripting.com. Example:
What’s the best, easiest, fastest way to code that on a micro.blog hosted blog, for a person like me who has almost no CSS skills? I can resize the images myself–what next?
Thanks!
Hi Mitch,
In general, if you have an image in the post as html, say: <img src="yourimage.jpg />", you could just add style=“float: right; height: 300px; width: 300px; margin-left: 35px;” or similar.
So the end result would be something like <img src="yourimage.jpt" style="float: right; width: 300px; margin-left: 35px;" /> Change the image width to match the ideal end result 
Thanks! Is it necessary or helpful to specify the image width, if the image is already the width that I like?
If the image is already resized to wanted dimensions, no need to specify the width I think.
Although, quite many themes have some predefined styles to images, like width: 100%; max-width: 100%; height: auto; In that case, you’d still need to overwrite at least the width with your preferred size for the floating image. Maybe just create a .floated-right class in your micro.blog theme CSS, put the wanted styles there and then use that whenever you’d like to float a particular image on post.
Oh, and if course there’s retina displays, which might make the small image look blurry if the original image is not large enough. But that’s a whole another conversation again 
Thanks, Juha. I’m trying the following code in the Alpine theme and it doesn’t work. The image shows up as full-size below the paragraph.
<p><img src="https://mitchw.blog/uploads/2023/9483bcbe8a.png" style=“float: right; height: 200px; width: 200px; margin-left: 35px;” alt="Goofy cartoon mailbox" />Mimestream has been in beta and free-to-use for years. I’ve been using Mimestream for most of that time. Now, Mimestream exits beta and gets a few juicy new features for organizing multiple accounts, muting some accounts at scheduled times (for example, if you’d like to mute your work account during personal time), configuring filters and more. Templates with variables will be useful for people who repeatedly send versions of the same email, such as customer support. And a menu bar extra lets you check to see what’s new without opening the app. <a href="https://launch.mimestream.com/blog/whats-new-in-1.0">More here</a>.</p>
What am I doing wrong? Do I need to create .floated-right class in the microblog theme CSS? If so, what’s the precise code I want to put there?
The HTML standard only allows apostrophe (') and quotation mark (") when specifying attributes. So when a browser sees the left and right double quotation marks (“ and ”) it panics and doesn’t know what to do. If you replace them with ordinary quotation marks, it should work.
Note: this is a reason a lot of editors that do “nice typography” can be bad choices for writing code. I’d be curious where you typed this-- your quotes were probably proper " but converted to the curly quote by your editor.
Thanks, @sod and @jsonbecker .
I have an update. I realized I was failing to use an important tool I have in my toolbox. I have MarsEdit, and used that to compose the post. But I was using plain text mode to edit the image. So I switched to rich text, then back to plain text, and got this:
<p><img style="float: right;" title="" src="https://mitchw.blog/uploads/2023/9483bcbe8a.png" alt="Friendly, goofy cartoon mailbox generated by Midjourney" width="100" height="100" border="0" />Mimestream is a native Mac app for accessing Gmail. It gives you Gmail’s advanced capabilities, including Priority Inbox, categories, and labels, in an app that looks and works like a native Mac app. </p>
That was perfect in MarsEdit preview–but when I checked it on Micro.blog, the image was full-sized and the text did not flow around it.
I suspect, as @juha suggested, that something in my theme, which is Alpine, was overriding my image layout settings and forcing the image to be full-sized. Can either of you suggest a fix here? Or perhaps @manton can–he is the author of the Alpine theme.
I typed the text in either Drafts or Obsidian. I know Obsidian changes straight quotes to curly quotes, and I suspect Drafts might as well.
By the way, Alpine is an excellent theme. I’ve tried a couple of others over the past few weeks, and they are also excellent themes, but Alpine has a very nice design and lovely affordances for microblogging that I now appreciate more. Most notably, I like the white space between entries, with the small date, as well as the way the link text is slightly larger, making it useful as a fake article title for linkblog posts.
By the way, one problem I run into often with Marfa and Alpine themes is that by default it wants to make your photos full-width. You can override this per image with max-width, like this:
<img style="float: right; max-width: 200px;" src="…">
I expect that will fix alignment problems if it’s still not working for you. Without constraining the width, the image is probably too big to wrap text around.
I’ve been thinking maybe we should remove that default. Happy to hear feedback.
What @manton suggested there above should work Also, adding margin-left:35px; or similar might also make the image have bit more breathing space (not too crammed next to the text).
If you want to have the class with those style definitions and then just use the class-name on images when needed, Design → Edit CSS is a good place to put it. This should do it:
.float-right-img {
float: right;
max-width: 200px !important;
margin-left: 35px;
}
I hope these help!
@juha I think I want to have a class with those style definitions. But how do I then use that class when composing a blog post? Because I also want to be able to run full-width photos.
This is very helpful. Thanks to you all.
Once the class is defined in the CSS, you should be able to use that class only when needed, in other cases, the default theme styles should take care the images being full width.
So if you have a post with multiple images, edit the ones you want to float like: <img src="floating-image.jpg" class="float-right-img" alt="I'm a floating image" />
Then, for the ones you want to be full width, just include them as usual in the post. Those should work as full width then.
Ps: Just installed MarsEdit yesterday myself. Looks like a wonderful tool! The Micro Camp demo about it was wonderful 
I’ll give this a try–as soon as I dig myself out from under deadlines. Thanks again, all.
I’m still on deadline but I needed a break so I tackled this. And got it working! Huzzah!
Example:
https://mitchw.blog/2023/05/22/mimestream-exits-beta.html
I did find a small bug in @juha’s code–a missing equal sign after the src. The correct code should be:
<img src="floating-image.jpg" class="float-right-img" alt="I'm a floating image" />’
Thanks again to all of you!
Woohoo, looking great! 
And sorry about the typo there, good that you catched it (fixed it now from my previous comment)!
No worries about the typo. Made me feel smart and stuff to catch it.
nice job there Mitch - and good question … like you I have often wondered - but then done nothing about it … maybe I will now, because I too like the idea … I don’t like the images Dave uses particularly - but the idea - very much so.
great help @juha - thankyou - learned something new today. I tried it and got it working first time
Quick side question … on the home page - https://john.philpin.com
… it seems to have put some white background behind the image - is that the template I am using? Is it possible to fix that? (my knowledge in these matters is somewhere south of Mitch’s 
)
It’s because you have .post > * { padding: 0 1em; }
That’s adding padding on the left and right for every element inside a post class, which is aggressive and would include imgs.
I think you can override this with a more specific selector .post > img { padding: unset; } which will remove the padding for images within a post class.
Thankyou Jason - that did it … and THEN (because there is always something - right?)
Now the image butts right up to the white/yellow border - have tried to add back the padding right to give some air back - but no dice. Love any thoughts and help you might have?