Blog Header Image

Hi there,

Just to clarify, are you wanting your page header image (no content) to span across your entire screen? As of right now, the “fluid” container type only applies to content added, not a single image.

To change this, you can add this CSS:

.page-header-image.grid-container {
      max-width: 100%;
}

.page-header-image.grid-container img {
      width: 100%;
}

Let me know if that helps or not ??

Thanks for your quick reply.
I have tried out the CSS from previous posts and it did not work for me.

>Just to clarify, are you wanting your page header image (no content)
>to span across your entire screen?

I have the site width 1200px contained. I want to have header image same size as site width. So it is not entirely across the screen.

As said above, under local environment header image was picking up featured image and fitting the header perfectly. It changed after migrating on the hosting server.

Interesting, and you’re sure the image is at least 1200px wide?

Yes the assigned feature image is over 1200px wide.
Also i tried to regenerate thumbnails but this had no effect..

Hmm, super hard for me to see what’s going on without seeing the site.

Have you tried re-uploading the image?

What happens when you disable hard crop?

I just tried disabling the hard crop. The header will become full width 1200px, and height will be the maximum size of the image.

I enabled after that and gave me a small image (height 300px) again.

I can send you the url if there is a way to hide it.

thanks,

What width do you have set when hard crop is enabled?

You can send a link to [email protected] if you’d like.

It is set to 1200px width.

Did you add “px” into the value? The value should only be a number, no px.

If that doesn’t work, I’ll need to see the site.

Let me know ??

No the value is only numbers.
I have just added you as admin. Due to construction mode please login using the account sent via email.

Thanks for generous support..

Aha – I think I found the issue.

In order for the hard crop to work, you need to upload the image using the upload field above the enable hard crop option.

The hard crop won’t work if the image is using the Featured Image metabox.

I’ll look into fixing this, as it would be good if it worked with both.

Let me know ??

Under the local development (MAMP), I had not set any images above the hard crop option and it was pulling the header data from Featured Image box.

>I’ll look into fixing this, as it would be good if it worked with both.

Yes, it would be a life saver. ??

Thanks a lot for taking time looking into it.

Hmm you’re right, it’s just deciding to use the 300 height instead of the width first.

In the next version of Page Header, we moved to using the WordPress resizer instead of a third-party script – this may fix it.

If you’d like I can replace the Page Header files with the new ones for you so we can see if it fixes the issue. I would need temporary FTP access to the “plugins” folder on your site to do so.

If you’re interested, shoot me an email with login details to the same email address.

Thanks! We’ll figure this out ??

Tom,

Just sent you temporary FTP access info over email.
Would appreciate to give it a try with new version of script.

best,

Aha, this seems to be an issue with the Photon feature in Jetpack.

After a quick search, it seems Photon has a long history of funky behavior when it comes to resizing images.

I’ll take a look to see if there’s anything I can do on my end to make the hard crop and Photon compatible.