Unable to gather Image URL from Custom Post Type's; Custom Meta Field

Question

I have wrote a very basic plug-in, it creates a Custom Post Type (CPT) that has multiple custom meta fields.

I cannot seem to echo out the Image URL. I have tried a heck of a lot of other similar posts solutions but they all seem to relate in some way back to Advanced Custom Fields (ACF) plug-in.

There are two images captured and they are captured in two ways:

This way is to allow the user to upload a file into the form:

<div class="form-row">
    <label for="your-profile-picture">Your Profile Picture</label>
    <input type="file" id="your-profile-picture" accept=".jpg,.jpeg,.png" tabindex="1" name="your-profile-picture" onchange="validateImageFileType()" required/>
</div>

The second way is by using a radio button to make them choose from a selection of images:

<div class="form-row">
    
    <input type="radio" name="your-background-image" tabindex="6" class="sr-only" id="normal">
    <label for="normal">
        <img src="/test/clicky/wp-content/uploads/2020/08/testimonial-bg-1.png" alt="normal">
    </label>
    
    <input type="radio" name="your-background-image" tabindex="7" class="sr-only" id="flipped">
    <label for="flipped">
        <img src="/test/clicky/wp-content/uploads/2020/08/testimonial-bg-2.png" alt="flipped">
    </label>

    <input type="radio" name="your-background-image" tabindex="8" class="sr-only" id="bright">
        <label for="bright">
        <img src="/test/clicky/wp-content/uploads/2020/08/testimonial-bg-3.png" alt="bright">
    </label>

</div>

This information is then passed via the POST method like this:

<?php
// Handle Form Submissions
if ('POST' == $_SERVER['REQUEST_METHOD'] && !empty($_POST['post-type']) &&  $_POST['post-type'] == "testimonial") :

    // Do some minor form validation to make sure there is content
    if (isset ($_POST['your-profile-picture'])) {
        $your_profile_picture = $_POST['your-profile-picture'];
    } else { 
        echo 'Please provide a profile picture.';
    }
    if (isset ($_POST['your-background-image'])) {
        $your_background_image = $_POST['your-background-image'];
    } else { 
        echo 'Please select a background image.';
    }

    if (isset($_POST['post-type'])) {
        $post_type = $_POST['post-type'];
    } else {
        echo 'Unable to get post type.';
    }

    // Add the content of the form to $post as an array
    $testimonial_args = array(
        'your_profile_picture'      => $your_profile_picture,
        'your_background_image'     => $your_background_image,

        'post_type'                 => $post_type,
        'post_status'               => 'publish'
    );

    //save the new post
    $post_id = wp_insert_post($testimonial_args, true);

    $your_profile_picture           = $_POST['your-profile-picture'];
    $your_background_image          = $_POST['your-background-image'];

    add_post_meta($post_id, 'your_profile_picture', $your_profile_picture, true);
    add_post_meta($post_id, 'your_background_image', $your_background_image, true);

    if ($post_id != '') : ?>
        <script>
            alert('Testimonial details successfully submitted!');
        </script>
    <?php else : ?>
        <script>
            alert('Testimonial details submission was unsuccessful!');
        </script>
    <?php endif;
endif; ?>

With the success message being delivered, I then look towards how I am best outputting the images into my front-end facing code:

<?php
while ( $loop->have_posts() ) : $loop->the_post(); ?>

    <?php
    $background_image_id    = get_post_meta(get_the_ID(), 'your_background_image_id', true);
    $background_image       = wp_get_attachment_image( $background_image_id, 'full' );
    $profile_image_id       = get_post_meta(get_the_ID(), 'your_profile_picture_id', true);
    $profile_image          = wp_get_attachment_image( $profile_image_id, 'full' ); ?>

    <div class="testimonial-slide" style="background-image: url(<?php echo $background_image; ?>);">

        <div class="testimonial-profile-picture" style="background-image: url(<?php echo $profile_image ?>);"></div>

    </div>

<?php 
endwhile; ?>

But this returns blank background-image declarations when inspected.

I have also tried a number of other ways but instead of me making this question really elongated, I think we can understand what I am trying to achieve... the methodology of how I can echo out the images, taking into consideration the two methods they have been aquired.

~ there is more code within the plug-in that captures text based meta fields and I can confirm they gather and echo the correct information. It is only the images that return nothing.

~ I previously had a solution that was echoing out 'on' and another that returned just the file name. Again, no image src.

Please can we look to find a solution that will echo out the url of the image into the background-image styles?

Answer 1

If you want the image URL you should use wp_get_attachment_image_url(), not wp_get_attachment_image():

$background_image_id    = get_post_meta(get_the_ID(), 'your_background_image_id', true);
$background_image       = wp_get_attachment_image_url( $background_image_id, 'full' );
$profile_image_id       = get_post_meta(get_the_ID(), 'your_profile_picture_id', true);
$profile_image          = wp_get_attachment_image_url( $profile_image_id, 'full' ); ?>

wp_get_attachment_image() returns a full HTML <img> tag, but background images are just a URL.