Support » Theme: Receptar » Header Image cropped on pages

  • Resolved nisaanwaar

    (@nisaanwaar)


    Hi
    By defaul the header image is displayed on right side of all pages cropped from both sides to fit the page and hence it shows only middle portion of header image on pages.
    For example:
    http://ottutu.com/privacy-policy/

    Where can i override these settings?

    Appreciate your prompt response 🙂

Viewing 15 replies - 1 through 15 (of 16 total)
  • 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, nisaanwaar!
    Surely you are right! Technical requirements should always be studied and used! But different users will still have different screens, so you should always remember about adaptability. Moreover, the list of different devices will only expand.
    I want to try to do something with this template. And I’ll write to you about the results.
    __
    SergSmith64@gmail.com

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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

    nisaanwaar

    (@nisaanwaar)

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

    nisaanwaar

    (@nisaanwaar)

    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 2 months ago by  nisaanwaar.
    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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.

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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.

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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;
    }
    
    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    Should be fine now…

    sergsmith64

    (@sergsmith64)

    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:
    Simulate a smartphone screen

    nisaanwaar

    (@nisaanwaar)

    Thanks a lot oliver!
    Its perfect now

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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

Viewing 15 replies - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.