Images with imgix

We use the imgix image cdn to help improve image download performance, reduce costs and generally improve the performance of your Standfirst website. We also use this on many of our non-Standfirst custom builds.

There are a few older Standfirst sites running legacy code that may not fully support imgix controls. If you can't see the controls shown below, please contact your account manager or [email protected] to find out about what steps need to be taken to implement on your site.

Cropping

The idea with imgix is to not have to worry about manually cropping images in Standfirst. You can simply upload (within our size limits) an image and then since the Summer 2023 update, imgix will intelligently crop it. And in the event that imgix doesn't crop exactly as you'd like it to, you can take over by hand.

Here's an example of a photo that can be a tricky crop to automate:

As you can see - the image is tall and slim, and if you crop for a portrait shaped space in the centre, you'd end up with something like this:

That is absolutely not a good look!

So what can we do instead?

Well, if you take this image and upload to the media library in your Standfirst install (see Media Library ) and click on it, you'll see to the right, some options:

What you can see to the right is that there is something called Crop Type near the bottom, under your other image property settings, most of which are best alone. These allow you to control how imgix handles your image by default, rather than being automatic. This can be useful where you have prepared graphics that need to be handled just so - for example logos. imgix will generally work things out anyway, but it's best to do it nicely. But what if we want to control it finely. In the image above, auto-cropping puts some importance on the gentleman in the background, but the important people here are Gordon Brown and Wangari Maathai - so we need to adjust the crop:

The previews here show you the problem - Wangari Maathai is cropped out! Which is terrible. What we must do instead is to ask the system to focus on the two key people by setting a focal point in the image:

When you set a focal point, the previews showing the different styles of crops will show you if you've got things just right. If you have, press the "Save Focal Point" button and we're done!

Let's see how this looks on the front-end:

I think you'll agree that's better!