Docs

[jrerko]

hi,

i followed these instructions in one of your earlier posts and it works great. but it results in the image having a small white box/frame around it. how do i get rid of the frame so the image is truly full screen? also, how can i change the code so that i can set the image height?

“It looks like you want to achieve this functionality for pages. In that case, you can use following code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
$(‘.page .entry-featured’).insertAfter(‘header.masthead’);
});

link for this post: https://community.theme.co/forums/topic/featured-image-full-width-above-sidebar/

thanks!

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[jrerko]

This reply has been marked as private.

[Jade]

Hi there,

I have just checked your post pages and the parallax background image which has the title over it seems to be already implemented. Kindly let us know if you need any other help.

[jrerko]

hi,

thanks – but i’m trying to figure out how to do this with pages, not just posts.

thanks!

[Lely]

Hi There,

By default, pages doesn’t have featured image. To achieve this please add the following code on your child theme’s functions.php file:

function x_featured_image_on_page ( $content ) {
  if ( is_page() ) {
  $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ) ;

  echo "<div class='page-feature-image' style='background:url(".$background[0].");'>". get_the_title()."</div>";
  }
}
add_action('x_after_view_renew__landmark-header', 'x_featured_image_on_page');

Then add the following CSS to on Appearance > Customize > Custom > Edit Global CSS:

.page-feature-image {
    padding: 200px 0;
    text-align: center;
    font-size: 50px;
    color: #fff;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Feel free to adjust the values.

Then edit the page and add featured image.

Hope this helps.

[jrerko]

hi,

i did what you said, but it doesnt seem to be working.

sorry, i’m new at this.

i didnt have the functions.php file in my child directory, so i created the file and added the code. is that an error?

do i have competing CSS that is interfering?

also, the text isnt showing on the page.

appreciate your help!

[Rue Nel]

Hello There,

I am another staff checking on this thread! I could not see that you have added the given code in your child theme’s functions.php file. I looked around and tried to figured out how did you accomplish the featured image layout in your single blog post. Maybe with some a little tweaking, you can also do the same for the pages.

If nothing else works, would you mind providing us the ftp login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your credentials, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– FTP Hostname
– FTP Username
– FTP Password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[Author]

Posts