Ethan Butler: Using the REST API for Better Responsive Images

Continue the discussion

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Published

August 19, 2016

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 »

Rate this:

Event

WordCamp Asheville 2016 46

Speakers

Ethan Butler 1

Tags

Responsive Images 9
REST API 35

Language

English 4430

Download
MP4: Low, Med, High
OGG: Low
Subtitles
Subtitle this video →
%d bloggers like this: