Jump to content


Peter Knight

Recommended Posts

Hi Guys,

A new launch from us.

Ensoul.co.uk - Interior Design, Architecture & Project Management, London.


Based in London, Ensoul are Interior Architects specialising in high-end / luxury interiors, basement conversions, extensions, and residential renovations etc.

We based the site on ProcessWire because it's agile, scalable and a pleasure to work with. Given that the Ensoul team will shortly be updating the site and blog in-house we needed a CMS that would also be intuitive for them to use.

Overall the nature of the site is very visual and relies heavily on photography. It was essential the CMS had solid image management built in and this was another factor in choosing to run it on ProcessWire. More on that shortly.


The plan

This is Phase 1 (design and launch) of a multi phase project. Phase 2 consists of optimisation, refinement and a comprehensive SEO project. In particular we'll be redesigning the homepage, building a blog and looking to speed up page loads. With ProCache due to be installed very shortly, we plan to dramatically increase the site speed, minify a lot of the JS and gain points on Googles mobile speed test tool.


Image Management

I just wanted to highlight some of the nice image management features which ProcessWire brought to the table.

1. Background images

Most of the pages have a large background image and we wanted the freedom to swap and change these on a page by page basis and test a lot of different photos. Given 80% of the page and background image is covered by content, not every image was going to work. We solved this simply by creating an image filed called Background Image into which we (or client) can drag and drop a photo of their choice.


Any background photos are integrated into the jQuery Backstretch plugin

In the case of the homepage where three background images are used, PW and Backstretch will create a slideshow instead. 


	// if Background_Image field contains more than 1 photo, echo the images in a slideshow
	// Mainly for Homepage
	if($page->Background_Image->count > 1 )
  	$bgimage = $page->Background_Image;
  	echo '<script>$.backstretch(["'; 
  	echo $bgimage->implode('", "', "url"); // results in url", "url", "url
  	echo '"], {duration: 5000, fade: 1000});</script>';
	// otherwise echo a single image on its own
	// Mainly for all other pages
	if($page->Background_Image->count == 1 )
	$bgimage = $page->Background_Image;
	foreach ($bgimage as $image) { 

2. Portfolio

The Portfolio page is image heavy and features a masonry grid of photos which are then filtered by project type.

On the front end, I was able to restrict each thumbnail and pop-up image to the size of my choice without having to crop each individual photo. To achieve this, I used a $thumb and $large variable and PW automagically handled the cropping. 

foreach($page->Images as $image) {
$large = $image->width(800);
$thumb = $image->size(340);
echo "....

Creating the filters which toggle the display of rooms by type was surprisingly easy with ProcessWire. I used the image tag field which I hadn't really used before and quickly allowed me to tag a photo as a kitchen, bedroom or basement etc. It really was an eye opener into the power of PW:

<div class="portfolioFilter">
                <a href="#" data-filter="*" class="current">All</a>
                <a href="#" data-filter=".Kitchen">Kitchen</a>
                <a href="#" data-filter=".Bedroom">Bedroom</a>
                <a href="#" data-filter=".Bathroom">Bathroom</a>
                <a href="#" data-filter=".Sitting-Room">Sitting Room</a>
                <a href="#" data-filter=".Gym">Gym</a>
                <a href="#" data-filter=".Basement">Basement</a>
                <a href="#" data-filter=".Home-Office">Home Office</a>
                <a href="#" data-filter=".Kids">Kids</a>
                <a href="#" data-filter=".Garden">Garden</a>
            <div class="portfolioContainer">
                  foreach($page->Images as $image) {
                  $large = $image->width(800);
                  $thumb = $image->size(340);
                  echo "
                  <a class='fancybox-portfolio port-item  {$image->tags}' href='$image->url' rel='gallery1'>
                  <img src='$thumb->url' alt='$thumb->description' class='portfolio-thumb'>


3. Coverage Thumbs

The client is receiving regular coverage in leading interior design magazines and at the end of the project I required a way to differentiate between Features and Opinion pieces. Again, PW made this very easy for me. I knew I could easily create a field called Coverage Type and select the type of coverage a publication should belong to.


Traditionally I would have relied on the Page field to achieve this but I didn't need the initial more involved setup which that would require. Instead I opted for the new, simpler Options field instead.


Featured Modules

  • RenoTheme
  • CoreConfig
  • Upgrade
  • Markup Simple Navigation
  • CroppableImage 
  • FormBuilder
  • ProCache (shortly) 
  • SEO 
  • Page Path History
  • Redirects
  • SiteMap XML
  • ListerPro
  • WireMail SMTP


That's pretty much it. I know some of the techniques here won't set the PW world on fire and probably are pretty basic but hopefully seeing the screengrabs and examples will help other beginners understand PW a little better. Thanks as always to the PW community who helped build this with their advice and answers along the way.


  • Like 20
Link to comment
Share on other sites

Nice one, looks like you are getting the hang of PW and that is beneficial for you and your clients/visitors too!

I see some glitches on mobile, eg:

- menu doesn't show up on click (z-index?)

- parallax images ruin the UX - I would disable on mobile entirely

- portfolio images are wider than the page

- the main logo looks jagged

If you're before phase 2 than some of these could be added to the todo list :)

  • Like 1
Link to comment
Share on other sites

Nice site and a great description about the Solutions you found.



Just an issue with a "regular" PC: When browsing with the IE11 and Windows 7 on a regular (Office) FullHD Screen, the logo becomes crispy and unreadable. See the attached screenshot.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...