Automatic image optimisation, image galleries and more

1

Using images in Ghost just got a whole lot better with instant image optimisation, responsive image galleries and API improvements!

This is a companion discussion topic for the original entry at https://blog.ghost.org/image-galleries/
6 Likes
2

Sometime we need thumbnail size picture for the post thumnail in sidebar, footer etc. So it that possible with new update? Can you get multiple size picture url for our theme ?

3 Likes
3

No. We have plans for adding more features like this soon, but for now we have only added basic optimisation.

One step at a time :wink:

2 Likes
4

Thank you very much for this one :pray: This was definitely top of my list :heart_eyes:

Will this work on existing (published) posts, or does it only apply to new posts?

Thank you again :grinning:

Jamie

5

How does this affect external image storage tools such as S3 or Cloudinary? Looks like a cool feature, either way—this was something that previously required something like imgix to pull off by changing URL parameters.

1 Like
6

Is it possible to turn this off before image upload at this stage? It seems to be either blanket on/off.

7

You can turn off Image Optimization in your config file - see the default config file for guidance

1 Like
8

You can, yeah. Doesn’t help me much on Ghost(Pro) at this stage.

9

For Ghost (Pro) related issues, your best bet is to email them (support@ghost.org)

1 Like
10

What happens with those who use Amazon S3 or some other service where the images are saved separately.

1 Like
11

As a end-user looking at a gallery, it would be nice to be able to clic on a given picture so that it opens “full size”. Any futur feature regarding this?

Thank you!

12

This can already be implemented in the theme using JS - doesn’t need anything from Ghost

Everything works fine and is compatible with external storage adapters

13

Got it. I understand you have no plan to introduce this behavior within Casper.
Cheers!

14

Could you provide an example or a source to watch? Some of us aren’t programmers.
Thx in advance!

15

As an example you could take a look at one of our themes: Gonjiam

Let me exmplain a little how I did it.

I added fluidbox to my theme.

Then added a little piece of code to make it work:

// Make all images from gallery ready to be zoomed
$('.kg-gallery-image img').each(function(index, el) {
    $( "<a href='" + $(this).attr('src') + "' class='zoom'></a>" ).insertAfter( $(this) );
    $(this).appendTo($(this).next("a"));
});

// Initialize Fluidbox
$('.zoom').fluidbox();
9 Likes
16

That’s a super nice example <3

1 Like
17

Thx! still don’t know where to put that piece of code, but I gonna read the links and documents.

18

I just upgraded recently to 2.x and am using Amazon S3, but image optimization does not seem to work automatically. Is there some different setup that I’d have to go through? At what point do the images get optimized? I’m using ghost-storage-adapter-s3.

22

Are Image Optimisation still working in 2022? I ask because the file size of our images are still quite big after uploading them (same file size after screenshot) and are slowing down our page speeds and SEO

23

If you’re able to save file image files out as .webp format this further reduce heavily. For web I’m saving out image files and charts to 2048px on the long side the last week and the page speed is good.