Place Images Side By Side In a Post

If you have a blog post that has a lot of images, some times it is nice to palce the images side by side. Currently there is no way to do this with what is built into Ghost. With a little HTML/CSS in your post you can place images side by side.

In order to get your image urls, in the editor, click on the + icon, then Markdown. Inside the markdown box, click on the Image icon and upload the image. There you will see the url of the image you uploaded. Now, on a new line, click on the + icon again and then hit HMTL. That is where the code below will go with your image url being used.

side-by-side

Here are some examples showing how to do this with flex boxes, css floats, tables,and Bootstrap:

Flex Boxes
<div style="display:flex">
     <div style="flex:1;padding-right:5px;">
          <img src="[your image url]">
     </div>
     <div style="flex:1;padding-left:5px;">
          <img src="[your image url]">
     </div>
</div>
CSS Floats
<div class="container">
    <div style="float:left;width:49%">
	    <img src="[your image url]">
    </div>
    <div style="float:right;width:49%">
	    <img src="[your image url]">
    </div>
</div>

With the styles, I used a width of 49% to allow for there to be a little space between the pictures so they don't touch. I also floated one picture to the left, and one to the right.

Using Tables
<div id="image-table">
    <table>
	    <tr>
    	    <td style="padding:5px">
        	    <img src="[your image url]">
      	    </td>
            <td style="padding:5px">
            	<img src="[your image url]">
             </td>
        </tr>
    </table>
</div>

With using the table, I added the style="padding:5px" to each <td> to add a little bit of spacing between the pictures, otherwise they are touching.

Bootstrap

<div class="container" style="width: 100%;">
 <div class="theme-table-image col-sm-6">
   <img src="[your image url]">
 </div>
 <div class="theme-table-image col-sm-6">
   <img src="[your image url]">
 </div>
</div>

Hope this helped you out! Check out our next post on how to add a video to Ghost!

Add Video