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.
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 |
![]() |