Feature Spotlight: Advanced Images

4th August 2016

Previously we saw basic image tags. Now we're going back to the featurespotlight site to see advanced image management with imgix.

Imgix allows us to control what happens to images after they get uploaded, and before they get presented to users. It's a fantastic way for designers to maintain sanity in a complex system.

We're going to replace this construction worker with a set of tags for advanced image manipulation.

First thing is to get a {% page %} tag and the rest of the basics in there.

Go ahead and upload an image and save with just that. Anything big and awkward will do. Let's just give it a look. You'll also note that when you uploaded a new picture, it didn't display in the editor until you publish and refresh. This is a photo of me pulverizing some pencil graphite to make conductive glue.

So now we deal with this mess.

First we want to resize the image so we add w=256&h=256

This forces a bad shape, so we'll also crop it with &fit=crop

{% imgix_url page.content.header_img %}?w=256&h=256&fit=crop

Now we've got a big square image where a nice little circular image used to be.

It is a little better though. Let's see if we can get a better crop with the entropy filter &crop=entropy

Now we got more of my hands. We can now force a mask and we'll be finished. &mask=ellipse

Check out all the options available in Imgix's API docs

One last thing we'll do is signal the <img> tag that it should update when the image is changed in the editing tools. Add a data-refresh-tag="header_img" attribute.

Here's our full tag:

---

Glass is a complete web management platform. It is built specifically for the needs of web professionals and their clients. Try it now for free.