SPLOT: Kitchen Makeover

No, I will not be appearing on HGTV. This is just a demo of the Image Comparator (better name pending) using photos of my kitchen before and after the makeover my sister and brother-in-law helped with this summer.

The first of ?? many Simplest Possible Learning Online Tools (blame/credit @brlamb for the acronym).

before
after

Using a simple jQuery library to create this effect. More filler text as needed.

The intent is to now build a web based tool that would allow anyone to generate the thingy on the left, the first effort at a web app based inside a wordpress site. This could be shared as a theme others could put on their own site. The idea:

  • A form to create one, upload two images, add a title and caption.
  • Add code to generate a series of image sizes on upload (leveraging media library) e.g. 300x300 600x600, 400x380, 800x600, 1024x768, 380x400, 600x800 (?) because the jQuery plugin requires knowing size of originals.
  • Custom function creates a post (or custom post type, but a post with 2 custom fields can do) include URLs for uploaded images as post meta data.
  • Generate page would include links to possible options for display (size options, use title/caption or not) so a link can show it or a bit of embed code (iframe??) to insert it in a page.

May or may not work well on mobiles. Trying jQuery UI Touch Punch and sort of works on rotated iPhone. It's pre-alpha, baby.