How can I show WP blog posts' images on an HTML/PHP page?

user_59910105
May 14, 2023
122 views
0 votes
2 Answers

Below is my code to display recent posts from blog in html/php page

    <div class="row">
     <?php
    
        include('blog/wp-load.php'); 
        $recent_posts = wp_get_recent_posts(array(
          'numberposts' => 3,
          'post_type' => 'post',
          'post_status' => 'publish'
        ));
        foreach($recent_posts as $post) {
          echo '<div class="col-lg-4">';
          echo '<div class="blog-entry">';
          echo '<a href="', get_permalink($post['ID']), '" style="background-image: url(images/BlogImg.png);"></a>';
          echo '<div class="text">';
          echo '<div class="meta">';
          echo '<div><span class="fa fa-calendar-alt"></span>', $post['post_date'], '</a></div>';
          echo '<div><span class="fa fa-user"></span>', $post['post_author'], '</div>';
          echo '<div><span class="fa fa-comments meta-chat"></span>', $post['comment_count'], '</div>';
          echo '</div>';
          echo '<div class="desc">';
          echo '<h3 class="heading"><a href="', get_permalink($post['ID']), '">', $post['post_title'], '</a></h3>';
          echo '</div>';
          echo '</div>';
          echo '</div>';
          echo '</div>';
        }
    
    ?>
  </div>

How can I display post image using background-image: url(images/BlogImg.png);

In place of images/BlogImg.png I want post image url of respective blog post.

Can anyone please tell me how can I achieve this?

Answers

Depending how you have the image stored, if this is a featured image attached to your posts add this

$backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘full’ );

        foreach($recent_posts as $post) {
          $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post['ID']), 'full' );
          echo '<div class="col-lg-4">';
          echo '<div class="blog-entry">';
          echo '<a href="', get_permalink($post['ID']), '" style="background-image: url('<?php echo $backgroundImg[0]; ?>');"></a>';
          echo '<div class="text">';
          echo '<div class="meta">';
          echo '<div><span class="fa fa-calendar-alt"></span>', $post['post_date'], '</a></div>';
          echo '<div><span class="fa fa-user"></span>', $post['post_author'], '</div>';
          echo '<div><span class="fa fa-comments meta-chat"></span>', $post['comment_count'], '</div>';
          echo '</div>';
          echo '<div class="desc">';
          echo '<h3 class="heading"><a href="', get_permalink($post['ID']), '">', $post['post_title'], '</a></h3>';
          echo '</div>';
          echo '</div>';
          echo '</div>';
          echo '</div>';
        }

Use the following lines:

<div class="row">
    <?PHP

        include('blog/wp-load.php'); 
        $recent_posts = wp_get_recent_posts(array(
          'numberposts' => 3,
          'post_type' => 'post',
          'post_status' => 'publish'
        ));
        foreach($recent_posts as $post) {
   $imgurl = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );

          echo '<div class="col-lg-4">
                <div class="blog-entry">
                <a href="'. get_permalink($post['ID']). '" style="background-image: url('.$imgurl.');"></a>
           <div class="text">
           <div class="meta">
           <div><span class="fa fa-calendar-alt"></span>' . $post['post_date'] . '</a></div>
          <div><span class="fa fa-user"></span>'. $post['post_author'] . '</div>
          <div><span class="fa fa-comments meta-chat"></span>' . $post['comment_count'] . '</div>'
          </div>
          <div class="desc">
          <h3 class="heading"><a href="' . get_permalink($post['ID']) . '">' . $post['post_title'] . '</a></h3>
          </div>
          </div>
          </div>
          </div>';
        }
    
    ?>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

How can I show WP blog posts’ images on an HTML/PHP page?

Answers