Cover mosaic

Five core/cover tiles and one ink slab locked into a single bento grid. The kind of photo wall that takes an afternoon of span settings, aspect ratios and corner plates to build by hand.

A large square, a tall portrait, two small tiles and a wide panorama interlock with the title slab so the grid closes flat on every side. Density contrast does the work: one big picture against four smaller ones, and a dark slab of words against the photographs. The grid is minimumColumnWidth only, so it re-packs from four columns (wide screens) to three, two and one, and the tile order was chosen by simulating each count so no width leaves a hole. On a phone WordPress resets the spans and the tiles stack.

Inherits: every colour, the typeface, the spacing scale. Decides: the spans, the square and 2:1 shapes, the 22rem column floor, the 1760px measure, the 0.75rem joint between tiles and the plates' padding.

Every photograph runs with no veil. Its label sits on a small plate of your base with contrast type, pinned to the bottom corner, so the words are measured against the plate, never the image. The title slab is contrast with base type and a base button on it; its heading is display type, a bare clamp() up to 64px, because the slab is one tile of the composition and its size holds the tile. Text contrast on base and the reverse both pass 4.5:1 in the stock themes.

The photographs (select a tile, choose Replace) and the five labels. Keep a label to a few words; the plate grows with it. The square tile wants a landscape or square picture, the tall one a portrait.

variations/track-red-and-bone.html states its own colours and faces: a bone ground (#efe8d8) and bone label plates under near-black ink (#16130f), with the title tile in track red (#b3261a) carrying bone type and a square near-black button. Arial Black sets the uppercase headline and the button, Arial everything else. Bone on the red measures 5.36:1.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.