Join Morten Rand-Hendriksen for an in-depth discussion in this video Display responsive featured images, part of WordPress: REST API.
- [Instructor] The technique we used in the previous movie to display the embedded author object and the name within that object can also be used to display the featured image. However, when it comes to featured images, we have to add a lot of additional HTML. That's because WordPress now ships with responsive images and when we output new content in the template it should still use those same responsive images. That means it's not enough to just point at one of the images, we have to provide the full responsive images markup to allow the browser to pick whatever image source is the most appropriate for the current screen width.
That is the object featured media, which is contained within the regular post object. If the post object has a featured image, this will have a value, otherwise it will set to zero. And we can use that zero value later to test whether or not there is a featured image to be displayed. Then, we set up an empty variable, just called featured image, so that it's global to the current function and we can call it in later. And then we get the featured image function called get featured image. Here, we first grab the featured image ID and test whether or not it's set to zero.
If it is, we simply set the featured image variable to nothing, and then down at the bottom we return featured image. If, on the other hand, we do have an ID, we need to go into the embedded object, get the first featured image item, and then form a bunch of actions on it. That's what's happening down here in the else statement. First, we set up a new variable, featured object. This variable grabs to object, the embedded object within it, and then the WP featured media item, and the first item within that.
The reason I'm using this bracket notation instead of dot notation is because this particular value has a colon in it. If you go to Postman, you'll see there's some of these values, like WP feature media, and WP term, that have a colon in it, and if you try to use dot notation, meaning it says, object dot embed dot WP colon feature media, it'll just return an error so you'll have to wrap this in these square brackets. That's also why I've put this in a separate featured object, so that I can just use dot notation later on.
From here, I've created a new variable, image large, and set it to empty. That's in case there is no large image. Then we grab the image width, so here we grab the featured object, that would be the image up here. Then we look for media details, sizes, full, and width. Same thing with the image height. Then, if the featured object media details sizes has it's own property as large, meaning we have a large image, then we grab the large image property, otherwise we have it up here as nothing. And then finally, we populate the feat image variable.
Here, just like with the post itself, we're setting up an HTML structure that contains elements from the object provided by Ajax and the rest API. Here, we're setting up the image source, with the featured image source, then we're setting up the width and the height, then setting up some classes, an alt tag that's empty, and then we set up the source set list, which has all the different parameters for different sizes. And finally, we set the sizes attribute. Now, this particular markup will change depending on what theme you're using.
And when we scroll down, we find the function, build post, and inside build post we'll just call get featured image. So that means we always run build post, we always run get featured image, and get featured image will either be nothing or it will be the full markup for the featured image. Build post is finally called in at the very bottom of the function, here. So, the new function, the previous post, contains both the featured image function and build post, and calls everything together at the very bottom.
Here's what all that looks like in the browser. Same posts as before, scroll down, find a link, click the link, the featured image is brought in, then the content, scroll down, find the next link, click, this one does not have a featured image, the next one has a featured image, and so on and so on. Like I said previously, now that you see how all this works, I urge you to go and inspect this code before we continue so you can understand exactly what is going on and how all these pieces fit together.
- Using a REST client to communicate with a REST API
- Reviewing available routes, endpoints, and arguments
- Adding custom post types and taxonomies
- Altering the API response
- Using PHP for resiliency
- Passing info using wp_localize_script()
- Setting up a REST API request through AJAX
- Outputting selected post data to the front end
- Formatting post data to match a theme
- Triggering AJAX for an infinite scroll effect
- Using AJAX to load subsequent responses