A Portfolio Grid With Photos in Every Shape

A gallery that looks unfinished

The portfolio page was meant to show the work at its best. Instead it shows a grid where no two photos are the same shape.

A tall phone photo sits beside a wide one from an old camera and a square one cropped for social media. Rows end at different heights and the edges never line up.

The work in each photo may be immaculate. The page around it looks careless, and visitors judge the work partly by how it is presented.

It is a common problem, and one of the cheapest to fix.

Where the shapes come from

• Phones held upright, which produce tall photos.
• Phones turned sideways, which produce wide ones.
• Older cameras with their own proportions, usually wider than tall.
• Photos already cropped square for a social media post.
• Panoramas taken to fit a whole yard or room in.
• Scans of plans, drawings and printed brochures.

The first is now the most common, since most job photos are taken on a phone, held upright, by whoever is on site.

What the grid does with them

Some galleries keep every photo's proportions at a fixed width, so tall photos make tall cells and the rows go uneven. Others fix the height, so wide photos stretch into strips and tall ones shrink to slivers.

A third kind crops every thumbnail from the centre to one shape. The grid looks tidy, but a tall photo loses its top and bottom, and a wide one loses both ends.

A staggered layout, the style Pinterest made familiar, absorbs mixed shapes, but with a dozen projects it looks busy, and on a phone the order of the work is hard to follow.

Why ragged reads as careless

Visitors to a portfolio are looking for evidence of care. They cannot inspect the joinery or the finish, so they read the presentation as a stand-in.

Edges that line up and thumbnails of one size signal an organised business. Ragged rows signal the opposite, whatever the work in them, which is unfair but is how pages are read.

One shape for every thumbnail

Choose a single shape for the grid and give every thumbnail that shape. Square handles the widest mix of photos; a slightly wide shape, about four units across to three high, suits rooms and buildings.

Choose by your subjects, not your camera. Work that is mostly tall, such as staircases or chimneys, may suit squares or a slightly tall shape.

Then keep it. Every project added later gets the same shape, so the grid stays even as it grows.

Cropping around the subject

An automatic crop from the centre does not know what the photo shows. It keeps the middle, which may be a tree trunk, a blank wall or the gap between two people.

Cropping each thumbnail by hand takes about a minute: frame what the visitor should see, whole where possible, with a little room at the edges.

Where the whole subject will not fit, crop to a strong detail, a joint, a railing, a doorway, and let the full photo show the rest. A clear detail beats a squeezed whole.

Most content management systems can store a hand-made crop beside the original, if the gallery is set up to use it.

A worked example

A two-person company that designs and builds tree forts, playhouses and backyard lookouts had a portfolio of about forty projects, photographed over eight years on whatever camera was handy.

The grid kept each photo's proportions, so tall phone shots of forts high in fir trees sat beside wide shots from an old camera and squares from social media.

An earlier attempt to tidy it had cropped everything to squares from the centre, which cut the roofs off the tall forts and left mostly trunk and ladder.

The rebuild chose squares again but cropped each by hand: the whole fort where it fitted, and otherwise the best detail, a rope bridge, a trapdoor, a carved railing.

Tapping a square now opens the full photo at its original shape, so tall forts stand tall on a phone.

The full photo at its own proportions

The thumbnail is a doorway, not the picture. When a visitor taps it, the full photo should open uncropped, scaled to fit the screen at its own proportions.

Tall photos suit phones, which are tall themselves, so a tall staircase or fort can look better full screen on a phone than on a desktop.

Avoid viewers that crop the full photo to fill the screen. Cropping belongs in the grid only.

Enough pixels for the crop

Cropping throws pixels away, and older photos have few to spare. A thumbnail cut from a corner of a small photo looks soft.

Screens with high pixel density, such as recent iPhones, need roughly twice the pixels a thumbnail occupies to look sharp: a thumbnail shown 300 pixels wide wants a crop about 600 wide.

If a photo cannot supply that, use it elsewhere or retire it. A smaller grid of sharp images reads better than a large one of soft ones.

Keeping the grid even as projects are added

The grid has to stay even when the owner adds next month's project alone, so the shape is set in the template and every upload is cropped to it automatically.

The owner then checks the automatic crop and adjusts it where it misses the subject, a minute's work worth writing into a short how-to.

A gallery that only a developer can keep tidy will not stay tidy.

The counter-case

A portfolio whose photos already share one shape, such as a studio shooting every project on the same camera the same way, may need only a check of its crops.

Some work needs its full shape, such as artwork whose proportions are part of the piece; there, rows of equal height with varied widths can work better.

And a business with a handful of projects might show each as one large photo instead of a grid.

For most project galleries, though, the fix holds: one shape, each crop chosen by hand, and the full photo at its own proportions.

Squaring up the gallery

1. Count the shapes in your current gallery.
2. Choose one shape that suits most subjects.
3. Set it in the template for every upload.
4. Crop each thumbnail by hand around its subject.
5. Retire photos too small to crop cleanly.
6. Open full photos at their own proportions.
7. Write down how to add the next project.

Step four is the one visitors notice. One shape tidies the grid, but only a crop chosen around the subject makes each thumbnail worth tapping.

A grid that holds its shape when the owner adds to it follows the same idea as a page layout that breaks when the owner edits it.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.