Community Forums › Forums › Archived Forums › General Discussion › How to set post featured image thumbnail as background image correctly
- This topic has 7 replies, 3 voices, and was last updated 4 years, 9 months ago by
hariteja922.
-
AuthorPosts
-
August 20, 2018 at 7:47 am #222637
Moose2.0
MemberSo i have a bit of code that draws in the featured image from a post and makes it the background image for that individual post, but the issue is its just repeating same image across all posts instead of each post being its own image:
add_action( 'wp_head', 'set_featured_background', 99);
function set_featured_background() {
if ( has_post_thumbnail() ) {
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
?>
<style>
.has-post-thumbnail {
background-image: url('<?php echo $featured_img_url ?>');
background-size: 100% 100%;
}
</style>
<?php
}
}And ive tried a few different variations but it always jsut finds the most recent posts image and uses that across all posts. Do i need to be trying to put in a check to make sure it does the same thing every unique post. For example: If this post has a unique ID find its thumbnail image and apply as a style. Or is it because im trying to add it to the css class has-post-thumbnail which is applied to all posts? [that have a thumbnail]
As a note i am using Genesis grid by Bill Erickson, but it doesnt make a difference if its on or off.
http://www.visualiseitinprogress.co.uk/WhifflerCarCentre/wordpress/extras/blog/August 20, 2018 at 8:15 am #222639Brad Dalton
ParticipantThis tutorial may help https://journalxtra.com/wordpress/quicksnips/use-wordpress-featured-image-post-page-background-picture/
Also note, you could use the wp_add_inline_style function built into WordPress for the CSS.
August 20, 2018 at 8:45 am #222640Moose2.0
MemberCheers for the response, that was the link i used to start off unfortunately!
August 20, 2018 at 9:34 am #222642Brad Dalton
ParticipantBased on my testing, the code you posted works, however, you can add a conditional like this :
if ( ! has_post_thumbnail() OR ! is_singular( 'post' ) ) return;
And remove one of the closing curly brackets.
Or code it like this :
if ( has_post_thumbnail() && is_singular( 'post' ) ) { return;
Note : For every opening bracket, you need a closing one.
This assumes you only want to use the featured image on single posts.
Then you'll need to code the output for wp_add_inline_style. Step 2 on this tutorial will get you started.
August 20, 2018 at 8:39 pm #222645Brad Dalton
ParticipantSorry, the 2nd line is wrong, i forgot to remove
return;
Should be:
if ( has_post_thumbnail() && is_singular( 'post' ) ) {
August 21, 2018 at 2:41 am #222652Moose2.0
MemberOnce again, very much appreciate the response. i will have to look into inline styling. Is there then no way of doing this without doing that then? [inline styling]
August 21, 2018 at 4:28 am #222653Brad Dalton
ParticipantYour code will work, however there's generally more than one way to write the code.
August 25, 2018 at 3:33 am #222716hariteja922
MemberUnder Setting -> Media Settings, you can specify the dimensions of the thumbnail that you want to use in your theme. Also, you can check or uncheck the crop option.
In your case, you would have to uncheck the crop option, so that WP doesn’t crop the thumbnail-images anymore. -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.