Winder Gibson Architects Website

[Jonathan Lahijani]

Hey all,

I launched this website a few weeks ago:

http://www.archsf.com/

It was deceptively simple looking at a first glance of the mockups, however this project turned out to be very challenging and ProcessWire really shined, as it always does.

The main template being used on the site is the Project Category template.  Here's the "Residental" page, which is powered by that template:

http://www.archsf.com/project-categories/residential/

As you can see, if you're on a large screen, there are 5 blocks across (1 callout + 4 projects).  I'm using Zurb Foundation (the Grunt/Libsass version, which rocks), however like most CSS frameworks, there isn't an even 5 column structure, so I had to take care of that manually.

Then, add in the fact that the website is full browser width, which presents a whole host of width/height manipulation that must be done.  All the project thumbnails are the same size, but that first callout is text-based so it's height must calculated based of the height of one of the project thumbnails.  But of course, the thumbnails themselves are dynamic in height depending on the browser width.  And, you can only get the height of the images once they are loaded in (which is easy thanks to the imagesLoaded plugin).

Now, if you look at the next row, it's not 5 easy blocks across, but rather 2 blocks, then a big block that takes up 2 block spaces, then another regular size block.  I went through some different approaches to handle that situation, and what I ended up doing is hardcoding a the layout so that specific blocks would appear in specific places.  It's not a masonry / nicely floated structure!

Then, let's not forget this is a responsive site.  So, for the phone-sized breakpoint, there's actually another repeated layout of all the project thumbnails, but it's set to hidden unless viewing that breakpoint (which will hide the other breakpoints).  That breakpoint has 2 blocks across, with the occasional 1 block featured project.  There is also the tablet-sized breakpoint, which has 4 blocks across.

This approach, from a code point of view, is a bit ugly in that content is being repeated on a page, however this was a necessary decision I had to make in order for the complicated layout structure to work.  It didn't seem to affect the search engine indexing of the site however.

Also, each project thumbnail also has different image sizes based on the breakpoint being viewed.  ProcessWire makes creating thumbnails on the fly so easy, which is a huge plus (especially compared to WordPress).

Oh, while administrators have the ability to create projects, they sometimes wanted the ability to have a project assigned 2+ times for a page.  Now, having them create a repeat project would be inefficient, so I created another template type called 'duplicate_project' which allows a custom title and thumbnail, but then has a dropdown field that makes the duplicate project act as the main project.

As for the lightbox that appears when clicking on a project thumbnail.  An ajax request is made to the project template file, which returns a JSON object containing the lightbox image data for Blueimp Gallery, which is the lightbox being used (not Foundation's Clearing Lightbox, which I find very annoying!).  It works well, except aligning the bottom-left caption (and bottom-right "Project Information" toggle) was an huge exercise in manipulating the absolute positioning of that element, relative to the image itself, because Blueimp by default doesn't align captions relative to the image.  I considered using other lightboxes, but Bluimp turned out to be the best one for my needs, and it's responsive out of the box.

The projects themselves have their own individual pages/URLs, but not in the classic sense.  If you go to a direct URL of the project, I wrote some code so that it will show the FIRST category it's been assigned to, and then automatically bring up the lightbox containing the projects images.  It does this by detecting the the page being hit is either project-category.php or project.php and running the necessary code, which involves the same AJAX request to bring up the lightbox.

Example:

http://www.archsf.com/projects/aptos-street/

The firm page is whole other beast, but I won't get into that.

Screenshots demonstrating some internals:

• Editing a Project Category: http://goo.gl/T30AEh
• Editing a Project: http://goo.gl/fekgqQ
• Editing a Duplicate Project: http://goo.gl/ppKfo5
• Editing a Callout: http://goo.gl/gfEbPO
• Editing the Home Page: http://goo.gl/rbHlRQ
• Overall Page Structure: http://goo.gl/gfEbPO

Enjoy.

Jonathan

[Craig]

What a fantastic and well-suited design! And thanks for sharing your challenges with the design and positioning - it certainly wasn't easy to achieve going from your description, but the end result looks brilliant. Well done

[totoff]

Site of the week!

[horst]

Very well done site! 

But IMO there is room for a little aprovement regarding the popup slideshow. The overlay is to much transparent. The color of the blueimp-overlay-div is set to rgba with 0.7 and additionaly to this a opacity of 0.5 is aplied. As the result the page content is not coverd enough and interferes with the presentation of the projectimages.

EDIT:

What I mean is that the images are more outstanding in the second screen, on a darker, less transparent background / overlay:

Edited December 6, 2014 by horst
added screenshot

[videokid]

Very NIce...
 

Good Zurb Foundation use...

just a pitty there's no Opera < 15, or other older browsers, fall-back [this has nothing to do with your design of course].

[iNoize]

Wow. Well explained workflow

[felix]

Very nice looking site and well explained workflow.

Is there any reason you didn't use something like isotope for handling the block grid? I already used it in a lot of projects and it works pretty good for those kind of layouts.

[Jonathan Lahijani]

Hi Felix,

I remember giving Masonry a shot, but at the time, I think I hit some sort of limitation that I believe now really isn't a limitation.  I'm going to give Isotope another look however now that the dust has settled on this site.  I'm also probably going to swap out the Blueimp Gallery with Slick Carousel.

Horst... thanks for pointing that out.

Jonathan