Using the_post_thumbnail() inside inline css

  • contactaidandelaney

    (@contactaidandelaneygmailcom)


    13 years, 9 months ago

    Hi, I want to call the the_post_thumbnail() feature image on specific page templates as a css div background. I am doing this inside my functions.php inside a child theme. I need to call a different background image inside a banner section of the page template for different pages.

    My code is: 

    function venuebanner() { ?>

<div id="banner-var" style="background: #333 url(<?php the_post_thumbnail();?> ) no-repeat center top;">
<div id="wrap" class="container">
<?php myvenue_navbar(); ?>
</div> <!--id="wrap" class="container" -->
</div> <!--banner -->

	<? }
Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael

    (@alchymyth)

    13 years, 8 months ago

    http://wordpress.org/support/topic/getting-post-thumbnail-url?replies=12

    Thread Starter contactaidandelaney

    (@contactaidandelaneygmailcom)

    13 years, 8 months ago

    Thanks alchymyth!

    That has somewhat fixed my problem, but thrown up its own set of issues. I have amended to code to set the_post_thumbnail inside a variable and I call that variable inside the css:

    function venuebanner() {
$url = the_post_thumbnail();
?>
<div id="banner-var" style="background: #333 url(<?=$url?>) no-repeat center top;">
	<div id="wrap" class="container">
		<?php myvenue_navbar(); ?>
	</div> <!--id="wrap" class="container" -->
</div> <!--banner -->

    But it has caused the rest of my CSS to misbehave; the navigation I’m calling: <?php myvenue_navbar(); ?> is acting as if it is not inside the parent div: <div id=”banner-var” >

    You can see the issue here:
    http://www.dinnri.com/wordpress/index.php/brooks-cafe-bar/

    Thread Starter contactaidandelaney

    (@contactaidandelaneygmailcom)

    13 years, 8 months ago

    Actually, on closer inspection it appears that what I had done was call the the_post_thumbnail(); rather than put it inside a variable. I amend the code and all is working perfectly. Many thanks alchymyth. For anyone interested this is my completed code: 

    function venuebanner() {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' );
$url = $thumb['0'];
?>
<div id="banner-var" style="background: #333 url(<?=$url?>) no-repeat center top;">
	<div id="wrap" class="container">
		<?php myvenue_navbar(); ?>
	</div> <!--id="wrap" class="container" -->
</div> <!--banner -->

	<? }
    Michael

    (@alchymyth)

    13 years, 8 months ago

    be aware when using php shorttags <? that they might work ok in your server, but they are not supported by all servers.

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

The topic ‘Using the_post_thumbnail() inside inline css’ is closed to new replies.