Ensoul.co.uk

[Peter Knight]

Hi Guys,

A new launch from us.

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

Background

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. 

<?php

	// 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>';
  	}
	
	else 
	
	// 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) { 
	echo"
	<script>
	  $.backstretch('$image->url');	
	</script>
	";
	}
}
?> 

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">
            <strong>View:</strong>
                <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>
     
            <div class="portfolioContainer">
             <?php
                  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'>
                  </a>";
                  }
              ?>
            </div>

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

Conclusion

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.

 

[Craig]

Fantastic! Excellent finish all round, and thanks for highlighting a few of the PW methods used

[tpr]

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

[Peter Knight]

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

For sure! Phase 2 is on right now!

[Philipp]

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.

[Peter Knight]

Thanks Philipp

That's pretty distorted alright. Possibly because I'm serving up a 2X image and scaling it down with a max-width selector in CSS.

Will look into it right away.

[joshuag]

Fantastic! Really love this site. The imagery is fantastic. Just showed a client this site as an example of using larger images and they were blown away. I owe you a beer amigo!