WordPress.org

Ready to get started?Download WordPress

Forums

Featured image as background (5 posts)

  1. Razva
    Member
    Posted 3 years ago #

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

  2. keesiemeijer
    moderator
    Posted 3 years ago #

    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>';
    }
    ?>
  3. Razva
    Member
    Posted 3 years ago #

    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? :D

  4. keesiemeijer
    moderator
    Posted 3 years ago #

    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>
  5. Razva
    Member
    Posted 3 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.