1

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!!!

2
  • It kind of depends on how the theme is set up. If for example in the theme template file for the post list (for example index.php) just the excerpt is shown, it will not show any image. Normal usage would be the post featured image. I bet that this image will also show up in the post list. But this surly also depends on the theme. You could try to create a function which searchs the post and grabs the first image element in the content of each post, and than maybe display this image with some filters. Maybe you should just use featured images, why arent you?
    – LWS-Mo
    Jun 23, 2017 at 14:57
  • Thank you. I want to use the first image rather than the featured image. The theme is TwentyTen. Thanks!
    – relin
    Jun 24, 2017 at 14:33

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.