Community Land Trust

Custom WordPress theme for 'Community Land Trust', a non-profit society serving as the real estate development arm of the Co-operative Housing Federation of BC. Their mission is to acquire, create and preserve affordable housing for future generations with a focus on development and redevelopment of co-operative and non-profit housing.

• Authors:

  • Jarid Warren [ [email protected] ]
  • Vanessa Bertoletti [ [email protected] ]
  • Einer Lim [ [email protected] ]
  
  
  
  

Site Features

• RWD optimized from 320 - 1920px
• Responsive menu structure:
  • Hamburger menu in mobile with animated icon
  • Dropdown menu on hover in desktop
• Dynamic Google Map that displays properties entered with a custom post type
• Carousels for efficiently showing media mentions, press releases, properties, etc.
• Custom background images with company logo
• Custom 'Timeline' graphic with counting numbers on front page
• Multi-path form that directs leads according to their motivations
• Lead/Email database
• Social share functionality on press releases and media mentions
• Website is populated entirely with WordPress backend
  • menus, contact forms, social profiles, even hashtags are entered by the user

Technology

• JavaScript ES6 / jQuery
• WordPress / PHP
• NPM / Gulp / Babel
• Sass / CSS3

Code Sample

This code excerpt dynamically changes the zoom of the Google Map depending on what pins have been populated. The code measures the horizontal and vertical bounds of the map, then depending on the resolution of the map on the page, changes the zoom accordingly.

The zoom is an interger, so the last line of code removes the decimal place.

GLOBE_WIDTH is a constant defined by the Google Maps API, as the base width of the map when zoomed completely out (256px).

function calculateZoom(bounds) {
    const GLOBE_WIDTH = 256;
    let angle = bounds.maxLng - bounds.minLng;
    let angle2 = bounds.maxLat - bounds.minLat;
    let delta = -0.5;
    if (angle2 > angle) {
      angle = angle2;
      delta = 2.5;
    }
    if (angle < 0) {
      angle += 360;
    }

    return Math.floor(
      Math.log(($('#map-canvas').width() * 360) / angle / GLOBE_WIDTH) /
        Math.LN2 -
        delta
    );
  }

Setup

Install WordPress:

• Download Wordpress and place directory at root of server (you'll need a tool like MAMP if you wish to host locally)
• Replace themes, plugins and uploads folders from install with ones in this repo
• Install the following plugins to ensure full site functionality:
  • Gutenberg
  • Custom Field Suite
  • Gravity Forms

The following should be done in themes/community-land-trust/

Initialize NPM:

> npm init

Install Gulp:

> npm install

Convert Sass files to CSS:

> gulp sass

Call Babel & Uglify on JS files:

> gulp scripts

Launch Browser-Sync to automatically update changes:

> gulp browser-sync

Watch changes to Sass/JS and automatically run scripts/sass:

> gulp watch or gulp