Adding inline images between the text of your ghost(pro) blog posts

During the writing of my first blog post I hit a bump on the road. I was trying to insert a very small image in the middle of my text. Actually it was just an icon. It was the default favicon - default favicon of ghost - of a new ghost blog. It looked fine in the editor. But when it was published it jumped to the next line, which looked awful:

favicon of peterdaugaardrasmussen.com

But I knew enough about mark up and styling, to know that this was not the default behavior of an image. Even though I understand why the default is set to this, I still wanted to be able to inline images. So I decided to come up with a solution for this and share it. This solution requires some editing of your current theme.

1. Getting your current ghost theme

First of all, we will need to do some changes to your theme. In order to do this you will need your current theme. If you are having trouble finding your ghost theme - please check this post on how to get it.

2. Creating a new stylesheet

In order to avoid doing changes to the styling of your current theme, we will create a new stylesheet (a .css file). Open up your theme folder. Here you will find a folder named assets and inside this a css folder. In the folder you will see one or more "css" files. Now we are going to create a new css file. Call it additions.css or whatever you feel like - as long as it has the .css extension. You can eventually copy one of the css files in the folder.

Note: The location of your stylesheets (css files) might be different for your theme, but usually it is within assets/css.

3. Adding some code

Now open up your new file in any text editor. Make sure it is empty and add the following css code:

.post-content .inline-image img{
       display: initial;
       max-width: initial;
       height: initial;
       padding: initial;
       position: initial;
       left: initial;
       -webkit-transform: initial;
       -ms-transform: initial;
       transform: initial;
}
@media only screen and (max-width: 500px){
	.post-content .inline-image img{
		width:initial;
	}
}

This code resets the styling of an image. If it is surrounded by the class inline-image. This will be used in step 5.

Note: Your stylesheet might be different if you have chosen a custom theme. If my guide does not work for you. Then please contact me and tell me your theme, I will then update the guide with your settings. Note, if you surround the above in style tags <style> </style> you can add them directly to your markdown posts, but you will have to repeat it for every post.

4. Referencing your new stylesheet

In order to make the browser pick up your changes, we will have to reference our new file. In the root of your theme folder you will find several files. If you are able to see their type you will see they are "hbs" files. These are files containing the mark up for your website - they are the structure. You should have a file named default. Inside you will see a line similar to this one (probably around line 18): <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />. Add the following code right before that line:

<link rel="stylesheet" type="text/css" href="{{asset "css/additions.css"}}" />

You will notice that additions is the name of the file we created earlier. Save the file.

5. Using your new feature

Now you have to upload your changed theme. Zip the whole theme folder, and follow this guide to upload it.

Normally when adding an image in a post. You will use mark up similar to this: ![default favicon of ghost](/content/images/2015/12/favicon.png). In order to add an inline image you will have to surround this with <span class="inline-image"> and </span>. Which means the code you will use will look somewhat like this:

<span class="inline-image">![default favicon of ghost](/content/images/2015/12/favicon.png)</span>

As you can see, we are using the inline-image class that we created earlier.

That is it!

And you're done! default favicon of ghost