Change mirrored background image on blog posts

Home Forums Modern Change mirrored background image on blog posts

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #16439

    rod
    Participant

    Change mirrored background image on blog posts

    Resolved

    When creating a blog post with a featured image I have the problem that I get the same featured image as a mirrored background. In my case this doesn’t look good as it has text and interferes with my logo.

    Is it possible to specify a different image or a color as a background image?

    On a side note: Very well done template! Simple to the point administration and easy to setup without having to read a whole book. Top notch work!

    #16445

    Oliver Juhas
    Keymaster

    Hi,

    Thank you, I’m glad you like the theme :)

    I believe you can actually override the banner image on single post page using a banner_image custom field. Please read more in https://webmandesign.eu/manual/modern/#banner

    Alternatively you may want disable the banner on all single post pages with this custom CSS:

    .single-post .site-banner {
        display: none;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #16452

    rod
    Participant

    Thank you Oliver for responding so fast and giving a good solution. I just have one more question regarding the background banner.

    How do I make a different background banner for all my posts and a different one for all my portfolio posts?

    #16491

    Oliver Juhas
    Keymaster

    Hi rod,

    I’m not sure I understand correctly, but try to use this code in your child theme‘s functions.php file:

    function child_theme_banner_image( $output, $post_id, $key, $single ) {
    	if ( 'banner_image' === $key ) {
    		if ( 'post' === get_post_type( $post_id ) ) {
    			$output = 'YOUR_POST_BANNER_IMAGE_URL_HERE';
    		} elseif ( 'jetpack-portfolio' === get_post_type( $post_id ) ) {
    			$output = 'YOUR_PORTFOLIO_BANNER_IMAGE_URL_HERE';
    		}
    	}
    
    	return $output;
    }
    
    add_filter( 'get_post_metadata', 'child_theme_banner_image', 10, 4 );

    Best regards,

    Oliver Juhas
    WebMan Design

    #16503

    Viktor
    Participant

    Dear Oliver,

    I would like to kindly ask you, if there a quick solution to disable the mirroring of the background image? I like it as it is but sometimes text and other details look a bit silly when they get mirrored.

    I already have a child theme.

    Many thanks,

    Viktor

    #16505

    Oliver Juhas
    Keymaster

    Hi Viktor,

    You can use this custom CSS to disable mirroring (or adapt it to disable other things too):

    .not-front-page .site-banner img {
    	-webkit-transform: none;
    	        transform: none;
    	-webkit-filter: blur(10px) grayscale(100%) contrast(66%);
    	        filter: blur(10px) grayscale(100%) contrast(66%);
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #16506

    Viktor
    Participant

    Perfect. :) Thank you Oliver!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.