Ghost Image Output

A hypothetical scenario for clarity: One particular post looks something like this (image dimensions are of original uploaded media). This is the content which the user has defined.

• Text
• Image (500x200)
• Text
• Text
• Image (600x400)
• Text
• Image (1024x800)

Separately, the theme defines the following criteria about how it would like to display the images on the front end.

• The default size for all images in the blog content of this theme is 600x400
• The theme can display a featured image (on the homepage or in search results) this image is 100x100
• The theme has a secondary size for its featured image on a different template, which is 200x100

Installation / Image Sizes

When a theme is activated/installed, it runs a process (preferably in the background, in order of newest to oldest) to resize images to the sizes it needs.

If any images are too small (the original media size) they are left alone.

Consideration: How does this work with 3rd party image services? Do they simply mirror the local Ghost image directory?

Featured Images

What if the concept of a “featured image” is simply the first image that appears (completely optionally) in any post.

Turning the concept of the WordPress featured image on its head - rather than the user being forced to create an entity defined as a thumbnail, the theme checks for something which it can use as a featured image.

Ghost scans a post to see if an image is available to use as a featured image - when it finds one, it uses it. If no image exists in the post which meets the required dimensions - a featured image is not assigned.

Markdown

We are extending markdown to produce some new functionality with the Ghost editor. By typing the following syntax:

!image[alt text](source)

an image uploader is generated in the content preview pane. Once an image is uploaded via this upload form, the markdown is then populated with the appropriate data. Eg:

!image[bananas](http://localhost/ghost/content/images/bananas.jpg)

Consideration: Is changing the official markdown tag of ![alt](src) to !image[alt](src) worth it? The initial thinking was to differentiate between image/video/something. But it might make sense to keep the ![alt](src) syntax for any type of media which is then detected automatically.

Multiple Image Sizes

Ghost does not support dynamic image sizes within content, it also does not support images being floated around differently within text. An image is a block of media equivalent to a paragraph. The theme can style that image to fit within its design.

It would be good if themes could define different sizes of image, so that users could still display content differently.

For example, an image that fits the width of the screen (“full”)

or an image that fits the width of the content (“standard”)

Considerations:

• How could this control be achieved within the post preview UI?
  • Potentially overlaid toggle on the image preview that can switch the image between output sizes.
• How could this control be achieved (and translated) in markdown?
  • This would have to extend Markdown in a non-standard way
  • Potentially something like ![alt][size](src)
• How would we handle sizes being input incorrectly / not working / being changed?
  • Fall back to a standard image size
  • If the image is too small to be displayed at the standard image size - display the original media

[cgiffard]

Just realised you wouldn’t even need to write JS to provide basic support for it. You could easily match on a CSS attribute selector:

img[src$="#thumb"] {
    float: left;
    clear: right;
    width: 200px;
    height: 200px;
}

[JohnONolan]

Moved on so far from this already. Advanced image controls should still be a thing - but this issue is stagnant and isn’t worth keeping around. Future work/discussion can start in a new issue once we circle back around to this sort of concept (which is likely to be significantly different to things proposed here)