Ghost Tips & Tricks

I love the Ghost blogging platform but, every once in a while, you'll come across a quirk that annoys you and makes you run to your search engine. This post is in honour of those little quirks that stumped me (a no-code person). Over time, I'd like nothing better than for these features to be natively available, and for this post to become obsolete.

Resize the Default Post Image

If you're using the Casper theme, you'll notice that the default post image size is significantly bigger than the rest of the post, causing a distraction for most readers. You can change this behaviour by injecting the following in the Settings > Code Injection > Site Header section in the Ghost admin console.

<style>
    .article-image img {
        max-height: 50vh;
        width: auto !important;
    }
</style>

Resize and Align Post Images

Often, the images you insert in a post turn out to be abnormally larger than the text, with no ability to resize them. The following hack works around the issue. Credit: wdiaz.org.

Choose the Markdown block and upload the image.

![Image Description](/content/images/2021/09/my-image.png)

Replace the Markdown code with HTML, with the appropriate CSS to reflect the desired size and alignment (center|left|right).

<p align="center">
	<img alt="Image Description" src="/content/images/2021/09/my-image.png" style="width: 300px; height:400px">
</p>

Insert a Code Block

If you want to share some code (as I did above), type ``` on a new line and press enter to get started with your code snippet.

<insert your code here...>