Community Forums › Forums › Archived Forums › Design Tips and Tricks › Styling Featured Image as a div background
Tagged: background div, code, featured image, front page
- This topic has 5 replies, 4 voices, and was last updated 11 years ago by
warois.
-
AuthorPosts
-
May 27, 2013 at 6:52 pm #42843
Riavon
MemberAs usual, I'm stuck on a PHP/code issue, after searching and trying different things for several hours I'm hoping a Genesis code guru can show me the (probably very simple) solution that's eluding me.
I've successfully created a new page template that works fine to place the "Featured Image" where I want it before the content-sidebar-wrap using this:
/* Template Name: Featured Image at Top */ ///Add featured image at top of page */ remove_action( 'genesis_after_post_title', 'the_post_thumbnail' ); remove_action( 'genesis_before_post_title', 'the_post_thumbnail' ); add_action( 'genesis_before_content_sidebar_wrap', 'the_post_thumbnail' ); genesis();
But, I need for the image to be placed as a background image inside a div "page-top-featured-image" which I've got styled in my CSS to background-size:cover so that the image takes up the full width of the 100% wide div. The way it is now of course just places the featured image at the actual image size. I've searched high and low and I've tried several different things, and I think I need to put something like
<div style="background: url('<?php wp_get_attachment_image_src(); ?>');">
in here somewhere, somehow. But I stink at PHP and coding, so unless I can find the exact thing I need, I get stuck. I'm sure it's so simple but after spending all day on this, my eyes are crossed. All I want to do is copy/paste the lines of code I need into this and get to work on the rest of the stuff on my list for this project.
Any help is greatly appreciated!
Twitter: @riavonentprises
May 28, 2013 at 4:47 pm #42972cehwitham
MemberThis is untested but add something like this to your template file. You'll want to remove your previous code and remove the add_action you mentioned above.
`
ID ) ){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '';
echo '#page-top-featured-image {';
echo 'background-image: url(' . $image[0] . ');';
echo '}';
echo '';
}
}
add_action( 'wp_head', 'background_featured_image');
?>
`What this does it checks that the post has a featured image, then finds the image ID for the full size image then gets the URL of the full size image. Then it echos out style tags into the section of the page to set the background image of your div.
Let me know how you get on and if you can provide a link, I'll check it. (it's late and I'm sleep deprived after 2 #WP10 meetups yesterday.
NB: I've presumed you're Div has an ID of page-top-featured-image not a class of page-top-featured-image is this correct? If not amend the selector to a . instead of a #
Chris
Twitter: cehwitham Web: cehwitham.com
May 28, 2013 at 4:49 pm #42973cehwitham
MemberThe code tags seem to have messed it up a bit. I've pasted the code into a gist here:
https://gist.github.com/anonymous/5666744
Twitter: cehwitham Web: cehwitham.com
May 29, 2013 at 5:33 am #43041Riavon
MemberThanks so much for your help. It's especially appreciated knowing that you're sleep deprived! I plan to implement this later today, and when I do I will be sure to follow up to this post and let you know how it works out. 🙂
Twitter: @riavonentprises
February 9, 2014 at 9:53 am #89490amymasson
MemberThanks for this! Was just what I was looking for!
April 11, 2014 at 12:07 pm #99715warois
MemberHello there,
big thanks to cehwitham. I am stuck with a similar problem and thought I found the solution with the above mentioned code, but it doesn't seem to work for my problem without altering it.
I am also trying to display the featured image as a background image, but on the front page for each post, not within the single post. A good example of this is the homepage of the theme "The Writer".
I did find this approach by mattspaeth in this forum, but this creates a new div with the background instead of changing the background image of the existing one.After four days of trying and searching I am frustrated and hoping somebody could help me with this last step.
Thanks a lot in advance!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.