phpwordpressimagecustom-theme

My image wont load in custom wordpress theme


I have an issue loading images with correct file path. My path is ok but it wont load some cover image that i want to. This is archives.php file. I also have blogs and catergoies with recent blog post code that is working fine. But this part were im pulling image from wp-content/uploads is not working tho file path is apsolutly correct.

http://prntscr.com/o9y48h

As you can see my image wont show up. I`v shown below also a print screen of a site with that exact image.

<?php 
$id = get_the_ID();
$back_img = get_the_post_thumbnail_url($id);

if(empty($back_img)){
    $back_img = '/wp-content/uploads/2019/06/blog_post.jpg';
}
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

    <header class="blog-section-1" style="background:url(/wp-content/uploads/2019/06/blog_post.jpg)no-repeat center;background-size:cover;">
            <div class="container">
                <?php
                the_archive_title('<h1 class="page-title">', '</h1>' ); 
                ?>
                <div class="md-breadcrumbs-pages">
        <div class="container"> 
        <?php
                    if ( function_exists('yoast_breadcrumb') ) {
                      yoast_breadcrumb( '
                    <p id="breadcrumbs">','</p>
                    ' );
                    }
        ?>
            </div>
            </div>
        </div>
    </header>

I want to be like http://prntscr.com/o9y2aj but it wont show this exact image that is shown in this printscreen. Same image that i have on the file path.

Thanks


Solution

  • For background-image attribute give the relative path to the image within url.

    like.

    //get the wp_upload directory 
        $upload_dir = wp_upload_dir();
                $id = get_the_ID();
                $back_img = get_the_post_thumbnail_url($id);
    
                if(empty($back_img)){
                    //relative path of the default image within url
                    $back_img = $upload_dir['baseurl'].'/2019/06/blog_post.jpg';
                }
               $default_header_img = $upload_dir['baseurl'].'/2019/06/blog_post.jpg';
        ?>
    
        <div id="primary" class="content-area">
            <main id="main" class="site-main">
            <!-- use $back_img variable for background image -->
            <header class="blog-section-1" style="background:url(<?php echo $default_header_img;?>)no-repeat center;background-size:cover;">
                    <div class="container">