WordPress.org

Support

Support » How-To and Troubleshooting » Featured image as background

Featured image as background

  • Hi,
    Is it possible to set an article’s featured image as a div background withing the article/sidebar/content?
    If yes, how?
    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator keesiemeijer

    @keesiemeijer

    You can do it with inline styles inside the loop. Something like this (not tested):

    <?php
    if ( has_post_thumbnail()) {
       $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
       echo '<div style="background:url(' . $large_image_url[0] . ') no-repeat;"></div>';
    }
    ?>

    Here’s the code I need to style:

    <li class="count-<?php echo $count; ?> size-picked-<?php echo $pick_size; ?>">
      <div style="background:url(automated-link-here);">
        <div class="holder">
          <div class="post_date"> <?php echo $this->timeago(); ?> </div>
          <a href="<?php echo get_permalink( get_the_ID() ); ?>">
          <?php the_title(); ?>
          </a> </div>
      </div>
    </li>

    So “automated-link-here” should be the image from the featured image.

    Can you please give me a hand? 😀

    Moderator keesiemeijer

    @keesiemeijer

    have you tried:

    <li class="count-<?php echo $count; ?> size-picked-<?php echo $pick_size; ?>">
    <?php
    $style = '';
    if ( has_post_thumbnail()) {
       $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
    $style = ' style="background:url(' . $large_image_url[0] . ') no-repeat;"';
    }
    ?>
      <div<?php echo $style; ?>>
        <div class="holder">
          <div class="post_date"> <?php echo $this->timeago(); ?> </div>
          <a href="<?php echo get_permalink( get_the_ID() ); ?>">
          <?php the_title(); ?>
          </a> </div>
      </div>
    </li>

    Thanks A LOT for your help! But seems I’ve been to rushed with this… 🙁 The original code – from which I’ve started – was:

    <li class="count-<?php echo $count; ?> size-picked-<?php echo $pick_size; ?>">
    	<?php
    		if ( has_post_thumbnail() ) {
    		the_post_thumbnail( $size );
    	} ?>
    	<div class="post_date"> <?php echo $this->timeago(); ?> </div>
    	<a href="<?php echo get_permalink( get_the_ID() ); ?>">
    	<?php the_title(); ?>
    	</a>
    </li>

    As you can see, every thumbnail that was generated had a $size atribute. This $size was defined in the function and specified in the wp-admin widget.

    Now, the single problem is that – with keesiemeijer’s code – the background image is having the default “large” size, when it should have the $size size.

    NOTE: as you can see the divs are totally different, the original code had the image + date + title structure, and – after modifying – the structure is div with the image as a bg + date + title. So the NEW structure (with the image as bg) is the desired one, but with the problem previously stated in this reply.

    I’ve tried to replace ‘large’ with $size but – obviously – no result.

    If you can please help me finish this I will highly appreciate this!

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Featured image as background’ is closed to new replies.