Archived topic
display custom-field-defined thumbnail image as featured image in blog listing?
19 replies · Started by MaryAnn on May 16, 2021
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/
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?
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 :)
Terrific! Thank you so much for your help!
Glad to be of help!