Use AJAX to fetch Current Post Thumbnail for Wordpress when Uploaded throughMedia Uploader Frontend

Question

Use AJAX to fetch Current Post Thumbnail for Wordpress when Uploaded throughMedia Uploader Frontend

2022年5月19日 03:02

i Use WordPress Media Uploader on Frontend to allow users to upload Thumbnail for there UGC site. I also show a Preview of the Image on Frontend. When a user clicks the button the Media Uploader opens user uploads image, sets it as Featured Image and we are good. But, the Image Preview still shows old Image.

I have a WordPress Site, based on User Generated Content, where people can create posts via a Frontend Form.

When A user updates the Featured Image on Frontend using the Media Uploader, How do I update the preview with the new Image?

Below is the code for Media Uploader which users use to upload featured image

            $uparms = '?post_id=' . $post_id;
            $uparms .= 'amp;' . 'type=image';
            $uparms .= 'amp;' . 'TB_iframe=1';
            //$uparms .= 'amp;'.'inline=1';
            $uparms .= 'amp;' . 'tab=library';

echo 'a class="Thumbnail-Upload-Button thickbox"  title="' . __("Select Featured Image") . '" href="' . site_url('/wp-admin/media-upload.php') . $uparms . '" id="frontier-post-select-thumbnail set-post-thumbnail" name="set-post-thumbnail"/div';

Below is the code I use to preview the image.

echo 'img class="milyin-field milyin-thumbnail-true" align="center" style="padding:0 !Important; width:100vw;  min-height:250px; object-fit:contain; " src="';
echo get_the_post_thumbnail_url($post_id, 'hestia_blogs', array(
                                                          'class' = 'milyin-post-feat-img'
                                                         ));
echo '" ';

Here Comes the Trouble Portion

Now, i want to implement a JS code, that automatically updates the Thumbnail Preview, when we update the Featured Image itself.

I use WordPress Thickbox to popup the Media Uploader, so in my opinion the best strategy would be to see whenever the Thickbox is closed, a JS checks the server and finds out the thumbnail url, and then put this url, in the "SRC" attribute of my preview of the img class="milyin-thumbnail-true" /

Please help me implement this or if there is another strategy better in your opinion.

I am using a Highly modified version of Frontier Post WordPress Plugin...

The Button that closes the Thick box is class="tb-close-icon" therefore, onclick of this button we need to get the thumbnail url of the current post...

My Site url: 17 Secrets to How I Optimize My WordPress Site To Load In 927 ms (100% GTMetrix)

Topic post-thumbnails ajax php plugins Wordpress javascript

Category Web

Aditya Agarwal · Accepted Answer · 2020年9月4日 07:10

So,

In question you stated that the code needs to execute when the thickbox closes.

We can solve your problem with 2 approaches, first is to check for thumbnail url change every x seconds, and then update the img if the url changes, this works good but its data heavy, so I cant recommend that.

Second method is, to have the event of thickbox close to be used, whenever the thickbox closes, run an AJAX call that returns the thumbnail url, and this URL is then put into content.


jQuery(".Thumbnail.Close").click(function(){
jQuery.ajax({
url: "/wp-admin/admin-ajax.php",
type: "POST",
data: {'ID' : '<?php echo $thispost->ID; ?>', 'action': 'Featured_Image'},
dataType:'json',
success: function(response){
        console.log(response['img']);
        jQuery('.Thumbnail-IMG').attr('src', response['img']);
}
});

Here I assume that the Class for closing the thickbox is .Thumbnail.Close I tested this code on a normal iFrame, because most of readers of this answers probably would be doing a normal iframe implementation only.

So when the thumbnail close button is clicked we run an AJAX call, here I used PHP to put Post ID into JS data, incase you want to it differently, you can use hidden input field to store Post Id, and then retrive it using JS too.

Next Up here's the code for the AJAX php portion.

function Featured_Image(){
        if (has_post_thumbnail($_POST['ID'])) {
            $return_data= array('img'=> get_the_post_thumbnail_url($_POST['ID'], 'full'));
        }
         wp_send_json($return_data);
        exit;
}

add_action( 'wp_ajax_nopriv_Featured_Image', 'Featured_Image' );

add_action( 'wp_ajax_Featured_Image', 'Featured_Image' );

Use AJAX to fetch Current Post Thumbnail for Wordpress when Uploaded throughMedia Uploader Frontend

About