Home > selvabalaji > Use WordPress Post Thumbnail as Background image

Use WordPress Post Thumbnail as Background image

Now and then you need in a post or page a catchy image. For editors the thumbnail function is quite comfortable to assign an image to a post or a page. Therefore it is worthwhile to use this picture as a background image for the post. However, it is much better if the image is defined via CSS in the background and it doesn’t appear in the markup. Therefore, a small function that defines a default image and if there is a defined post thumbnail, then this will be used.

The function is only a small solution, therefore, it must be adapted and expanded to your liking. Have fun.


	
  • /**
  • * return post thumbnail inside style in head
  • */
  • if ( !function_exists('fb_background_image') ) {
  •  
  • function fb_background_image() {
  • // only frontend
  • if ( is_feed() || is_trackback() ) {
  • return;
  • }
  •  
  • // default image, when no set an post thumbnail
  • if ( !has_post_thumbnail($GLOBALS['post']->ID) ) {
  • $style = '.banner {background-image:<span class="hiddenSpellError" pre="">url</span>(\'' . get_bloginfo('stylesheet_directory') . '/images/banner.jpg\');} </style>' . "\n\n";
  • } else {
  • // get post thumbnail
  • $image = wp_get_attachment_image_src(
  • get_post_thumbnail_id($GLOBALS['post']->ID),
  • 'banner' // size for image; defined via add_image_siz
  • );
  •  
  • $style = sprintf(
  • '<!-- .banner {background-image:url(\'%s\');} -->',
  • esc_attr($image[0]),
  • "\n\n"
  • );
  • }
  • if ($style)
  • echo $style;
  • }
  •  
  • // add functions
  • add_action( 'wp_head', 'fb_background_image' );
  • add_theme_support( 'post-thumbnails' );
  • add_image_size( 'banner', 980, 350, true );
  •  

    # /**
    \n# * return post thumbnail inside style in head
    # */
    if ( !function_exists(‘fb_background_image’) ) {

    function fb_background_image() {
    // only frontend
    if ( is_feed() || is_trackback() ) {
    return;
    }

    // default image, when no set an post thumbnail
    if ( !has_post_thumbnail($GLOBALS[‘post’]->ID) ) {
    $style = ‘.banner {background-image:url(\” . get_bloginfo(‘stylesheet_directory’) . ‘/images/banner.jpg\’);} ‘ . “\n\n”;
    } else {
    // get post thumbnail
    $image = wp_get_attachment_image_src(
    get_post_thumbnail_id($GLOBALS[‘post’]->ID),
    ‘banner’ // size for image; defined via add_image_siz
    );

    $style = sprintf(
    ‘.banner {background-image:url(\’%s\’);}’,
    esc_attr($image[0]),
    “\n\n”
    );
    }
    if ($style)
    echo $style;
    }

    // add functions
    add_action( ‘wp_head’, ‘fb_background_image’ );
    add_theme_support( ‘post-thumbnails’ );
    add_image_size( ‘banner’, 980, 350, true );

    }

    1. July 27, 2014 at 8:30 AM

      If some one wishes expert view concerning running a blog after that i recommend him/her to pay a quick visit this weblog, Keep up the nice work.

    2. August 27, 2014 at 4:36 AM

      If some one wants expert view regarding blogging afterward i propose him/her to pay a visit this webpage, Keep up the pleasant job.

    1. No trackbacks yet.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: