There is no built-in method in Ghost for floating an image and having text flow around it. It’s a significant omission, and one which they say is “too hard” and have no plans to change. OK fine, I’ll do it myself.

I found a reasonable solution in this post on the forums. Here’s how I’m using it.

Add the following to the header in the code injection area:

/* small images to float but not look stupid on mobile */
@media (min-width: 40rem) {

.float-left-half figure,
.float-left-two-thirds figure {
    float: left;
    margin: 8px 20px 6px 0;
}
.float-right-half figure,
.float-right-two-thirds figure {
    float: right;
    margin: 8px 0 6px 20px;
}
.float-left-half figure,
.float-right-half figure {
    max-width: 50%;
}
@media (min-width: 64em) {
	.float-left-two-thirds figure,
	.float-right-two-thirds figure {
    	max-width: 67%;
    }
}

}

Then, in a post or page, I add an HTML block before the image card I want to float (e.g to the right).

OK, it’s happening again. Hugo broke my site for the second time in two updates. I got mad (again) and decided it was time for us to break up.

I dusted off the version of the blog that I’d built using Eleventy and started working on getting everything updated. Except it didn’t work. I don’t know what I was missing or what had changed since I stopped using it, but things were broken. I then decided that I would start fresh with Eleventy’s base blog repo. That was also a mistake. After several hours, I had built an ugly blog, without some of the features I’d wanted. I gave up.