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.

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

Bootstrap

<div class="container" style="width: 100%;">
 <div class="theme-table-image col-sm-6">
   <img src="/content/images/2015/01/Ghostly-iPhone-App---Add-Your-Blog.PNG">
 </div>
 <div class="theme-table-image col-sm-6">
   <img src="/content/images/2015/01/Ghostly-iPhone-App---Blog-URL.PNG">
 </div>
</div>

Plain HTML/CSS

Here is some example code for how to place images next to each other using regular HTML and CSS:

Using Tables
<div id="image-table">
    <table>
	    <tr>
    	    <td style="padding:5px">
        	    <img src="/content/images/2015/01/Ghostly-iPhone-App---Add-Your-Blog.PNG">
      	    </td>
            <td style="padding:5px">
            	<img src="/content/images/2015/01/Ghostly-iPhone-App---Blog-URL.PNG">
             </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.

CSS Floats
<div class="container">
    <div style="float:left;width:49%">
	    <img src="/content/images/2015/01/Ghostly-iPhone-App---Add-Your-Blog.PNG">
    </div>
    <div style="float:right;width:49%">
	    <img src="/content/images/2015/01/Ghostly-iPhone-App---Blog-URL.PNG">
    </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.

Flex Boxes
<div style="display:flex">
     <div style="flex:1;padding-right:5px;">
          <img src="/content/images/2015/02/How-to-Install-Ghost---Homepage.jpg">
     </div>
     <div style="flex:1;padding-left:5px;">
          <img src="/content/images/2015/02/Ghost-For-Beginners---Homepage.jpg">
     </div>
</div>

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

Add Video