0

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?

1 Answer 1

0

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.

6
  • Sounds correct, let me test it! Thanks Aug 26, 2020 at 14:50
  • this again returns blank. :/ Aug 26, 2020 at 14:52
  • Looking at your entire code, the problem has nothing to do with how you're echoing the images. Your code for echoing the images assumes that attachment IDs are saved in those meta fields, but your form code isn't saving anything. For the file input your code is not actually uploading and saving the image as an attachment, so no attachment ID can be saved, and for the radio button field your inputs don't even have a value, so it's not even possible for anything to be saved because the selection isn't submitting anything. Aug 26, 2020 at 15:00
  • Yes @jacob... I feel like you can help me do this! Please explain how to do this? Aug 26, 2020 at 15:01
  • It's 1am where I am, so that's as much as you'll get from me today, but you need to break down what you're trying to do into smaller parts. How to upload an image from a meta box is covered thoroughly in dozens of places, so I'd start there, or wait for a more detailed answer from somewhere else. Aug 26, 2020 at 15:03

Your Answer

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

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