Calling image size in use of device size

Hi
Is there any handlebar or something that can reflect image size needed for the page.
my plan is to replace the post-card image link with a dynamic link that have the image size in order to use it with cloudinary transofrmation to load the right size image in the blog and don’t load full size 2000px image in the homepage that only need about 600px image.
for clarification I should use a link like this:
https://res.cloudinary.com/YOURUSERNAME/image/fetch/WIDTH,HEIGHT/

I need something that automatically reflect the size need for the viewer display…

Hey @moeen have you checked out our image resizing feature? Whenever you upload a feature image Ghost will create additional sizes so you can deliver the right size image for the space you’re filling. Check out the docs here:

1 Like

Thanks. I had read that doc.
Actually I use clouddinary for my image and as mentioned in the doc those size won’t work with external storage, I need something to mange the right size of the image should display to viewer .

is there any way to call image size with a handler in the theme file??

Do you mean for Cloudinary or for image sizes created with Ghost?

for cloudinary, I want create a dynamic link that gets viewer display size and export a good pixel size for images to load.

So you’re wanting to use the viewport of the users browser to determine which image size to get? This is exactly the purpose of srcset and sizes attributes for <img>, which is shown in our example in the docs. With that you’ll want to provide an array of images that fit a common set of widths that your image will be displayed at, rather than dynamically determining the exact size of their browser and loading a specific image for them

Hi.

I have a different issue, related to this post.

I’m using the Content API to manage the content of my blog built on Gatsby.
Is there a way to use the automatic image resizing for Ghost Themes for three-party sites?

Hey @alotama. Alternate image sizes aren’t available from the Content API, but for good reason. Because you’re using Gatsby to create your front-end you’re effectively opting out of using the internal Ghost theme layer, which is where different image sizes have to be defined. It wouldn’t really make sense if your internal Ghost theme, which would never be seen, was controlling your image dimensions and not your Gatsby front-end.

I’d highly recommend checking out the quality tooling available for Gatsby:



Hope this helps!

That really helps @DavidDarnes. Thanks!

1 Like