You’re on the right track. The problem with this code is that it is checking for a custom field instead of a featured image.
try this:
<?php
if (has_post_thumbnail()) { //if a thumbnail has been set
$imgID = get_post_thumbnail_id($post->ID); //get the id of the featured image
$featuredImage = wp_get_attachment_image_src($imgID, 'full' );//get the url of the featured image (returns an array)
$imgURL = $featuredImage[0]; //get the url of the image out of the array
?>
<style type="text/css">
.header-image {
border:none;
color:black;
background-image: url(<?php echo $imgURL ?>);
}
</style>
<?php
}//end if
?>
Ok, I see what you did in the code, now I need to figure out where to put this. Should it go in the post template where I want it to appear on the page?
In other words, if I want it before the post title, I would need to insert this chunk in the template above the title script?
Thanks for your help,
It would need to go in the header.php. After your styles.css is loaded.
Ok, tried that, tried adding new featured images, still isn’t working. Here’s my header code:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title><?php hybrid_document_title(); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
<?php
if (has_post_thumbnail()) { //if a thumbnail has been set
$imgID = get_post_thumbnail_id($post->ID); //get the id of the featured image
$featuredImage = wp_get_attachment_image_src($imgID, 'full' );//get the url of the featured image (returns an array)
$imgURL = $featuredImage[0]; //get the url of the image out of the array
?>
<style type="text/css">
.header-image {
border:none;
color:black;
background-image:url('<?php echo $imgURL ?>');
}
</style>
<?php
}//end if
?>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); // wp_head ?>
</head>
<body class="<?php hybrid_body_class(); ?>">
<?php do_atomic( 'open_body' ); // good_open_body ?>
<div id="container">
<?php do_atomic( 'before_header' ); // good_before_header ?>
<div id="header">
<?php do_atomic( 'open_header' ); // good_open_header ?>
<div class="wrap">
<div id="branding">
<?php hybrid_site_title(); ?>
</div><!-- #branding -->
<?php get_search_form(); // Loads the searchform.php template. ?>
<?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php template. ?>
<?php get_sidebar('header'); // Load the sidebar-header.php template ?>
<?php do_atomic( 'header' ); // good_header ?>
</div><!-- .wrap -->
<?php do_atomic( 'close_header' ); // good_close_header ?>
</div><!-- #header -->
<?php do_atomic( 'after_header' ); // good_after_header ?>
<?php do_atomic( 'before_main' ); // good_before_main ?>
<div id="main">
<div class="wrap">
<?php do_atomic( 'open_main' ); // good_open_main ?>
your theme (or at least the link) does not have an element with the css class .header-image
to add this ‘featured background image’ to the post title, apply the coding possibly on .single .post-title (this restricts it to single posts) and also add some formatting for the background position and repeat;
http://www.w3schools.com/css/css_background.asp
I use the below code to set a banner on the a page/post based on the featured image. I imagine you can adapt it for your needs also.
$page_object = get_queried_object();
$page_id = get_queried_object_id();
if ( '' != get_the_post_thumbnail() && !is_category() == true ) {
$imgURL = get_the_post_thumbnail( $page_id, 'full');
}`
I just got it. @alchymyth was right…I was calling the wrong CSS. Thanks, both, for your help. I really appreciate it!
