if custom field doesn't exist, use post thumbnail instead, as image background

Question

I am trying to modify a code in my theme, but I only partially succeed. I need a working condition, if a custom field is not present, to use the post thumbnail instead, as the background image.

if the post doesn't have a custom field 'square_image', then take the post's thumbnail, medium size, and use it as the image background ($thumb, in my code)

I tried adding the condition, and it works, but it will display the thumbnail image next to the image box, instead of as its background (so I'm doing it wrong). Only when the custom field exists it is displayed correctly.

Update: I replaced this

 elseif ( ($layout === 'covers' ) && ! get_post_meta(get_the_ID(), 'square_image', true)) {
    $style = '';
        if ( in_array( 'thumbnail', $order, true ) &&  ! get_post_meta(get_the_ID(), 'square_image', true)) {

with this

        elseif ( ($layout === 'covers' ) && ! get_post_meta(get_the_ID(), 'square_image', ! true)) {
        $style = '';
            if ( in_array( 'thumbnail', $order, true ) &&   get_post_meta(get_the_ID(), 'square_image', ! true)) {

and the image shows in the right place, but still, other styles are not respected. maybe there is a way to improve my code.

here is the original code:

    if ( $layout === 'covers' ) {
        $style = '';
        if ( in_array( 'thumbnail', $order, true ) ) {
            $thumb  = get_post_meta( get_the_ID(), 'square_image', true );
             
            $style .= ! empty( $thumb ) ? 'background-image: url(' . esc_url( $thumb ) . ')' : '';
        }
        $markup .= '<div class="cover-post nv-post-thumbnail-wrap" style="' . esc_attr( $style ) . '">';
        $markup .= '<div class="inner">';
        $markup .= $this->get_ordered_content_parts( true, $post_id );
        $markup .= '</div>';
        $markup .= '</div>';

        return $markup;
    }

I tried in several ways, adding the elseif in several ways, but it's the same result.

here is my modified code:

if ( ($layout === 'covers' ) &&  get_post_meta(get_the_ID(), 'square_image', true)) {
        $style = '';
        
        
        if ( in_array( 'thumbnail', $order, true ) &&  get_post_meta(get_the_ID(), 'square_image', true)) {
            $thumb  = get_post_meta( get_the_ID(), 'square_image', true );
             
            $style .= ! empty( $thumb ) ? 'background-image: url(' . esc_url( $thumb ) . ')' : '';
        }
        $markup .= '<div class="cover-post nv-post-thumbnail-wrap" style="' . esc_attr( $style ) . '">';
        $markup .= '<div class="inner">';
        $markup .= $this->get_ordered_content_parts( true, $post_id );
        $markup .= '</div>';
        $markup .= '</div>';

        return $markup;
    }
    
            elseif ( ($layout === 'covers' ) && ! get_post_meta(get_the_ID(), 'square_image', true)) {
        $style = '';
            if ( in_array( 'thumbnail', $order, true ) &&  ! get_post_meta(get_the_ID(), 'square_image', true)) {
        
            $thumb  = the_post_thumbnail( 'medium' );
            
        $style .= ! empty( $thumb ) ? 'background-image: url(' . esc_url( $thumb ) . ')' : '';
        $markup .= '<div class="cover-post nv-post-thumbnail-wrap" style="' . esc_attr( $style ) . '">';
        $markup .= '<div class="inner">';
        $markup .= $this->get_ordered_content_parts( true, $post_id );
        $markup .= '</div>';
        $markup .= '</div>';
        return $markup;
        }
            }

here is the original code where I need an 'elseif'

the whole original code:

private function get_article_inner_content( $post_id = null ) {
    $markup            = '';
    $layout            = $this->get_layout();
    $is_featured_post  = $post_id !== null;
    $featured_template = in_array( $layout, [ 'alternative', 'default', 'grid' ], true ) ? 'tp1' : 'tp2';
    $default_order     = array(
        'thumbnail',
        'title-meta',
        'excerpt',
    );
    $order             = json_decode( get_theme_mod( 'neve_post_content_ordering', wp_json_encode( $default_order ) ) );

    if ( in_array( $layout, [ 'alternative', 'default' ], true ) || ( $is_featured_post && $featured_template === 'tp1' ) ) {
        if ( in_array( 'thumbnail', $order, true ) || ( $is_featured_post && $featured_template === 'tp1' ) ) {
            $markup .= $this->get_post_thumbnail( $post_id );
        }
        $markup .= '<div class="non-grid-content ' . esc_attr( $layout ) . '-layout-content">';
        $markup .= $this->get_ordered_content_parts( true, $post_id );
        $markup .= '</div>';

        return $markup;
    }

    if ( $layout === 'covers' ) {
        $style = '';
        if ( in_array( 'thumbnail', $order, true ) ) {
            $thumb  = get_post_meta( get_the_ID(), 'square_image', true );
             
            $style .= ! empty( $thumb ) ? 'background-image: url(' . esc_url( $thumb ) . ')' : '';
        }
        $markup .= '<div class="cover-post nv-post-thumbnail-wrap" style="' . esc_attr( $style ) . '">';
        $markup .= '<div class="inner">';
        $markup .= $this->get_ordered_content_parts( true, $post_id );
        $markup .= '</div>';
        $markup .= '</div>';

        return $markup;
    }

    return $this->get_ordered_content_parts( false, $post_id );
}

any help would be greatly appreciated. thank you

Answer 1

In your modified code (inside your elseif) you have $thumb = the_post_thumbnail( 'medium' );. the_post_thumbnail function is not returning a URL, but the entire image.

When you just need to output the source of the image, you should use the_post_thumbnail_url.