Custom field picture instead of post thumbnail on category page

Question

I'm trying to modify a theme to make it work with my custom fields (I'm using ACF for most of the data I put on pages) for a site with song lyrics on it. The original code was this:

$metro_creativex_posttitle = get_the_title();
$metro_creativex_feat_image = wp_get_attachment_image_src( 
            get_post_thumbnail_id( $post->ID ), 
            'single-post-thumbnail' 
        );

if(isset($metro_creativex_feat_image[0])):
    echo '<div class="img">'.get_the_post_thumbnail().'</div>';
endif;

It's a piece of the content.php that shows the posts in categories pages. Now, since my posts don't have any featured images but only one or two images via custom fields, my first intent is to replace the 'custom thumbnail' with the single cover art, so first thing first I replaced the get_post_thumbnail with a get_field, and it at least seems to detect whenever a song has or not a single cover picture:

$metro_creativex_posttitle = get_the_title();
$metro_creativex_feat_image = wp_get_attachment_image_src(
            $post->ID,
            get_field('sd_single_img'),
            'single-post-thumbnail' 
        );

if(isset($metro_creativex_feat_image[0])):
    echo '<div class="img">'.get_the_post_thumbnail().'</div>';
endif;

My main problem for now is that I can't understand what I have to write down on the echo to make it show the actual image and not only a blank space above the song title on the category menu: Link to my page

How can I fix it?

Answer 1

I reckon you use the image URL in your custom field.

$metro_creativex_posttitle = get_the_title(); // Not used in this snippet
/*
// you don't need this block
$metro_creativex_feat_image = wp_get_attachment_image_src(
    $post->ID,
    get_field('sd_single_img'),
    'single-post-thumbnail' 
);
*/

// you'll need `$post_id` for each song
$img_src = get_field('sd_single_img', $post_id);

if( !empty( $img_src ) ) {
    // echo if custom field is not empty
    echo '<div class="img"><img src="//thenewblackgold.netsons.org/wp/category/songs/level-5/' . $img_src . '" /></div>'; 
}

Updated in compliance of the OP comment.

Answer 2

I'm sure that's a better way to do this, but thanks to Max I found this one:

$img_scr = get_field('sd_single_img', $post_id);
$img_scr_url = wp_get_attachment_url(get_field('sd_single_img', $post_id));
if( !empty( $img_scr ) ) {
echo '<div class="img"><img src="' . $img_scr_url . '" /></div>'; 

Since it returned an ID I had to put in another variable that translated the ID into an url, and now it works like a charm ;) Thank you so much :D