Photo by Kenny Eliason / Unsplash

Ghost - adding floating images

found Jul 3, 2023

Out-of-the-box Ghost, unfortunately, doesn't support floating (non-full width) images with surrounding text.

I found an easy solution in the Ghost forum by user Stromfeldt.

Add the following code into the code injection for the site header.

<style>
	.float-left-halffigure,
    .float-left-two-thirdsfigure {
    	float: left;
        margin: 8px 20px 6px 0;
	}
    .float-right-halffigure,
    .float-right-two-thirdsfigure {
    	float: right;
        margin: 8px 0 6px 20px;
    }
    .float-left-halffigure,
    .float-right-halffigure {
    	max-width: 50%;
    }
    @media (min-width: 64em) {
    	.float-left-two-thirdsfigure,
        .float-right-two-thirdsfigure {
        	max-width: 67%;
        }
    }
</style>

After that, you can create the snippets that can be used to style the post.

</span>
<span class="float-left-half">
<span class="float-left-two-thirds">
<span class="float-right-half">
<span class="float-right-two-thirds">

Tags