A card with the image on top and the words underneath is the safe layout, and it is the reason most blog sections look the same. It also wastes space: every card carries a block of white below the photograph whether the words need it or not.
A luster grid puts the words on the image. The title and category sit over the photograph with an overlay behind them, so the card is the picture and the section reads as a wall rather than a list.
| Approach | What it costs you |
|---|---|
| Image with caption underneath | Every card carries a block of text space, so the section gets tall |
| Plain image grid | No titles, so the reader has to guess or hover |
| Background image plus heading | One item per section, built by hand, not queried |
| Sky Addons luster grid | Overlay titles on queried posts, with the overlay and type styled |
Row height is a control. Set the height and the images fill it, so a grid of mixed photographs still lines up. That is what keeps an overlay grid from looking ragged.
The overlay is styled, not fixed. Image Overlay sets the colour and strength behind the text, which is the difference between a readable title and a title lost in a bright photograph.
Two typography scales. Primary and Secondary Typography let the title and the category or date take different sizes and weights without either becoming an afterthought.
Text shadow is available. On busy photographs a shadow does what an overlay cannot, lifting the words off the detail without darkening the whole image.
Bar Size tunes the label band. The strip that holds the text has its own size control, so it can be a thin line under a title or a deep band that carries a category and a date.
A run of photographs with no gaps between the subject and the label reads as one surface. The eye moves across it rather than down a list, which suits browsing rather than searching.
A run of photographs with the labels on them reads as one surface, so the eye moves across it rather than down a list.
It also saves vertical space, and on a long page that is the scarcest thing there is. A twelve item grid with captions underneath can be twice the height of the same twelve as an overlay wall.
Text on photographs fails in one of two ways: the image is too bright in the area behind the words, or the image is busy enough that the letters compete with detail.
An overlay solves brightness. A gradient that is strong at the bottom and clear at the top keeps the picture visible while giving the words a surface, which is why so many overlay grids darken only the lower third.
A text shadow solves business. A soft shadow at low opacity separates the letters from detail without dimming the photograph. Used together at full strength they make everything muddy, so pick the one your images actually need.
The reliable test is the worst case, not the average. Find the brightest image in the set, and the busiest, and set the overlay against those two. Everything else will then be comfortable.
Photographs with a quiet area work; photographs with interest edge to edge do not. Sky, water, a wall, a table surface, any of those give the title somewhere to sit.
Consistency matters more than in a normal grid, because the cards touch. A set shot in similar light reads as one collection. A set from several sources reads as a stock library, and the overlay will not hide it.
Where the set is genuinely mixed, the fix is to standardise the overlay rather than the photographs. A uniform treatment across every card gives the wall a single voice, even when the pictures underneath disagree.
An overlay grid can run with gaps between the cards or with none, and the two read completely differently.
No gaps makes a wall. The images touch, the eye moves across the whole block, and the labels behave like captions on a contact sheet. It suits portfolios and photography, where the collection matters more than any single item, and it is the layout that saves the most vertical space.
Gaps make cards. Each image becomes a separate object with its own label, which suits sections where a reader is choosing one thing rather than browsing a body of work. Categories, venues and recipes usually want gaps.
The mistake is a small gap, four or six pixels, which looks like a wall that failed to close. Either commit to zero, or use a gap large enough to read as deliberate, which in practice is at least sixteen pixels.
The band over the image is small, and everything in it competes with the photograph. Two lines is the working limit: a title, and one short label above or below it.
The title should name the thing. On a travel wall that is the place, not a sentence about the place. On a portfolio it is the client or the project, not the discipline. Readers scanning a wall are matching against something they already have in mind, and only a name can match.
The secondary line is where the category, the date or a short qualifier goes, and it should be set much smaller and quieter than the title. That is what the two typography scales are for. When both lines are set at similar weights the band turns into a block of text sitting on a picture, which is the thing an overlay grid is supposed to avoid.
The grid queries any post type, so it works for projects, products, venues and events as readily as for posts. A category archive of visual work is the natural case, but it also makes a good navigation band: six images, six category names, one click each.
For a grid where the words sit under the image and the fields are switchable, the sapling grid is the plainer option. For mixed weight arrangements with a lead item, see the ultra grid.
Yes. The luster grid ships in the free Sky Addons plugin. The free versus Pro page shows what else is included.
No. It uses the posts and media already in WordPress.
The widget loads no script of its own. Images carry the weight, and an overlay grid shows them at a decent size, so export them for the row height rather than uploading camera files.
Yes. Cards stack and the overlay behaves the same way. Titles are the thing to check, since a card is much narrower at 390px.
Yes. The query settings cover post types, taxonomies and ordering.
A luster grid is the right layout when the picture is the point and the label is confirmation. Set a row height, tune the overlay against your brightest and busiest images, keep the titles short, and let the wall do the work that a list of captioned cards cannot.
See it on the luster grid demo, read the luster grid documentation, and compare plans on the pricing page. MDN on CSS gradients explains the overlay technique, and the W3C contrast guidance gives the ratios text over images should still meet.
Comments are closed.