Lazy Loading Images with CraftCMS


A five month project built with the CraftCMS. Houwzer's website is a standard content consuming site with Home Listings, Customer stories, and a Blog.

In April 2017, Brolik began development work on a new website for Houwzer, a real estate startup in the city. Brolik has a small team for its website projects, consisting of 2 designers and 2 developers, with support from a collection of marketing experts and content writers.

Up until this point, Brolik had used a proprietary CMS with enough technical debt to make anyone cry. After 10 years with that CMS, we decided to finally make a switch and landed on CraftCMS for this project.

We had used WordPress in the past for some projects, primarily blogs, and found template development be a larger task in WordPress than Craft. There were a few other reasons why we decided to give Craft a try, but the main one was that none of our developers got excited at the prospect of working in WordPress for this project.

Craft primarily uses Twig as a templating language, with a plugin system supported by a fairly small community at the time of writing this. Creating the content management is similar to what you could expect while using WordPress and some form of page builder plugin, only with more control over the styling and code integrity.

My Role

On this project I was a mix between Senior Developer and Project Manager. CraftCMS was a new tool for us, so I had to be sure to keep ahead of the curve to avoid any technical blockades when it came to the team learning a new CMS. Thankfully, CraftCMS is pretty easy to understand.

In addition to learning the ins and outs of a new CMS, I was also the primary person keeping track of the project schedule once it reached development. I ensured that everyone on the team had the support and resources necessary to meet their goals and deadlines so that the project could stay on track. This included doing full code-review for every pull request coming in.

There were a few larger code tasks I handled throughout the project, such as setting up a structure and strategy for ensuring that our code blocks were reusable and not being constantly repeated. I was also responsible for coming up with an effective database and admin design for the case studies so that Houwzer would have some design control over their customer stories without breaking the flow.

Houwzer's site on different devices

The Site

Houwzer’s new website is fully responsive. The general approach Brolik takes to responsive isn’t to rely solely on a grid system. Designers and developers will check every single page on a multitude of devices and operating systems in addition to every size from 2200px down to 280px to make sure that on any device, a user will have the best experience possible.

We used a build system for the project. I haven’t made the jump to Webpack outside of Angular projects yet, so this one is using Gulp. Gulp has its ups and downs, but it does the job we need. One of the primary things we use Gulp for is compiling our Sass. We used to use Compass for compiling, but the build time for the files became astronomically long which is one of the primary reasons we switched.

Our Sass file pulls in sourcemaps and autoprefixer, pretty basic stuff. There’s a few other tasks in there for minimizing JavaScript and images.

gulp.task('sass', ['sass:svg'], function () {
  return gulp.src(settings.sass.input)
      .pipe(sass(settings.sass.options).on('error', sass.logError))

We broke up a bunch of repeating elements into partials to streamline some of the coding. The nice thing about Craft is that you create “fields” that can be used repetitively throughout the pages. So if we have a matrix set up for our banners that takes an image, an alt tag, and a title, it's easy to pass that information into a template that handles the design regardless of the page its coming from.

{% block content %}
  <section class="Home">
      {# Header Banner #}
      {% if entry.banner[0] is defined %}
          {% include 'common/banners/image-banner/_imageBanner.html' with { 'content' : entry.banner[0] } %}
      {% endif %}
      {# End Header Banner #}

      {# Intro Section #}
      <section class="introSection">
          {% include 'common/containers/intro-container/_introContainer.html' with { 'content' : entry } %}
      {# End Intro Section #}
{% block content %}

The client wanted real time filtering on the site, so we included AngularJS on a few pages to handle interactions. We could have done it with vanilla JavaScript, and we probably would if we did it over because while you can use AngularJS in small offshoots like this, it doesn't really make sense. AngularJS is a huge library to include just for a handful of interactions. Using AngularJS as we did made it easier for us to hit a fairly tight deadline. The main problem with using Angular on the site was that Twig uses the same bracket style, so we had to change that.

.config(['$interpolateProvider', function($interpolateProvider) {

The Sass was definitely a shortcoming in this project. We had all of the templates, pages, and partials broken up into their own files, which was good for organization, but the optimization was poor. Everything was included into a single CSS sheet, so there was an excess of unused styles on every page. I knew that doing a large stylesheet like this wasn’t the best solution, and had already decided that we needed a solution for the problem in future projects. Some of the steps I decided on for our future projects include:

  1. Using separate stylesheets for each page
  2. Inlining the page styles at the bottom of each page
  3. Only including the common template styles on pages that need them
  4. Including a small stylesheet at the top of the page
  5. Loading larger sheets asynchronously
// 7. Common Templates
@import '_messages.scss';
@import 'craft/templates/common/banners/call-out-text-banner/_callOutTextBanner.scss';
@import 'craft/templates/common/banners/image-banner/_imageBanner.scss';

// 8. Pages
@import 'craft/templates/blog/_blog.scss';
@import 'craft/templates/buy/_buy.scss';
@import 'craft/templates/customer-stories/_customerStories.scss';

Overall, for our first production attempt at using CraftCMS the project was fairly successful. The client was happy, and I think our team learned a lot. Brolik had been stuck in a rut of always using the same tools over and over, and branching out into totally new system helped to break some bad habits that were developing.