We have collaborated with IMAGEHAUS on a number of web projects over the years. They came to us with a fantastic redesign for their website. With that, we created a custom WordPress theme on their existing WordPress install.
Portfolio Grid
With the design that was delivered to us, IMAGEHAUS had a great 4 column grid for the portfolio section on the Home and Work Pages. Because there were options to make some items larger than others, we used Masonry so the items would wrap and flow around each other no matter the layout. This was something Flexbox wasn’t quite able to do and CSS Grid being with not quite enough support for our needs.
Flexible Content
With all of our sites, we leverage Advanced Custom Fields (ACF). To give the site owner/admin the ability to add blocks of designs anywhere on the page, we use ACF’s Flexible Content. This is key for IMAGEHAUS so they can ultimately have the flexibility on their content.
Timber
One of the pain-points of WordPress PHP is the lack of templating language in their template structure. The Timber Framework looks to solve this using the Twig Templating Language. This gives the developer clean and readable Views without php creeping in.
Example Timber View file
Keeping the logic out of your template/view files, this makes for very clean presentation code.
<button class="header__menu-toggle">
Menu
</button>
<a class="header__logo" href="{{site.url}}" rel="home">
<img src="{{theme.link}}/src/img/logo.svg" alt="{{site.name}}">
</a>
<a target="{{button.target}}" href="{{options.cta.url}}" class="header__cta">
{{options.cta.title}}
</a>
IMAGEHAUS delivered a stunning design that was exciting and fun to bring to life. They have received a plethora of positive feedback since launch as the site serves as a showcase for their business and the work they create.