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

[David]

Thats great – but it could be better – as currently that method is just going to return the fullsuze image and without any width height attributes – which is not good.

So replace the PHP Snippet with this:

function pippin_get_image_id($image_url) {
	global $wpdb;
	$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); 
        return $attachment[0]; 
}

add_action('generate_before_entry_title', function(){
    $custom_url = get_post_meta( get_the_ID(), 'thumbnail', true );
    $image_id = pippin_get_image_id($custom_url);
    if (!is_single() && !empty($custom_url)) {
	echo wp_get_attachment_image($image_id, 'medium');
    }
});

This should now output only the medium size image ( 300px default size ) with width/height attributes.

But yes, you would still need some CSS to style it like you have above.

NOTE: For reference and credit where its due – the first function in that snippet comes from here:
https://pippinsplugins.com/retrieve-attachment-id-from-image-url/

[MaryAnn]

Hmm. Well, I did have a max-width in my CSS, and when I replace the snippet with your new one (again, with “Thumbnail” capitalized), I didn’t get a 300px-wide image unless I kept that max-width in my CSS. In other words, the new snippet didn’t make the thumbnail look any different than the previous one.

Anyway, I added some CSS to deal with mobile and tablet layouts, cuz it was looking like crap there:

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

@media screen and (max-width: 900px) {
.blog .entry-header img, .archive .entry-header img {
  float: none;
}
}

I’m happy with how this looks now. Does it seem okay to you?

[David]

I checked the HTML on the site and its pulling in a size of 500px and it includes the width height attributes which is good – and that CSS is absolutely fine 🙂

[MaryAnn]

Terrific! Thank you so much for your help!

[David]

Glad to be of help!

[Author]

Posts