Adjusting Image Sizes In Ghost

Written by Antony D'Andrea

Ghost is a relatively young blogging platform that still has a lot of rough edges and does require some 'hacking' to make things work the way that one would like.

One of the features that is currently lacking is the way we put pictures in the articles.

Articles are written in markup and to put an image in an article you simply use:

![Alt Text](path/to/image)

Ghost quite nicely has an upload box that automatically fills the path after it has a uploaded one.

The problem is that there is no way to resize the image within the article like you can on other platforms like Wordpress.

Markup does support having the image size like so:

![Alt Text](path/to/image =WxH)

But for some reason, Ghost doesn't support this (yet?).

I have found a work around, which I have been using to resize my images.

First, log onto your server and find the CSS of the theme that you are using.
The themes can be found in /var/www/ghost/content/themes and inside the folder of your theme, there should be a css folder (this could be inside a folder called assets.

Which CSS is used may vary from theme to theme, but for me, it was screen.css.

At the top of the CSS put the following code:

.image-div > img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

This basically says that whenever there is an img tag inside a block that has a class called image-div, make it take the full size of that block.

Finally, in your article, surround your image with div tags like so:

<div class="image-div" style="width: 600px;">
    ![Alt Text](path/to/image)
</div>

And put whatever you like in the style attribute for the width and height. Your image will become that width and height.

Simple! Of course, if you change themes, you will have to remember to copy across that piece of CSS.

Hopefully, there will be improvements on Ghost to handle images better, not just size, but also alignments and captions.

EDIT - 15/03/2016

It has since been pointed out to me by Patrick Olsen that this solution does not work with the Casper theme. This is because Casper has some CSS that override the rules that you create here. There are possibly some other themes that this solution does not work for also.

If you find that it doesn't work, you can use the !important key word to make sure that your CSS rules are applied over the themes rules. This only effects the class image-div so shouldn't have any adverse effects on the rest of the theme.

.image-div > img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
}

I would suggest that you perhaps only need !important on the height rules OR the width rules rather than both - it depends on the theme, so you could try either one first before doing all of them.

© 2012-2023