Five interesting ways to use Sanity.io for image art direction

Share this:

When we saw Chris put up a list of cloud-hosted data-stores, we couldn't resist letting him know that we also had one of those, only ours is a fully featured CMS that come with a rich query language and an open source, real time, collaborative authoring tool that you can tailor to your specific needs using React. It's called Sanity.io.

“Add us to your list!” we asked Chris. “No, your stuff is interesting, can’t you write about you,” he replied. “Maybe something that would be useful for people working with images.” Challenge accepted!

Systems like Sanity wants to free your content from the specific page it happens to be sitting on, so that you can flow it through APIs. That way you can reuse your painstakingly crafted content anywhere you need it.

So, what does this mean for images?

Images are the odd ones out. We can capture documentation articles, pricing plans or project portfolios as potentially complex, but ultimately graspable data-structures that machines can query and process in many useful ways. But images? They're really just bags of pixels sitting at the end of a CDN, aren't they?

We came up with some ideas anyway because everyone needs images and images should be just as willing to travel to new and exciting places and services as the rest of your structured stuff.

So, here we are with a medium-sized bag of image tricks you can pull off with Sanity.

1. Grab the palette from image metadata

Ever tried to overlay text over a random image submitted by a user? How did that work out? We've usually ended submitting our images to filters till they're predictable and skulked home with a moody expression.

We thought it would be nice to ship an image palette with your pictures so you can select between dark and light typography as well as pair visual elements with image color. This makes legibility so much better and prevents clashes between the colors of images and text.

2. Get low-quality image placeholders

However fast and nearby your CDN is, it still takes time to transmit large image files. So, we included a Low-Quality Image Placeholder (LQIP) with your image metadata. It's a base64 encoded string of your photo at 20px width. Getting LQIP in the first request lets you bake a proxy image right into the HTML.

3. Use on-demand image transforms

You should be able to store archival originals and get the image in whatever resolution and format you need. Go ahead, upload your 268 megapixel TIFF, and ask for a 128x128 cropped JPEG with a 50% blur.

The transforms are generated from URL-parameters and generated on the first request. We cache the result locally and on a CDN so many requests for the same result image will be super snappy.

Take this image of the Carina Nebula. We uploaded a 29.566 x 12.960 version of it. Let’s say we wanted a PNG version with a 500px width. Attach ?w=500&fm=png to the image URL, and there it is:

Not only is it hard to hear screaming in space, it's also hard to judge directions. But let’s say you need to rotate the image. Well, you can append &or=90 and it's tilted 90 degrees (and scale it down to 128px):

It's not always as fun as this to mess around with URL parameters, so we made a JavaScript library that makes it a bit easier. Install it with npm install --save @sanity/image-url and learn how to use it (we use it in the demos throughout this post).

4. Crop and scale to fit around a focus point

Those pesky images with their fixed aspect ratios. In addition to not knowing the pixel density of the output device, you often don't even know what crop would be best suited for the layout. Even on a single website, you'll often use the same image in different layouts, and often need to serve them up to third parties, like Facebook, that expects specific aspect ratios.

Custom crop and hotspot in Sanity Studio

To ease the pain of dealing with this, we've let content editors set hotspots and crops for images. We have also made a JavaScript package that does all the hard work of making the correct image transform URLs for you. Simply pass an image asset and the size you want and we'll figure out the crop and scale.

5. Make a real-time photomap

If this isn't turning it up to 11, it's at least a good 10.5.

We can extract EXIF and geo-location data from an image. EXIF-data contains information about the camera state when the photo was taken (e.g. exposure, aperture, lens, if the flash went off etc). Due to privacy concerns (we take GDPR-compliance super seriously) we have turned the feature off by default, but if you set [options: { metadata: ['exif', 'location' ] }in your schema options, they will be included.

We have made a tiny demo that lets you upload an image and, if it has location data (e.g. typically those you take with your phone), it will automatically pop up in the map — because the API is real-time with listeners!

If you want to test out Sanity and these features yourself, you can get started with writing npm i -g @sanity/cli && sanity init. Even though the CLI guides you through the installation process, it's worth checking out the documentation (if not for the illustrations alone) and there are always people that want to help out with the nitty gritty in our Slack group.

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.