WordPress 4.4 was a milestone release, with the addition of both responsive images and a REST API. In this session, I’ll demonstrate API endpoints and JavaScript I’ve written for using the REST API and AJAX to load responsive background images into sites.

This technique has several advantages: first, using the background-image property is more semantic and powerful than traditional s. Second, you can have a dynamic background on an otherwise cached page. Third, you have more information available about how your user is viewing your site than just their viewport width.

The session will include three short demos: First, a basic demonstration of the technique. Second, using array_rand on the server to pull in a random background image. And as a finale, using the ambient light API in OSX Firefox to load in “day time” and “night time” images.

Take aways:

The addition of responsive images into the WordPress core was powerful, but it doesn’t solve every problem and isn’t always semantic.
Using AJAX to load images has many benefits because you can know more about the client.
The WordPress REST API can be used for more than you realize.

Presentation Slides »