ProjectsDecember 1, 2023

Indus CMS and its image pipeline

Overview

The content management system behind the Indus property sites. The content team uses it to manage listings, media and page content, and it feeds both the public site and the private premium portal. Angular with Angular Material on the front, PHP and Node.js behind it, with some Python for the reporting side.

The image pipeline

This is the part of the CMS that mattered most, because it is what made the 70 percent load time improvement on the public site possible. The problem it solves is ordinary. Agents upload photographs straight from a camera or a phone. Those files are several megabytes each, in whatever dimensions the device produced, and a listing has a dozen of them. Left alone, they go to the website at full size, and the site is slow no matter what else is optimised. Rather than ask agents to resize images before uploading, which does not work, the CMS handles it at upload. A Node.js service built on Sharp takes each upload and produces the sizes the site actually uses, converted to WebP. The core of it is two endpoints. One takes a batch and returns the resized set, one optimises a single image:

Js

const sharp = require("sharp");

// resize a batch to the requested format, scale and quality
app.post("/bulk-resize", upload.array("files[]"), async (req, res) => {
  const options = JSON.parse(req.body.options);
  const info = JSON.parse(req.body.img_name_and_index);

  const width = Math.round(info.width * (options.scale / 100));
  const height = Math.round((width * info.height) / info.width);

  const resized = await Promise.all(
    req.files.map((file) =>
      sharp(Buffer.from(file.buffer))
        .resize(width, height)
        .toFormat(options.format, { quality: options.quality })
        .toBuffer(),
    ),
  );

  // returned to the client as a zip
  return sendArchive(res, resized);
});

Aspect ratio is derived from the original rather than passed in, so a batch of mixed portrait and landscape photographs comes back correctly proportioned instead of squashed to a common size. That sounds obvious and is the bug this kind of endpoint usually ships with.

Reporting

The CMS also carries reporting for the content team: which listings are being viewed, which are stale, and where enquiries are coming from. This is the part that decides whether a CMS is used properly, because it tells the team which listings are worth their attention.

Screens

Related projects

bouncer, CI gates that let anyone contribute

Five checks that sit at the door of your main branch, written as pure functions so the same modules run in CI, in a Cloudflare Worker, on Railway and in the browser. Pointed at a real 1,209 file repository it went from 45 blocking findings to 13, all 13 genuine.

Read case study View project Source

estate, a linter for your repositories

Checks every repository you own against declarative rules and exits non-zero, so the problems nobody notices for months fail a build instead. One Go binary, no dependencies, no dashboard.

Read case study Source