Images in Blog List

Question

I just changed themes. My blog page list used to show the images I used for each post (content image, not featured image). I use the URL for the images, not my media library. The individual post page shows the images, but the blog list page does not unless I add the image to the media library. Is there any code and/or plug-in I can use to make sure the image is included on the blog list page when I add it to the content of the individual post? Is there a way to populate the posts that included the image in the past, but no longer show the image on the list page? Thanks!!!

Answer 1

Hey I got the code to get the first image from the content, from this answer, Get first image in a post from Diana but modified the code a bit. So if this is helpful please mark that answer aswell.

Insert the code inside your functions.php or create a new plugin.

function catch_that_image() {

global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();

  // search for <img> elements inside the post content
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

  // $matches now contains an multidimensional array with all found <img> objects
  // we go down the multiarray to find your image URL
  $first_img = $matches [1] [0];

  // check if there is an image
  if(empty($first_img)){ 
    // if no image is found in the content, we can add a default one
    // if you dont want to use a default than just use '';
    $first_img = '/images/default.jpg';
  } else {
    // is an image is found, create some markup and display it
    $first_img = '<img class="my-custom-post-image" src="'.$first_img.'">';
  }

  return $first_img;
}

Than you need to modify your content.php template in your theme folder. (please use a child theme!)

On the top of the template file, you will also see that if you used featured image, this image would already show! And you would not have to do all this here :)

So add some changes:

<?php
/**
 * The default template for displaying content
 *
 * Used for both single and index/archive/search.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php

        // new code starts
        if (!is_singular()) { // dont display in single view, remove if not needed
            echo catch_that_image();
        }
        // new code ends

        // Post thumbnail.
        twentyfifteen_post_thumbnail();
    ?>

    <header class="entry-header">

After this you surely need to add some styling to the new image. Look inside the code, you can style it with the class my-custom-post-image.