Posting featured image to background with PHP?

  • Resolved bennettscience

    (@bennettscience)


    11 years, 5 months ago

    Hi all,
    I’m trying to get my WordPress posts to take the featured image (if there is one) and display it as an image across the top of the post, much like as done on https://www.medium.com.

    I’ve been searching and searching, and I found this piece of code:

    <?php
if(is_single() & !is_home()) {
  $myfield = 'header-image'; // Change this to the name of the custom field you use..
  $postimage = get_post_meta($post->ID, $myfield, true);
?>
  <style type="text/css">
  <!--
    .header-image {
        border:none;
        color:black;
      <?php
      if($postimage) { // If the field has a value.. set background image using value...
      ?>
        background-image: url(<?php echo $postimage ?>);
      <?php
      } elseif(!$postimage) { // If no value
      ?>
        background-image: none;
      <?php
      }
      ?>
    }
  -->
  </style>
<?php
}
?>

    but I can’t seem to get it to work. I’m not as familiar with PHP as I am with HTML and CSS, so if someone could help me make the link, I’d really appreciate it.

    Good theme: https://devpress.com/themes/good/

    Original thread: https://www.ads-software.com/support/topic/unique-header-image-for-each-post?replies=19

    My site: stories.brianbennett.org

Viewing 7 replies - 1 through 7 (of 7 total)

  • 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

?>
    Thread Starter bennettscience

    (@bennettscience)

    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.

    Thread Starter bennettscience

    (@bennettscience)

    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="https://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;

    https://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');

    }`

    Thread Starter bennettscience

    (@bennettscience)

    I just got it. @alchymyth was right…I was calling the wrong CSS. Thanks, both, for your help. I really appreciate it!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Posting featured image to background with PHP?’ is closed to new replies.