Header Image cropped on pages

Hi. It seems to me that everything depends on the size of the monitor and its proportions. As a result, the picture becomes vertical, then the design may be vertical or square?
—
SergSmith64

@sergsmith64
Thankyou for responding to my query, the heme is designed this way to show the header image from centre only, on page. when you haven’t selected any featured image for that specific page.
And my header image is as per theme’s mentioned requirements.
1920 640

Hi,

Where can i override these settings?

You can only apply your custom CSS code to override those. Please understand that the theme was designed that way, so there is no overriding option. If you don’t like this layout, maybe the theme is not the right one for you. Anyway, how would you like to override it?

As for image size, the theme does not use a header image there. The 1920 × 640 image size is used on front page only, in a banner slideshow. Please read theme documentation at https://webmandesign.eu/manual/receptar/#tips for more.

You can read there that the theme uses the “Large” image size for that image. So, its 960 × variable height, which means you can set it to your needs. But please note that the image will not be displayed in full all the time. This actually strongly depends on your screen resolution. The image is set to cover the area, so you won’t get any blank space on its sides.

Regards,

Oliver

Wow, didn’t expect this ‘hey please change your theme because we don’t like your query’ kind of response.

plus if you know, when we don’t set any featured image, your theme uses the header for that position to cover right area. and header is cropped from both sides.
im asking you to tell me the style identifiers to control this.
i can do the rest but i think you can provide this information rather then mentioning that i should change theme or do it myself!

• This reply was modified 7 years, 10 months ago by nisaanwaar.

Hi,

Wow, didn’t expect this ‘hey please change your theme because we don’t like your query’ kind of response.

?? Well, from your issue description I’d get the feeling that you have chosen the wrong theme. The theme was designed the way you see it on https://themedemos.webmandesign.eu/receptar/ If you want to override the theme’s default design, this is considered as theme modification (which I do not provide support for) and can actually lead to more work for you then searching for the right theme for you. And as I like to provide honest support for my theme users, I suggested you that – it’s easier way for you than overriding the theme’s code heavily. The theme was not designed to use such image type (branding presentation) in the header.

No coding solution:

The easiest solution for you would be to set the specific featured image for the affected page(s). That way you don’t have to touch a line of code and you will still display a header image on front page.

CSS solution(?):

I’m not sure what you can do with this issue with custom CSS, but the best way for you is to use your browser’s code inspector to determine the CSS you need to apply. I don’t know exactly, what you aim to do, so here is the possible selector you are searching for, with some default styles:

.entry-media {
  background-position: 50% 50%;
  background-size: cover;
}

Flexible PHP solution:

You can also set a custom header image for your front page with some coding in your child theme’s functions.php:

function child_theme_front_page_header_image( $url ) {
	if ( is_front_page() ) {
		$url = 'YOUR_IMAGE_URL_HERE';
	}
	return $url;
}

function child_theme_wp_setup() {
	add_filter( 'theme_mod_header_image', 'child_theme_front_page_header_image' );
}

add_action( 'wp', 'child_theme_wp_setup' );

You can now use a custom image on front page while the other pages will display an image you set in Appearance > Customize > Header.

For faster turnaround of the issue resolution please use https://support.webmandesign.eu/forums/forum/receptar/ in the future.

Regards,

Oliver

Hi,

Wow, didn’t expect this ‘hey please change your theme because we don’t like your query’ kind of response.

?? Well, from your issue description I’d get the feeling that you have chosen the wrong theme. The theme was designed the way you see it on https://themedemos.webmandesign.eu/receptar/ If you want to override the theme’s default design, this is considered as theme modification (which I do not provide support for) and can actually lead to more work for you then searching for the right theme for you. And as I like to provide honest support for my theme users, I suggested you that – it’s easier way for you than overriding the theme’s code heavily. The theme was not designed to use such image type (branding presentation) in the header.

No coding solution:

The easiest solution for you would be to set the specific featured image for the affected page(s). That way you don’t have to touch a line of code and you will still display a header image on front page.

CSS solution(?):

I’m not sure what you can do with this issue with custom CSS, but the best way for you is to use your browser’s code inspector to determine the CSS you need to apply. I don’t know exactly, what you aim to do, so here is the possible selector you are searching for, with some default styles:

.entry-media {
  background-position: 50% 50%;
  background-size: cover;
}

Flexible PHP solution:

You can also set a custom header image for your front page with some coding in your child theme’s functions.php:

function child_theme_front_page_header_image( $url ) {
	if ( is_front_page() ) {
		$url = 'YOUR_IMAGE_URL_HERE';
	}
	return $url;
}

function child_theme_wp_setup() {
	add_filter( 'theme_mod_header_image', 'child_theme_front_page_header_image' );
}

add_action( 'wp', 'child_theme_wp_setup' );

You can now use a custom image on front page while the other pages will display an image you set in Appearance > Customize > Header.

For faster turnaround of the issue resolution please use https://support.webmandesign.eu/forums/forum/receptar/ in the future.

Regards,

Oliver

Should be fine now…

Greetings, Oliver!
You answer so in detail nisanvaar!
I was very interested in your correspondence and your template.
I really like him. But since I love adaptive vertices,
I tried the site on the screen of the smartphone 5 inches.
At me a question: whether it is possible to increase height H = 117px for example in 2 times more,
Not spoiling other styles.
I tried to increase the width from 100% to 200% like this:
.site-banner-media: before {
Width: 200%;
}
But then <h1 class = “entry-title”>
Can move up or down.
I showed the problem in the picture:

Thanks a lot oliver!
Its perfect now

Hi,

@

In that case I think this custom CSS can help:

@media only screen and (max-width: 640px) {

  .site-banner-thumbnail {
    overflow: hidden;
  }

  .site-banner-thumbnail img {
    width: 200%;
    max-width: 200%;
    margin-left: -50%;
    margin-right: -50%;
  }

}

I will consider this to be applied in next theme update.

Regards,

Oliver

Thank you very much, Oliver! It helped me.