Prevent / customize resizing of `@site.cover_image`

Themes
1

Hello,
I am uploading a site cover image that is 3440px in width, in order for it to show up sharp on a 34" ultrawide screen.
Even though I’m uploading a 3440x400px image, when I open the direct URL of the image resource, it returns a 2000px wide image, in other words, ghost is resizing the image when I save it.
I do have custom image sizes in my package.json that go up to 3440px width, but I can’t see where this resizing happens…

This is how I use the image in my template:

<section class="cover cover-home" {{#if @site.cover_image}}style="background-image: url({{@site.cover_image}});"{{/if}}>
<!-- ... -->
</section>

Is there any way of preventing, or changing the target size of the automatic cover image resizing in Ghost?

2

You should be able to use a specific size with the img_url helper:

3

@vikaspotluri123 Is the issue here not with changing the imageOptimization variable to false in the configuration.production.json file, which automatically resizes images to 2000px on upload?

4

That would completely disable image optimization rather than effectively “prevent image optimization for site cover” :grin:

5

It would disable image optimization on upload, but not the img_url helper functionality (as is the way I’ve got it set up on my blog). Also, the “problem” with the imageOptimization functionality is that by default it shrinks all image uploads to a maximum of 2000px (which is what OP mentioned), which is one of the reasons for why I turned it off myself.