Create a new post using rest api and save featured image using an external image url
I am trying to create a post using the rest API. Which I am able to do with a fetch request as below.
OurPostData
contains the title, content and
URL of a featured image
which is an external url
fetch('https://mywebste.online/wp-json/wp/v2/post', {
method: 'POST',
credentials: 'same-origin',
headers: new Headers({
'Content-Type': 'application/json;charset=UTF-8',
'X-WP-Nonce': qrAjax.nonce
}),
body: JSON.stringify(OurPostData),
}).then(response => {
console.log(response);
return response.json();
}).then(data => console.log(data));
});
This works except for the featured image. If I am able to do pass it to the callback function done using the below code may be I can achieve that?
add_action('wp_ajax_code_post_create', 'code_post_create_callback');
But I don't know how to pass it. The
data
in my code has the post id. ( How can I access it in
code_post_create_callback
?)
I can save the file using below
$file = 'https://externalwebsite.com/image.jpg';
$file_array = [ 'name' => wp_basename( $file ), 'tmp_name' => download_url( $file ) ];
// If error storing temporarily, return the error.
if ( is_wp_error( $file_array['tmp_name'] ) ) {
return $file_array['tmp_name'];
}
// Do the validation and storage stuff.
require_once ('wp-load.php');
require_once ('wp-admin/includes/admin.php');
$id = media_handle_sideload( $file_array, 0, $desc );
//var_dump($id);
// If error storing permanently, unlink.
if ( is_wp_error( $id ) ) {
@unlink( $file_array['tmp_name'] );
return $id;
}
How do I call
code_post_create_callback
? How do I access the
data
in this callback?
Solutions
Instead of using
wp_ajax_
(i.e.
admin-ajax.php
), how about adding a
custom REST
API
field
and then using its
update_callback
, download the remote image and set it as the post featured image?
Working Example
add_action( 'rest_api_init', 'wpse_381217' );
function wpse_381217() {
register_rest_field( 'post', 'featured_image_url', array(
// If you don't want to expose the field in the REST API response, you
// may ignore the get_callback, i.e. don't set it.
'get_callback' => function ( $post_arr ) {
return get_the_post_thumbnail_url( $post_arr['id'], 'full' );
},
'update_callback' => function ( $url, $post_obj ) {
$file_array = array(
'name' => wp_basename( $url ),
'tmp_name' => download_url( $url ),
);
if ( is_wp_error( $file_array['tmp_name'] ) ) {
return false;
}
$id = media_handle_sideload( $file_array, 0 );
if ( is_wp_error( $id ) ) {
@unlink( $file_array['tmp_name'] );
return false;
}
return set_post_thumbnail( $post_obj->ID, $id );
},
'schema' => array(
'description' => 'Featured image URL.',
'type' => 'string',
),
) );
}
Then, in your
OurPostData
variable, add the featured image URL with the name
featured_image_url
. E.g.
const OurPostData = {
title: 'testing featured_image_url',
featured_image_url: 'https://example.com/image.png',
// ...
};