Show first post image when no featured image available

Hello Team,

As the title of this post indicates, in the masonry blog page I am looking at show the first post image when no featured image is available for a given post.

Could you assist or at least give me some directives? Why the way, I am using the Renew stack

Thanks a lot for an awesome support!

David

Hello David,

Thanks for writing in!

Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Custom featured image
// =============================================================================
function x_featured_image( $cropped = '' ) {

  $stack     = x_get_stack();
  $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

  if ( has_post_thumbnail() ) {

    if ( $cropped == 'cropped' ) {
      if ( $fullwidth ) {
        $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
      } else {
        $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
      }
    } else {
      if ( $fullwidth ) {
        $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
      } else {
        $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
      }
    }

    switch ( is_singular() ) {
      case true:
        printf( '<div class="entry-thumb">%s</div>', $thumb );
        break;
      case false:
        printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
          esc_url( get_permalink() ),
          esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
          $thumb
        );
        break;
    }

  } else {
    global $post, $posts;
    $thumb = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $thumb = $matches [1] [0];
    $image = '<img src="' . $thumb . '" class="attachment wp-post-image" alt="">';

    if ( is_archive()  ) {
      printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
        esc_url( get_permalink() ),
        esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
        $image
      );
    }
  }

}
// =============================================================================

The code above will display the featured image when there is assigned in the post and if none, it will check the post content, look for the first image and will display it as the featured image.

We would loved to know if this has work for you. Thank you.

Awesome! Thank you for your help!

Unfortunately the code above didn’t work. I am already working with a child theme and added this function to functions.php. But it still does not work in the blog masonry view… (see attached).

Am I missing anything? Thank you guys for your patience with all of us

1 Like

Hi There,

There’s a filter that’s function is called only if there’s a post has post thumbnail. Please try this instead:

1.) Please copy content.php file from this folder: \wp-content\themes\x\framework\views\renew
2.) Paste the file on your child theme folder here: \wp-content\themes\x-child\framework\views\renew
3.) Open the copied file and replace the content with this:

    <?php

			// =============================================================================
			// VIEWS/RENEW/CONTENT.PHP
			// -----------------------------------------------------------------------------
			// Standard post output for Renew.
			// =============================================================================

			?>

			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			  <div class="entry-wrap">
			    <?php x_get_view( 'renew', '_content', 'post-header' ); ?>
			    <?php if ( has_post_thumbnail() ) : ?>
			      <div class="entry-featured">
			        <?php x_featured_image(); ?>
			      </div>
			    <?php else: ?>
			    <?php
			      $thumb = '';
			      $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
			      $thumb = $matches [1] [0];
			      $image = '<img src="' . $thumb . '" class="attachment wp-post-image" alt="">';

			      if ( is_home()  ) { 
			        printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
			          esc_url( get_permalink() ),
			          esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
			          $image
			        );
			      }
			       ?>
			    <?php endif; ?>
			    <?php x_get_view( 'global', '_content' ); ?>
			  </div>
			</article>

Further customization from here would be getting into custom development which is outside the scope of our support. Thank you for understanding.

Hi there!

Thanks for the new code, whoever it displays the pictures in full size instead of thumbnail size when no features image is available…

But I am confident I can combine the two solutions. Thanks a lot guys for your help! :slight_smile:

You’re always welcome!

Cheers.