WordPress.org

Forums

[resolved] Posting featured image to background with PHP? (8 posts)

  1. bennettscience
    Member
    Posted 2 years 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 http://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: http://devpress.com/themes/good/

    Original thread: http://wordpress.org/support/topic/unique-header-image-for-each-post?replies=19

    My site: stories.brianbennett.org

  2. graphicgeek
    Member
    Posted 2 years ago #

    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
    
    ?>
  3. bennettscience
    Member
    Posted 2 years ago #

    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,

  4. Kolokial
    Member
    Posted 2 years ago #

    It would need to go in the header.php. After your styles.css is loaded.

  5. bennettscience
    Member
    Posted 2 years ago #

    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 ?>
  6. alchymyth
    Forum Moderator
    Posted 2 years ago #

    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

  7. Kolokial
    Member
    Posted 2 years ago #

    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');

    }`

  8. bennettscience
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic