Image obsolete styles

January 1, 1970

Images

The whole <figure> invocation seen at the start of this post is only valid for the content - not the hero image. The kg- parts are so labelled as future-proofing for the Koenig Editor which we may try enabling at some point (but not yet, it’s currently “dodgy as” as the kids might say—or was that last year?).

Here’s the basic pattern:

<figure class="kg-image-card">
    <img src="…" class="kg-image [kg-image-wide|kg-image-full]" alt="…">
    <figcaption>Put a caption on it.</figcaption>
</figure> 

kg-image-wide and kg-image-full need some explanation.

• By default, image widths will be capped at the column width, which is currently 800px minus 10px of margin on each side.
• Adding the kg-image-wide class stretch the image to the width of the browser (with no 10px side margins), or 950px, whichever is less.
• Adding the kg-image-full class will stretch the image to the width of the browser.

Here’s a guide to choosing which to use:

Image width

Class to use

Less than 780px

Default

Between 780px and 950px

Um… probably the default, which will limit it to 780px

At least 950px

kg-image-wide (preferably manually shrink the image to 950px wide if it’s above)

At least 1400px wide, and I just want it to fill the whole width of the screen

Okay, if you really want to: kg-image-full

Don’t use .fullWidthImage any more (it’s only for use by posts from the legacy hm blog days, before June 2018).

High-DPI images

Consider making a 2× version of the image if it’s going to be useful; for the 950×450 lead image size, that’d be 1900×900. To use it, you need to add a sizes and srcset attributes to the <img> tag, as demonstrated for each case below.

To get both images into Ghost, just upload them both, them merge their <img> tags as demonstrated. Ghost won’t get mad at you for doing this, because it takes a very simple approach to uploaded images. BTW, while on that topic, note that you can’t delete an image once it’s been uploaded. If you upload another file with the same name, it’ll turn foo.jpg into foo-1.jpg, foo-2.jpg, &c., leaving the others around for anyone inquisitive to see. So take care what you upload. (If you really need to delete an image, Ghost(Pro) support can do it.)

For kg-image-wide, where the image is 1900px wide:

<img class="kg-image kg-image-wide"
     sizes="(min-width: 950px) 950px, 100vw"
     src="/content/images/…@1x.jpg"
     srcset="/content/images/…@2x.jpg 1900w"> 

For the default style, where the image is Npx wide (update it in srcset):

<img class="kg-image"
     sizes="(min-width: 800px) 780px, calc(100vw - 20px)"
     src="/content/images/…@1x.jpg"
     srcset="/content/images/…@2x.jpg Nw"> 

For kg-image-full, where the image is Npx wide (update it in srcset):

<img class="kg-image kg-image-full"
     sizes="100vw"
     src="/content/images/…@1x.jpg"
     srcset="/content/images/…@2x.jpg Nw"> 

Unfortunately, there’s no way to record the low- and high-DPI versions of the post image in Ghost at this stage, so lists of posts (e.g. the front page) will just have one or the other. Go low-DPI on that, it’s smaller and is generally sufficient anyway.