Header Image width – 1180×196 gets cropped to 960
-
Hi, I’m taking over support of my HOA’s web site & I’m new to WP. The developer used the graphene theme, I’m now working at a site update. (Questions about colors will probably follow!)
My current page width is 960, I’m changing it to 1180. Current header image is 960×198, I’ve got a new image at 1180×198. But I can’t get that new size to “take”, WP & Graphene insist I crop the image to 960.
So the new header image displayed has my 960×198 image, and fills in the right-most 180 px of space with the background image.
Settings:
graphene options => display => header image height => 198
graphene options => display => column width
container: 1180
two-column-mode: 860 & 280
three-column-mode: 220 & 680 & 220
header => header-image => add new image
This above workflow suggests an image size of 960×198, I selected a new image which is 1180×198, it uploads but insists I crop the image to 960 width. If I cancel out, the image is in the media library, so I re-enter the header settings, select the image out of the image library…and it still only gives a “select and crop” option, and the crop tool does not allow me to go above 960.
You can view at: http://www.rowleydowns.com (and BTW yes I see my slider images also need resizing, the “tile” effect there isn’t what I want..)
Any suggestions appreciated, thanks.
Tom
Trying to get the link above to work right….let’s try again: rowleydowns.com
sorry for spamming here, I’m trying to edit the original post, but the board keeps adding these as replies. hmm.
Mod
I edited your original post to correct the link.
When you say
container: 1180
two-column-mode: 860 & 280
three-column-mode: 220 & 680 & 220Are you entering these values manually or are these the results of using the sliders?
Have you tried deleting the old header image from the media gallery?
Those settings show the changes I made, to increase the page width. It was 960 width for the container, I added 220…I also added 220 to the “main” sections to get the values shown above, in 2- and 3- column modes.
The image appearing on the website was clearly the new header image (cropped to 960), not the old one.
I went in just now and deleted all header images, included ones which were trimmed to 960 wide & had “cropped-” added to the front of original file names… Then I stepped thru the whole upload-new-header-image process again, and got the same “select and crop” option as my only choice. It appears to upload my 1180 wide file, then make a new file cropped to 960 (with “cropped-” added to the front of the file name), and use the cropped one. I can’t even change to the original file, skipping the upload, because when I do, the option is still “select and crop”, and it used the 960 wide version.
Maybe I’m missing another setting which limits width of header images to 960? Maybe this isn’t configurable, and is the true max allowed by Graphene in its current form?
I can’t find where in the WP control panels it display Graphene’s version, but the browser page when I pull up the site says this: href=’http://rowleydowns.com/wp-content/themes/graphene/style.css?ver=4.3.1′ …I think the previous developer did update WP real recently, hopefully he also updated Graphene to current version.
Thanks for any help.
Tom
The editor gets me into the theme definition, and I see this (which is the only occurrence of “960” in the file).
/* Containers
*/.container_16 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
I could experiment here but Kenneth, or John (which do you go by?), maybe I shouldn’t be making this website wider than 960…I like wide monitors but you’re much more experienced as a web developer, is 960 too wide for many people’s screens? I’d value your thoughts on all this.
I set my width to 1100 first try and then I tried again at 1101, the second time I tried the wide setting took, so I suggest setting it again to your choice width plus 1 to see if that changes things
Venutius, that is extremely interesting, and led to solution to the issue.
I wasn’t sure which width you meant, but decided not to overthink it…I went into Graphene Options => Display => Columns Widths, and bumped the Container from my 1180 to 1181. Saved, retested.
The header image did span the entire 1180 wide site…however because it was still pointed to the undesired image file that started with “cropped-“, it stretched my 960 wide image. So then going to Header => Header Image, and re-selected my desired 1180×196 image file, it worked just fine. (It did again say “save and crop”, but it also said suggested image size 1180×196 where it previously insisted 960×196…and when I hit the button, it “cropped” my 1180×196 image file to 1180×196.)
Problem solved. Something a little odd here in how the Graphene customization is uploading header images but all’s well.
My thanks to both of you.
Oh and yeah, one funny thing…there’s still a 1-pixel wide strip on the right side of the banner, with the background image tiled into it. no big deal but that’s where the 1181 container is wider than the 1180 wide image.
…and one last tweak…after I successfully got the new header image to load by setting container to desired length plus one (ie, 1181), and the image was displaying with a 1 pixel wide extra background image, I reset the container to 1180…and no more 1-pixel background down the right side.
Hopefully this discussion thread is not too confusing, and other readers can figure out how to set up a header image wider than 960. Basically, get into Graphene’s column width customization settings, make the container one pixel wider than what you really want, load your header image, and then reset that container to your desired width.
Viewing 10 posts - 1 through 10 (of 11 total)
- 1
- 2
- You must be logged in to reply to this topic.
