2.5 Media and WPCOM

Hello everyone, I am Reggie Dawson. Welcome to the Get Started with WPCOM.js course with Tuts+. The last method that we will look at will be the media method. Again, many of the methods available for media are mirrored in Site. Now when we where using the post method I mentioned that we can add an image with our post. Typical if you're going to offer a custom admin screen for your WordPress site, your authors will like the ability to add images to their posts. In keeping with this, we will add the functionality for our addPost method to include images. Now before we get started, I want to a take a moment to highlight something I really like about the WordPress API and WPCOM. Normally when we are using images we are uploading them from our local machine. With the WPCOM and the WordPress API, we have the ability to upload our from a URL. This means that we can find content on the web and as long as it has valid URL, we can upload it directly to our media library without having to download it to our machine. In our example, we will use this to add our images to our post in our media library. First, let's go to our index.html file. The first things we are going to do is to move the post add form to it's own div so we have room to add some more fields I have also added some breaks to create some spacing around our blog add form. Then we add two more inputs and a textarea. The first input will be for the URL of the image that we want to see. The second input is for the title of the image. The textarea will be for the image description. After that, let's go back to index.js. Here we will just add on to the addPost function. First we will add variables to capture the value of the inputs in the textarea that we just added. Then we create a reference to media. Here we use the site ID with the media method. In certain instances such as trying to return or update a media object, we may have to provide the ID. Similar to how we have to use the post ID with the post method. Then we use the media.addUrls method, not add which is how it is displayed in the examples in the documentation. We supply the title, description and URL to this method. Now understand, all this is doing is saving the file as a media object in WordPress. It is not being added to the post yet. Then in the success method, first we log the image. I am just doing this so that we can see what is returned to us when we save the media object. Then after that, we are grabbing the media ID of the image and saving it as a variable Then we move the rest of our post add method into the success method. This is so that once the image is saved, we will add our post. The only difference is now we will add another field to our data object, the featured_image. When we save the image, we are also given a URL. We could have used this, but this would have created a new media object. By using the ID, the post will have the existing media object that we just saved. Then in the error method, we just log the error. Once you have that, go ahead and save your work and navigate to the project in a command line. Then run index.js. Once your project is up, navigate to it in the browser. Add a title for your post and some content. Then, add the URL for an image. Then I will add a title and a small description. After that, make sure the Developers Tools are open and click on Add Post. Now if we drill down to the object returned for our image, we can see the fields that are returned when we save a media object. The URL is the path that we can use to pull up our file from anywhere. The ID is what we use with our post. Now the object after that is the information that was returned when we created our post. If you look at this, we will see that our featured image now has the URL even though we supplied the ID. This is because WordPress recognized the ID and converted the post to use the media object URL. Remember, this would work if we supply the URL but we would create a second media object. In the next video, we will look at a few more methods available to us from site.