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>';
}
?>
Thread Starter
Razva
(@razva)
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? 😀
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>
Thread Starter
Razva
(@razva)
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!