How to use `responsive image sizes` with gatsby theme

Developer help
1

In the versions of Ghost < 3 we used Handlebars theme that had responsive image sizes featured described in this blog post. In the Ghost version >= 3 we’re using Gatsby theme. I’m wondering if this featured is still supported? I’ve explored gatsby-starter-ghost and here it seems that this feature is not used:

<Layout>
	<div className="container">
		<article className="content">
			{ post.feature_image ?
				<figure className="post-feature-image">
					<img src={ post.feature_image } alt={ post.title } />
				</figure> : null }

Gatsby has gatsby-image functionality, but I’ve only found its usage in gatsby-ghost for local images. I’m wondering if it can be used for images uploaded by writers when saving articles?

2

The best way to resize images coming from the Ghost Content API is to use a service like Cloudinary, in a similar fashion to handlebars theming:

Exposing resized images directly in the API has been discussed before, but at the moment Cloudinary is best suited to the task :slight_smile:

3

I see, thanks. Actually, I’m using Cloudinary now and I want to move off this service because it’s quite expensive. For 1M views the price is hundreds of US dollars. It counts cached images as bandwidth, while if I embed pre-processed images directly as it was with handlebars they are cached and served for free with Cloudflare.

4

If you use the eleventy starter, it serves the images right from netlify (auto copies) from server. Quite speedy. I’m playing with it over at bershatsky.net

1 Like
5

Thanks bershatsky, but I’m using gatsby :slight_smile:.

@DavidDarnes as I understand, one way to go is to extend GraphQL nodes of Ghost posts created by gatsby-source-ghost plugins?

6

Yes, but as shown in the linked GitHub issue the API doesn’t as yet provide additional image sizes for GraphQL plugin to get.

@bershatsky does raise a good point. You only need Cloudinary to process the images, you could then copy those images to the same place you’re hosting the Gatsby install. Either that or try out alternatives that are more cost effective. Have you checked out Netlify Large Media?

7

@DavidDarnes

Yes, but as shown in the linked GitHub issue the API doesn’t as yet provide additional image sizes for GraphQL plugin to get.

Yeah, I know, I meant that I could generate sizes on the gatsby side querying for nodes, e.g. create transformer plugin that would extend source nodes created by gatsby-source-ghost.

You only need Cloudinary to process the images, you could then copy those images to the same place you’re hosting the Gatsby install.

Thanks for the idea, I’m not sure though how to make the process automatic.

I also just checked, Ghost3 still generates different sizes for images. At this point it generates them on demand when certain size is requested from the browser, and it uses the configuration available in package.json of the default Casper theme. If there was a way to enable (pre)generation when an article is saved, I could then simply generate URLs to the respective image in the sizes folder inside content/images. Do you know if that’s possible to enable sizes generation on save and not on request?

8

Images in Ghost are generated whenever they are needed. They are heavily coupled with the handlebars theme layer because we can’t guess what image sizes are required for an external application, hence why the sizes are configured in the theme package.json.

I would strongly recommend investigating ways in which you can use Cloudinary as just image size generation and programmatically clone them to your existing hosting platform. Or check out Netlify which doesn’t charge for image requests but for image generation instead.

I’ve not tried this plugin myself, but this Gatsby plugin apparently uses Cloudinary for resizing and copies them to an assets directory in the Gatsby build: @dylanvann/gatsby-transformer-cloudinary | Gatsby

1 Like
9

@DavidDarnes, OK, thanks for your help!

1 Like
10

Thought I’d drop this article in that Cloudinary just published, Gatsby plugins for Cloudinary:

1 Like
11

Cool, thank you, I’ll definitely read it

1 Like
12

This is something i want to do too - i’ve added a solution here to download all the images from the demo site feature_image field and create a new node so you can use all the lovely childImageSharp stuff with gatsby_image. I think it would be very useful to integrate this into the source plugin - this would be fairly normal in other plugins (eg wordpress/drupal/sanity etc).

See my solution here:

Not saying its the best way of solving this, something much more global would be good.