I create a custom post type shortcode as slider. My sliders images are displayed in background image as a featured image. But featured image is not displaying in my slides.

Here is my code:

<?php
add_shortcode( 'slickslider', 'slider_shortcodes_post_type' );

function slider_shortcodes_post_type(){
    $args = array(
        'post_type' => 'slider',
        'post_status' => 'publish'
    );

    $string = '';
    $h_query = new WP_Query( $args );
    if( $h_query->have_posts() ){
        $string .= '<div class="home-slides owl-carousel owl-theme">';
        while( $h_query->have_posts() ){
            $h_query->the_post();

            // slider buttons
            // first button  text
            $slider_buttons1txt =  $sliderbtntxt1 = get_post_meta(get_the_ID(), 'slider_button1_text', true);
            if( !empty($slider_buttons1txt) ): endif;
            
            // first button text link
            $slider_buttons1link =   $sliderbtntxtlink = get_post_meta(get_the_ID(), 'slider_button1_text_link', true);
            if( !empty($slider_buttons1link) ): endif;
            
            // second button  text
            $slider_buttons2txt =  $sliderbtntxt2 = get_post_meta(get_the_ID(), 'slider_button2_text', true);
            if( !empty($slider_buttons2txt) ): endif;

            // first button text link
            $slider_buttons2link = $sliderbtn2txtlink = get_post_meta(get_the_ID(), 'slider_button2_text_link', true);
            if( !empty($slider_buttons2link) ): endif;

             // background images 
            $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
              
            $string .=' <div class="main-slider-item" style="background-image: url(<?php echo $backgroundImg[0]; ?>); background-size: cover; background-repeat: no-repeat;">' . 
            ' <div class="d-table">' . 
                ' <div class="d-table-cell">' . 
                    '<div class="container">'.
                        ' <div class="main-slider-content">' .
                        '<h1>' . get_the_title() . '</h1>' .
                        get_the_content() .
                        ' <div class="slider-btn">'.
                        '<a href="'.$slider_buttons1link.'" class="default-btn">' .  $slider_buttons1txt . '</a>' .
                        '<a href="'.$slider_buttons2link.'" class="default-btn-two">' .  $slider_buttons2txt . '</a>' .
                        '</div>'.
                        ' </div>' . 
                    '</div>' .
                ' </div>'. 
            ' </div>' . 
            '</div>';
            
        }
        $string .= '</div>';
    }
    wp_reset_postdata();
    return $string;
}

I create a custom post type shortcode as slider. My sliders images are displayed in background image as a featured image. But featured image is not displaying in my slides.

Here is my code:

<?php
add_shortcode( 'slickslider', 'slider_shortcodes_post_type' );

function slider_shortcodes_post_type(){
    $args = array(
        'post_type' => 'slider',
        'post_status' => 'publish'
    );

    $string = '';
    $h_query = new WP_Query( $args );
    if( $h_query->have_posts() ){
        $string .= '<div class="home-slides owl-carousel owl-theme">';
        while( $h_query->have_posts() ){
            $h_query->the_post();

            // slider buttons
            // first button  text
            $slider_buttons1txt =  $sliderbtntxt1 = get_post_meta(get_the_ID(), 'slider_button1_text', true);
            if( !empty($slider_buttons1txt) ): endif;
            
            // first button text link
            $slider_buttons1link =   $sliderbtntxtlink = get_post_meta(get_the_ID(), 'slider_button1_text_link', true);
            if( !empty($slider_buttons1link) ): endif;
            
            // second button  text
            $slider_buttons2txt =  $sliderbtntxt2 = get_post_meta(get_the_ID(), 'slider_button2_text', true);
            if( !empty($slider_buttons2txt) ): endif;

            // first button text link
            $slider_buttons2link = $sliderbtn2txtlink = get_post_meta(get_the_ID(), 'slider_button2_text_link', true);
            if( !empty($slider_buttons2link) ): endif;

             // background images 
            $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
              
            $string .=' <div class="main-slider-item" style="background-image: url(<?php echo $backgroundImg[0]; ?>); background-size: cover; background-repeat: no-repeat;">' . 
            ' <div class="d-table">' . 
                ' <div class="d-table-cell">' . 
                    '<div class="container">'.
                        ' <div class="main-slider-content">' .
                        '<h1>' . get_the_title() . '</h1>' .
                        get_the_content() .
                        ' <div class="slider-btn">'.
                        '<a href="'.$slider_buttons1link.'" class="default-btn">' .  $slider_buttons1txt . '</a>' .
                        '<a href="'.$slider_buttons2link.'" class="default-btn-two">' .  $slider_buttons2txt . '</a>' .
                        '</div>'.
                        ' </div>' . 
                    '</div>' .
                ' </div>'. 
            ' </div>' . 
            '</div>';
            
        }
        $string .= '</div>';
    }
    wp_reset_postdata();
    return $string;
}

• custom-post-types
• shortcode

1 Answer 1

Its done :

 $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
              
 $string .=' <div class="main-slider-item" style="background-image: url('.$backgroundImg[0].'); background-size: cover; background-repeat: no-repeat;">' .