Automatically Append Image Source Script

Themes
1

Hiya,

I am trying to setup a script that would automatically append the source of animg tag to a Cloudinary CDN fetch url within the post. Used to work on the older ghost 3 but now for some reason it doesn’t append the src.

Example

https://blog.gymstreak.com/content/img.png

Changed to

https://res.cloudinary.com/gymstreak/image/fetch/c_fit,q_auto,f_auto,dpr_auto/https://blog.gymstreak.com/content/img.png

Here is the script I used and Insert to the post

$('img').each(function(key, obj) {

            // Get the src of the image
            var src = $(obj).attr('src');

            // If the image src doesn't have http...
            //  we can assume it's a relative path
            if (src.indexOf('http') === -1) {
                src = 'https://blog.gymstreak.com/' + src;
            }

            // If the image src doesn't have
            //  cloudinary in the string
            // Make it use cloudinary
            if (src.indexOf('res.cloudinary') === -1) {
                $(obj).attr('src',
                    'https://res.cloudinary.com/gymstreak/image/fetch/c_fit,q_auto,f_auto,dpr_auto/'
                    +
                    src
                );
            }
        });
    </script>

Here’s an example page where I want the in-post image src to append

You Only Need These 3 Equipment To Build A Home Gym

I am still learning so I am sorry if it’s an obvious error

2

If you’re looking to offload images specifically from the post content to Cloudinary, you should potentially look at using a Cloudinary storage adapter like GitHub - eexit/ghost-storage-cloudinary: A fully-featured and deeply tested Cloudinary Ghost storage adapter

Docs:

1 Like
3

Thanks for that John,

I came across the cloudinary storage adapter when I was trying to setup the AWS S3 one (which was out of date). I opted out for storing the images locally and then calling “fetch” from cloudinary. I hard coded the “fetch” links within the theme hbs for the image sets provided but the post embeds need the above script.

4

Hardcoded fetch works well when coded directly into theme, with feature_images, but doing it clientside seems like it could be questionable. Browser likely downloads all the original images first, then after scripts load goes and downloads them all a 2nd time from Cloudinary.

In Ghost 4.0 we added srcsets, so now there are multiple source images rather than just one - which might be why this doesn’t work, but probably also makes the reality of this worse if it did work (not sure).

If you’ve been using Ghost for a while, just checking you’re aware that we have automatic image sizes and responsive stuff built-in now? If all you’re doing is making optimised images, you don’t actually need Cloudinary for that.

For content images it’s all done automatically. For theme assets you can define sizes and get them here:

but

If you’re all-in on using Cloudinary with your script, one thing you could try is to disable responsive images completely in Ghost using config:

5

I got hardcoded fetch for some aspects of the blog yeah and it works great. It’s more that I am trying to find a way to serve images I link within the post from the CDN and on the snippet embeds.

it’s just cloudinary automatically serves future formats which ghost can’t at the moment. I am not totally convinced that it makes a huge impact but I ll buy it.

I might just try the storage adapter method

6

Ah the infamous “y don’t u use WebP tho” LightHouse message - long may it plague us. Yeah, I hear you. I’m hoping WebP gets more widely adopted soon (super annoying to work with right now) or Google change their evaluation criteria!

7

So, performance wise, there is no need of cloudinary now, except for webp ?

8

Webp/webm (future formats) and the fact that Cloudinary is a CDN, so it’s still faster than loading for local storage

Also I found a problem with the script, I was basically loading it before loading jquery, so my bad

9

Yes you are right, but srcsets is a great improvement imo.

But as John said, your script will force the browser to download the picture from your local drive, then download the picture from Cloudinary.

I tested Cloudinary storage adapter yesterday, it works, pictures are sent to cloudinary and served from there, but i didn’t found where to add webp option.

10

I checked and the script catches the img tag before it loads the photos from local. I will leave that for now as it’s only applying it to the content within the post other than feature img.

Checkout the example config on the cloudinary adapter

 "fetch": {
                "quality": "auto",
                "secure": false,
                "cdn_subdomain": true
            }

You can add format “auto” to that or specific image/video extension as per cloudinary docs in order to request what you want