Blurry Reflections – WP JSON API, Angular, & Images

I had a conversation with a professor from the School of Art yesterday that ended up someplace fun for me. The focus was on how technology might help art educators reflect on their work in a visual way. It took me a while to get that she really wanted something outside the norm but we got there eventually.

One of the ideas that came up was taking the featured image from the last 30 posts and applying a blur to it (I had this DS106 assignment in mind).

With bit of CSS and a new plugin (Better Rest API Featured Images Plugin¹) I was able to repurpose the Angular template I used for counting links in about 5 minutes. I also made another version that tries to overlay all the images in one spot.

Both need some tender loving CSS care and some additional focus to make sure they’re really capturing the right data but they’re examples that start to open the door to really different ways we can start to look at work in the digital realm. These abstractions can lead to reflection that wouldn’t necessarily be apparent from viewing the images in non-abstract form. You can see I tend towards black and white images. A number of my posts don’t seem to have featured images. (I’ll have to look into that.) It’s fun stuff and Angular makes it pretty fast and easy to whip these examples up.

You can see the source code on the page but here’s the relevant chunk for pulling the medium size of the featured image.

<div ng-repeat="entry in entries" >
      <div ng-bind-html="entry" class="holder">
      <div class="blur">
        <a href="{{entry.better_featured_image.media_details.sizes.medium.source_url}}">
    	 <img src="{{entry.better_featured_image.media_details.sizes.medium.source_url}}">
        </a>
      </div>
      </div>
  </div>