0

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

1 Answer 1

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.

2
  • thanks for the tip! I am surprised that's the only mistake I made
    – vyperlook
    Aug 2, 2022 at 14:30
  • @vyperlook did this solve your problem? If so consider marking it as the correct/accepted answer
    – Tom J Nowell
    Jul 17 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.