iocreative

I have collaborated with graphic designer Isla Osborne on a number of projects. On this one she was also the client, as we were building her a portfolio website.

Since the site is to showcase both her graphic design and her art, Isla wanted a link in the menu bar which would allow easy switching between the two aspects of the site.  Clicking this link also needed to change the elements in the “Projects” drop-down menu. To achieve the latter I simply constructed two Project menu items in the built-in WordPress menu editor, added a different class to each, and used a bit of javascript to hide the Art projects when the Design link was clicked and vice versa.

To handle changing which posts are displayed I used MixItUp, a jQuery filtering and sorting plugin  from Kunka Labs. Like most javascript-based filters it only shows/hides elements that are already on the webpage.  However it also has an append method, which I hooked up to a variation of the “infinite scroll” pattern, to load more posts if the currently displayed ones don’t fill the screen, or if the user scrolls down. Each of the categories under the Projects menu also filters the displayed posts. To make it easier for Isla to add new categories which would also work as filters I added some code which automatically turned these menu items into filter buttons for MixItUp.

Since the different categories of post are shown on the home page depending on which filter is selected, rather than being showing on separate pages, I wanted to make it possible to link to a particular category. I first made each of the menu items add a hash to the url when clicked (e.g. #branding), and then added some code to check for these hashes when the page is being loaded. If the URL contains a hash for one of the categories then that category is loaded instead of the default view. I also set a cookie to remember the last category that was viewed; that way people who are interested in Isla’s artworks don’t need to change over from graphic design every time they view the site.