Tag Archives: jquery

Developing #GettyInspired

As I posted last week, in addition to launching the Art of Food Mobile Tour, we also went live with #GettyInspired.

#GettyInspired iPhone screencap
Spearheaded by my colleagues Annelisa, Sarah, Christopher and Mikaela, #GettyInspired is a place for the general public to share both their art and their views on what about the Getty (Center and/or Villa) inspires them. It is seriously cool in that it’s possibly the first time we’ve ever had something this big that features about 90% user-submitted content.

It was a project with a fast turnaround, so a lot of the development process is a blur, but I’m very pleased with the (almost) finished product. It looks like a simplistic site, but it really, really wasn’t. The project initially landed on my plate in August, after the previous developer left us for the corporate world, but I probably spent about three or four solid weeks actually on the ground, doing the building, working on very little else.

I knew from the beginning that we were going to build it in WordPress, but I spent precious time looking for a theme that might already have the functionality we were looking for—user-submitted posts that didn’t require a login; filterable image grid of posts for every page, with upvoted posts floating to the top; full-width header areas that could be images, videos or slideshows, as needed. Eventually I gave up and went with a free theme (Hatch) that I decided to use entirely based on its built-in function of listing all the posts on the home page in a grid of featured images.

Funnily enough, it turned out to be a pointless decision because to this day, I still have not figured out what function the theme is calling on to do that. Why is that important? Because I had to recreate that effect on every individual post page, and since I couldn’t figure out how the home page was doing it, I had to find a different solution for it anyway.

That problem was solved with Playing with columns—stacking posts in a grid and the Isotope plugin.

Isotope demo gif

(I realized later that I could’ve just used Isotope by itself, but I didn’t have time to go back and recode it. S’ok, they still work well together. But Isotope totally rocks, and if you’ve never used it, take a few minutes to go check it out, it’s a fun plugin to play with.)

usp-pro-1

usp-pro-2Then there was the requirement that the site enabled users to submit posts without needing a log-in/account, so the editors wouldn’t have to spend their days cutting and pasting into the WordPress back-end. For that I picked the USP Pro from Plugin Planet. Because it was so customizable, the learning curve was a little steep, but the support response was excellent (except for the very different timezones—I’m assuming the developer lives in Europe). Thanks to USP, visitors can fill out the online form and upload an image, and the content is automatically transferred to a WordPress post that is saved as a draft, needing only to be approved and published by one of the team’s editors. The editors can add an aside box for either a pull-quote or a related information link, and they can make a post “sticky” so it appears at the top of the post grid, but otherwise they rarely make any edits to the actual submitted content. (Any typos are not ours, people!)

The stakeholders also wanted a feed for the Instagram page. Annelisa found the perfect plugin for that—Instagram Feed from Smashballoon. Its single best feature, IMO, is the ability to block individual posts from appearing in the feed, to prevent spamming and keep truly offensive material from the page.

Setting the header image for each post page to be the user’s submitted image was pretty easy—using featured images is common in WP, so finding the right php calls was a cinch—but setting playable videos in that spot was a lot harder. It took at least half a day to find the right WP hook to return the string I needed, the correct php functions to display the video properly, and the right way to add the attributes to repress video titles and related videos. (Syntax errors will someday be the death of me!) Based on the difficulties of adding videos as headers, I assumed adding slideshows would be just as aggravating, so I put it off, but it turned out to be easy-peasy in the end. With all the heavy-lifting I’d already done for the videos, the code for the slideshows took mere minutes. (Yay for unexpected easiness!)

And that was really the main benefit of all the lines of custom code I had to add to the theme templates (which no longer resemble Hatch at all)—I learned enough in the laborious and frustrating beginning days to make the end stuff so much easier. I used PHP so the template knows whether the post originated from the USP form or from the WP back-end—it displays the content accordingly, and the editors can easily create custom posts that don’t have to follow the same format as the user-submitted posts. There’s jQuery in there to add those silly red asterisks to the required fields in the submission form (oddly one of the few things the plugin didn’t include); to change the padding to posts if they have an aside box; and even to replace any links hard-coded for our blog server (damned URL masking–an unexpected issue that totally broke things once the masking was activated the night before launch). And there’s a ton of custom CSS for every padding, margin, placement, and color.

It’s not finished, though, and there are still coding challenges. As I mentioned above, the stakeholders want users to be able to “up-vote” posts, and I have no clue how I’m going to do that. Right now I’m working on what will happen when we have too many posts to reasonably load up front. Pagination won’t work, because the filters at the top will only filter what’s actually on the page. Now I’m researching the “load more” feature that we’re all familiar with from other pages (most notably, Facebook). Will the filters still be limited to only those posts that are already on the page? Dunno yet, I gotta test that out. And if that doesn’t work, I’ll go back to the Isotope documentation (the filters are an Isotope feature) and see if there’s a way around it there. *fingers are crossed*

So that’s #GettyInspired.

Ta da!

I couldn’t have done it without Google, and I have no idea how *anything* got done before the Internet. Seriously.

The Art of Food

For months I’ve had nothing to really post about. First I was project-less and mostly bored to tears, and who wants to write about that, much less read about it? Then I was TOTALLY SWAMPED and there was no extra time (or energy) left at the end of the day to type something up.

But last week we launched the two big projects that have been filling all of my hours, and I’m extremely proud of both. One was #GettyInspired, which I’ll share more about in another post. The other is the Art of Food Mobile Tour, a web-based hunt designed specifically to complement The Edible Monument exhibition at the Getty Research Institute, and the manuscript exhibition Eat, Drink, & Be Merry at the Getty Museum, both of which opened on October 13th.

The Art of Food Mobile Tour
The Art of Food Mobile Tour

As a scavenger hunt (with prizes!), the content really only makes sense when you’re physically in the galleries, so it has no social media sharing features, and we have yet to figure out how to amend it to make the content evergreen after the exhibitions close in 2016. But I still like sharing it because it was so much fun to build, and its interactivity makes me giddy, remembering all the trials and frustrations I went through to make it work so well.

screencap-voilaOur team–Liz McDermott and Alicia Houtrouw from the GRI; Laura Hubber, Karen Voss, and Cathy Bell from the Museum; and me, from the Web Team–spent about ten months meeting and planning the content for this “tour”, but for my part, I spent about two months building and debugging it. Even though it was specifically built to be used only on mobile devices, and therefore didn’t need to be responsive, I still chose Foundation 5 as its base, so I could use Foundation’s pre-built classes and its sliding menu module.

My favorite function of the site is how it tracks every.single.thing you click on, and adjusts accordingly. Thanks to jQuery’s super-easy management of localStorage and the gazillion and a half unique IDs throughout the site that are tracked at all times, the site knows when you’ve finished each object and each character, and when you’ve finished all the characters for each exhibition, and it remembers until you reset the game. (The reset link is only on the winner pages.) Probably the hardest part of the build–and certainly the most frustrating–was making the custom jQuery, the animatedCollapse plugin, the auto-scrolling functions and the timers all play well together. It was a rare day when fixing one thing didn’t break something else.

screencap-em-charactersBut it all came together beautifully, and in plenty of time for the launch date. I learned a LOT about jQuery’s syntax and methods during this project, and I had fun doing it, which is really the best kind of project.

(Cranach Comparison tool would’ve been sooooo much easier with jQuery, 10+ years ago.)

Browser chrome on mobile devices

Today I’ve been trying to solve the problem of the header and footer chrome on mobile browsers. Our project designer came up with a beautiful grid homepage for the small mobile website we’ve been working on, but the chrome definitely detracts from it.

So far I have tried the code here and here. They looked promising, but neither worked as indicated, i.e. the page would move down, but the chrome wouldn’t disappear–at least, not on my 4S.

At the moment I am stuck. Building an amazing fullscreen mobile experience seems to indicate that it’s a bad idea to hijack a user’s browser anyway–API is where it’s at. Unfortunately I don’t think this app provides enough content to make it worth anyone’s while to save it to their desktop. So right now, looks like I’m going back to the designer to give her the bad news.

I’m still looking for a way around it, though. I don’t believe anything is impossible, it’s just not yet known to me.