Ghost Blog Image Alignment

Its around 2:00 AM, and before I call it a day (a long day), I thought to post a quick blog on custom image alignment in Ghost Blog Platform.

Without further ado, as of Sep, 2016 Ghost doesn't support custom image alignments and ruling. It means all images in the blog are aligned default (none) and text breaks around it.

Default Alignment

It means the images are aligned with the page, and the text breaks around it. The text is above and below the image.

Left Alignment (left float)

It means the image is floating on the left side, and text content can be parallel to the images, and wrapped around it.

Similarly, the image can be right aligned (floating) as well with text wrapped around it from left. To achieve this, I made multiple classes in the custom css file.

/* Custom Image alignment */
.post-content img.seeright {float:right; margin:0 0 10px 10px}
.post-content img.seenone {float:none;}

Now, with these classes I can add the HTML in the post as <img class="seeright" src="/content/images/2016/09/img_default_align.png"> instead of
![](/content/images/2016/09/img_default_align.png) which will float the image on the right and text wrapped around instead of breaking up & down. It's a quick & dirty way to play with the image alignment till Ghost supports image optimization natively.

Cheers.


❮❮ Ghost Blog and custom URL Shortening

NodeJS URL Shortener ❯❯


Rishi Narang

I'm a hacker. I find inventive/ intuitive solutions to problems. I write open-source code, help out people where I can - particularly if it involves a clever technical solution. I'm based in France.