The other week, we published our latest interactive: ‘Male Plumage’ Then and Now: The Changing Face of Men’s Fashion. Now we don’t consider ourselves fashionistas, but one morning Michael got an email to upload a Newsweek article to Document Cloud. It happened to be an article from 1968 about men’s plumage, apparently around the time men first started to define a distinct American modern style via patterns and accessories. We looked at the article and started laughing at all the nostalgic memorabilia and vintage photographs.
The Newsweek cover containing the article depicts a Ron Burgundy-like character in a pink suit with some of the fashion items around him, depicted as cut-outs for a paper doll. In 1968 this depiction of changing outfits was for illustrative purposes, but in 2013 how could we re-imagine this cover? Could we see the cover come to life by having the pieces of clothing actually be changeable by the reader? It was fun to think about adding another dimension to print, and to look at something from the past and apply it to something current.
At the same time, Isabel Wilkinson, one of Newsweek’s fashion writers was doing a story on Men’s Fashion Week 2013 in Europe. We thought it would be a great idea to compare men’s plumage in 1968 to the plumage we see today as part of the fashion show. And so we had a project.
Under the hood
To begin, we imagined the cover pieces as draggable items and the 2013 plumage items would be stored in a drawer to the side. It was a fairly simple layout, allowing the cover to stand on its own and then become transformed by the reader into the moveable pieces. Instead of hardcoding the individual elements, we utilized The Miso Project from GitHub to create JSON from a Google Spreadsheet via an API key, which gave us flexibility to add or remove pieces as we were designing it. We used Underscore.js as our templating engine to make our HTML elements. More about Miso is explained in this ++previous post++ but for this project, under a tight news schedule, we used the ease of filling out an excel spreadsheet to easily get our JSON needed for our template. In our JSON, each object has an id, image to load to the template, layer or z-index value, and a classification of either “then”(1968) or “now”(2013):
In our HTML, we added a script tag to identify our template and classes containing values from our JSON, something like:
To make the elements draggable, we used jQuery UI like this for all of the item elements, since they all had the same class:
Drag events don’t translate too well on mobile, however. To fix that we loaded the plug-in jQuery UI Touch , which translated the appropriate touch handlers for mobile screens.
Now we have all of our elements draggable and organized based on if they are on the cover or in the “drawer”. The drawer element is something Michael came up with to allow the reader to pull and drag items into one place. Further, once the reader makes the plumage combination they like, it could be possible to share their design via social media. I’ll pass it on to Michael now to explain the development of both of these features.
The Drawer and Shareable Links
Thanks Clarisa. This was a fun interactive to work on and had a few tricky details—this drawer was one of them. As Clarisa said, we wanted to mashup the old style with the new. We also wanted an option to remove items from the canvas once you were done with them so you could clean up your design. In addition to .draggable(), jQueryUI has .droppable(), which lets you drop draggable items.
This was a little tricky because we wanted elements to be absolutely positioned outside the drawer but relatively positioned inside the drawer so they would stack up on top of each other. We handled this through swapping classes on .mousedown() and applying different positioning for each class.
To make it all shareable, we used jQuery BBQ which is super handy. On item drag, we recorded the final x-y position of each element and whether it was in the drawer or the canvas. We used jQuery.bbq.pushState()with a merge state of 0 to accomplish this. On load, we checked to see if someone had a saved state in the hash and if so, drew the plumage to reflect that.
Cues to interactivity
One small detail is the rotation that happens when you start the interactive. We needed to rotate the items because 1) they wouldn’t fit on the model in their original positioning; and 2) we wanted to cue the reader that the hitherto static image was now alive. This was also the logic behind spinning the model’s pinks suit: we needed a way to tell the reader that the image was was in the 21st century.
Clarisa Diaz and Michael Keller