Catch Box Theme- how do you change the size of header image

Hi,

I am trying to use the suggestions here to upload a bigger header image than 300 x125 px.

I am using catch box 1.5.1 (latest version to date).
Under ‘Theme Option’, as suggested here,I have pasted in the custom css box:


remove_filter( 'HEADER_IMAGE_WIDTH', ' catchbox_header_image_width' );
remove_filter( 'HEADER_IMAGE_HEIGHT', ' catchbox_header_image_height' );

define( 'HEADER_IMAGE_WIDTH', apply_filters( 'catchbox_header_image_width', 900 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'catchbox_header_image_height', 405 ) );

My image is 900 x 405. I can use a smaller one but 300 x 125 is too small.

However, when I upload the image via the ‘Header’ menu, it is still cropping to 300 x125 px

Have I missed something?

many thanks for your help.

MT

Hi MT,

Don’t edit anything in the latest version. Latest Version of Catch Box supports flexible header image size. Our recommended width is 300 pixels and height is 125 pixels but you can setup with any size.

As soon as you upload the header image from the Appearance -> Header. You will go to Crop Header Image Screen. Where you can extend the height and width with the help of your mouse drag. After you get the size you want. Then click on “Crop and Publish” button. That’s it.

Regard,
Sakin

thanks Sakin.
for some reason, this seems to work today.
yesterday I was doing what you suggest, ie just load the image, and it was not showing the full blown image but cropping for me.

You all seem to be able to upload images so could any one help me please. I’ve upload an image into the right folder and can see it in the C panel but cannot access it or see it in the header image on live preview.

Hi Sakin,

I followed your suggestion to MT about not changing the code and instead Crop the Header Image Screen. My image size is 525 px x 228 px and it STILL shrunk it down to fit the 300×100. Is there a way to maintain the original size from 525 x 228?

@yorgo67: After you upload the image. You need to crop the portion you want. If you just do the save then it will crop it down to 300×100. That is why you need to select the full portion of the image that you’d like to use for the header, then click Crop and Publish.

Sakin,

When you say “crop” do you mean scale the image to the size you want? I’m totally confused on how to resize my image. :/

Hi Nailah,

You can check this https://en.support.wordpress.com/themes/custom-header-image/ . It’s just using your mouse to crop the image of the size you want.

@sakin, I also am trying to adjust the header so there is no white space around my image. I tried the CSS code you mentioned above and played with the values but I don’t see any change. I also tried webmaster1105’s code for the header file, also no change. The result I’m looking for is my current header image with no white space, so the header block takes up less space above the fold in my blog: https://heartsleevesblog.com. Thanks in advance! It’s a great theme!

Ariel

@aazoff: Hi Ariel, I look at you site and you should add the following css in “Custom CSS” box

#branding hgroup {
    margin: 0;
    padding: 0;
}

and then upload the larger header image.

Thanks for the quick reply! I just pasted that in, but to clarify: do I add that to the CSS I had before or is that all I need? Will the header space then just conform to whatever image size I use?

A related issue: when I’ve been editing the Catch Box theme today and just now when I made this change, the server seems to cut out because nothing but the front dashboard panel will load – everything else brings up a “no data received” error. Is that a problem with my host or the theme?

Thanks!
Ariel

@aazoff: This css has nothing to do with the server issue. It’s just a design modification. So, check your site. Yes, you can just remove the other custom css and add the one I gave in.

Thanks! That worked. Can you tell me the exact dimensions I’ll need to get rid of all of the white space? Sorry I’m very new at this. Is it possible to adjust the height so it’s even shorter?

Thanks again.

@aazoff: It’s total width is 1000px. Yes you can upload the image of any height.

Awesome, thanks for your help!