[LJWallisParticipant]

Hi, I was wondering if you could help me.

I have put an image in the header of my blog. Using this code:

.single .x-header-landmark {
margin: 0px auto 0;
height: 300px;
border: none;
background-color: #transparent;
background-image: url(“http://lolamansell.com/wp-content/uploads/2016/02/lollipops-test.jpg”);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}

However I want the header image to always be the featured image and not the same image on every blog post. So, depending on which post you’re looking at, that image will change to the featured image of that particular post.

I have attached a screen shot to help.

Many thanks

Lewis

[LJWallisParticipant]

Sorry screen shot didn’t attach as it was too large. Here it is again.

Thanks

Lewis

[Bell_LodgeParticipant]

Hi Lewis

Sounds like something I have been following and working with. Have a look here

https://community.theme.co/forums/topic/how-do-i-add-a-slider-or-photo-above-the-navbar/

Otherwise apologies for barging in..

Rick M

NZ

[RadModerator]

@ljwallis, that’s not possible with just CSS since you’re targeting a dynamic image display. But you can try Rick’s suggestion. It’s what you need but it requires PHP coding and customisation.

@Rick, Thanks for sharing 🙂

[LJWallisParticipant]

Thank you both for your help. As I’m unfamiliar with coding php I would be really grateful of a little more help. I have had a look at the link which Rick shared which looks very useful but doesn’t fully solve my problem. My questions are: How can I get a featured image in the header using php (and so it corresponds to the relevant blog post)? and How can I make sure these changes only effect blog posts and not other pages?

Many thanks

Lewis

[LelyModerator]

Hi Lewis,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Then add the following code on your child theme’s functions.php file:

function custom_post_bg_image () {

  if(  is_single() ) { 
     if (has_post_thumbnail( $post->ID  )) {
       $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); 
  ?>
  
  <style>
  .single .x-header-landmark {
	margin: 0px auto 0;
	height: 300px;
	border: none;
	background-color: #transparent;
	background-image: url('<?php echo $image[0]; ?>');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
}
 
  </style>
  <?php
}}}

add_action('wp_head', 'custom_post_bg_image');

Hope this helps.

[LJWallisParticipant]

Brilliant, that worked, thanks a lot. Now that the featured image is in the header how do I now remove the duplicate featured image that appears in the content area? See attached screen shot.

Many thanks

Lewis

[ThaiModerator]

Hi There,

Please try adding the following CSS under Customize > Custom > CSS:

.single-post .entry-featured {
    display: none;
}

Hope it helps 🙂

[LJWallisParticipant]

Thanks for your help!

[LJWallisParticipant]

Hi, I’ve got another related question. I have my blog set to 3 column masonry view and the thumbnail for the featured image is using a smaller compressed version of what I uploaded. This is fine. However, the featured image that is now in my header displays the full size version. As I’m designing the website on behalf of someone who doesn’t have photoshop, I’m expecting that they’ll be uploading images straight from their camera. This will slow down the site as the featured image in the header will be displaying an image of about 4mb which takes a while to load up. Is there a way to display the smaller compressed version of the featured image instead (basically the same image file that is used for the thumbnails which seems to be automatically created at 1184px wide)? Thanks

[RupokMember]

Hi there,

Thanks for updating. Of course you should upload optimized image and uploading directly from a camera can not be recommended by any means. You can use default image editor to resize the image and use http://compressor.io/ to compress your image.

Hope this makes sense.

Cheers!

[Author]

Posts