[Resolved] display custom-field-defined thumbnail image as featured image in blog listing?

[MaryAnn]

Hello! Is there a way to get GeneratePress to recognize an image stored in a custom field called “Thumbnail” so that it is used as a Featured image in a blog listing?

Here is my in-progress recent-posts listing page:

http://dev.flickfilosopher.com/flick/all-recent-posts

I hoping to get it looking similar to the comparable page on the live site I’m moving over to GeneratePress:

https://www.flickfilosopher.com/all-recent-posts

This is the PHP the current live site uses, in case it’s helpful:

<?php next_posts_link( '&larr; older posts' ); ?> &nbsp;
<?php previous_posts_link( 'newer posts &rarr;' ); ?>

<hr />

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array( 'post_type' => 'post', 'posts_per_page' => 50, 'paged' => $paged );
$wp_query = new WP_Query($args);
while ( have_posts() ) : the_post(); ?>

			<?php
				$thumb = '';
				$width = "250";
				$height = "167";
				$classtext = 'post-thumb';
				$titletext = get_the_title();
				$thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext,false,'Entry');
				$thumb = $thumbnail["thumb"];
			?>

			<?php if($thumb <> '') { ?>
				<div class="thumb">
					<a href="<?php the_permalink(); ?>">
						<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext); ?>
						<span class="overlay"></span>
					</a>
				</div> 	<!-- end .post-thumbnail -->
			<?php } ?>

<h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<span class="meta-info"><?php get_template_part('includes/postinfo'); ?></span></ br>

<?php the_excerpt(); ?>

<div class="clear"></div>	

<hr />

<?php endwhile; ?>

<?php next_posts_link( '&larr; older posts' ); ?> &nbsp;
<?php previous_posts_link( 'newer posts &rarr;' ); ?>

I tried creating a new page using this at the GeneratePress dev site, but it wouldn’t even load.

I’ve got hundreds, maybe thousands of posts with custom-field-defined thumbnails, so manually changing them post-by-post to Featured images isn’t practical.

Any help would be much appreciated! Thank you.

[David]

Hi there,

if you’re using the Block Editor then you can use the Block Element and GenerateBlocks to construct your own Content Template for your blog/archives – see here:

https://docs.generatepress.com/article/block-element-content-template/

The examples provided use the GP Dynamic Image block, which can be set to Featured Image – but in your case you would use the Post Meta option and enter your CF name.

This method will also allow you to create that custom layout.

Alternatively Tom provides a method here for swapping out the featured image for the custom field:

https://generatepress.com/forums/topic/cant-cover-generate_post_image-via-function-php/#post-1738181

[MaryAnn]

Well, I tried this, but it didn’t work:

add_filter( 'has_post_thumbnail', function( $has, $post ) {
    $custom_field_image_url = get_post_meta( $post, $key = 'Thumbnail', TRUE);

    if ( $custom_field_image_url ) {
        $has = true;
    }

    return $has;
}, 10, 2 );

add_filter( 'generate_featured_image_output', function( $output ) {
    if ( is_home() ) {
        if ( has_post_thumbnail() ) {
            return sprintf( // WPCS: XSS ok.
                '<div class="post-image">
                    <a href="%1$s">
                        %2$s
                    </a>
                </div>',
                esc_url( get_permalink() ),
                get_the_post_thumbnail(
                    get_the_ID(),
                    apply_filters( 'generate_page_header_default_size', '' ),
                    array('itemprop' => 'image' )
                )
            );
        }
    }

    return $output;
} );

(I am very far from an expert in PHP.)

This is how I’ve got the recent-posts page customized re featured images:

I’d like to give the GenerateBlocks method a try, but I’m having a bizarre technical issue with that. Will start another topic for that.

Thanks.

[David]

Lets deal with this code first:

add_filter( 'has_post_thumbnail', function( $has, $post ) {
    $custom_field_image_url = get_post_meta( $post, $key = 'Thumbnail', TRUE);

    if ( $custom_field_image_url ) {
        $has = true;
    }

    return $has;
}, 10, 2 );

This line:

$custom_field_image_url = get_post_meta( $post, $key = 'Thumbnail', TRUE);

needs changing to:

$custom_field_image_url = get_post_meta( $post, 'YOUR_CUSTOM_FIELD_NAME', TRUE);

Change the YOUR_CUSTOM_FIELD_NAME to the name (key) for your CF

[MaryAnn]

Okay, done. (I don’t see any difference, but I suspect there’s more to come.)

[David]

In Customizer > layout > blog –> Featured Images is the Display featured images checked for Archives?

[MaryAnn]

Yes, the Customizer window is set up as in the screengrab above.

[David]

Try this snippet instead:

function db_custom_field_featured_image( $html, $post_id ) {
    $custom_url = get_post_meta( $post_id, 'YOUR_CUSTOM_FIELD_NAME', true );
    if ( '' != $custom_url ) {
        return '<img src="' . $custom_url . '" />';
    } 
    else {
        return $html;
    }
}
add_filter( 'post_thumbnail_html', 'db_custom_field_featured_image', 10, 2 );

[MaryAnn]

I’m afraid that doesn’t work either.

[David]

Are you sure the custom field name is correct ?

[MaryAnn]

I think so. Here’s what it looks like on a post page:

And here’s the totality of the snippet (I’m using the Code Snippets plugin):

function db_custom_field_featured_image( $html, $post_id ) {
    $custom_url = get_post_meta( $post_id, 'Thumbnail', true );
    if ( '' != $custom_url ) {
        return '<img src="' . $custom_url . '" />';
    } 
    else {
        return $html;
    }
}
add_filter( 'post_thumbnail_html', 'db_custom_field_featured_image', 10, 2 );

Is there something I’m missing, or doing wrong?

I am no expert in any of this and do appreciate your handholding here!

[David]

Hmmm… can you try making it lowercase so in the PHP Snippet Thumbnail becomes thumbnail

[MaryAnn]

Done. It didn’t help.

[David]

Ok – so it looks like the post isn’t support the post thumbnail so it doesn’t render the HTML for it.
So lets give this a shot instead:

add_action('generate_before_entry_title', function(){
    $custom_url = get_post_meta( get_the_ID(), 'thumbnail', true );
    if (!is_single() && !empty($custom_url)) {
        echo '<img src="' . $custom_url . '" />';
    }
});

[MaryAnn]

Progress! That gets the thumbnail on the page (with “Thumbnail” capitalized), but the customizer no longer works to style the thumbnail. I achieved that with CSS:

.blog .entry-header img, .archive .entry-header img {
  max-width: 250px;
  height: auto;
  float: left;
  margin-right: 15px;
}

That seems to work. Do you see any issues with this?

[Author]

Posts