# Hero wall mosaic > A hero that is nothing but photographs: a short masthead, one line and one action, then twenty-eight square pictures laid edge to edge on a steeply tilted plane that holds the screen for half a scroll while the lanes run past. The tiles carry no frame, no plate and no words, so each picture is the tile, cropped square whatever shape the file is, and the frame's top and bottom are faded out so the mosaic carries on past the screen instead of stopping at a cut. Includes replaceable example images. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the twenty-eight pictures as a plain stack. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/hero-wall-mosaic.html Section: Hero Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Also needs: Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. Blocks: button, buttons, group, heading, image, paragraph, patternpaste/iso-wall Keywords: hero, isometric, wall, mosaic, photographs, gallery, grid, pinned Promise: This variation embeds one of our blocks: install the companion plugin, then paste. --- ## The signature moment: pictures wall to wall, nothing between them Every other wall in this set is a wall of CARDS: the block draws a plate behind each tile, insets the content from it and rules a hairline round it, because a heading and a line of copy read at an angle need a surface to sit on. This one has no cards in it. `patternpastePlate` is `false`, so the padding, the tinted ground and the hairline are all gone and each tile is exactly the picture in it, cropped square by the wall. What is left between the pictures is 14px of the band's own colour, which is a seam and not a frame. That is a composition and not a setting, because it decides everything else. There is nowhere to put a word, so there are no words: no tile titles, no captions, no dates. The masthead is the only type in the section, and it has to carry the whole of what the wall is about in one line. And because a picture is the tile, the tile has to be square: `patternpasteCardWidth` and `patternpasteCardHeight` are both 260, and the pictures stretch to that box and are cropped to cover it, so a buyer whose photographs are 4:3 and 3:2 and 1:1 gets a level mosaic instead of a ragged one. The frame's top and bottom are faded rather than cut (`patternpasteFade`), which is the same argument as the seam: a hard edge would draw a frame round a wall whose whole point is that it has none, and a picture stopped dead at the screen's edge reads as a cropped photograph rather than a mosaic carrying on past it. The sides stay hard, because the wall is full-bleed and a fade there would only pull it in off the page. The fade is a MASK, so those two edges go clear and it is the theme's own ground that comes through them; the section still states no colour. It has to work standing still, and it does. With no script the plane still carries its `rotateX`/`rotateZ` from the stylesheet, so the section is a still mosaic of the same twenty-eight pictures. With the plugin gone entirely the masthead is followed by the twenty-eight pictures as a plain stack of image blocks, then the hand-off row, in the order they were typed. ## Why this is not hero-wall-field, hero-wall-index or hero-wall-rail The three siblings all keep the plate, and all three are walls of things with words on them. This one is a wall of pictures, and three decisions follow from that rather than from taste: - **The plate is off.** No other pattern in the set does this, and no other pattern in the set could: the field's posters carry a word under the picture, the index is text and nothing else, and the rail's posters are read one at a time. Take the plate away from any of those and the type falls onto the photograph, which is the one thing this catalogue never does. - **The angle is the opposite one.** `patternpasteTilt` 56 is nearly the steepest the control goes and `patternpasteSpin` is `+24`, where the field, the index and the rail are all at or below zero. The lanes therefore run up to the LEFT, and the wall reads as a floor seen from above rather than as a rack seen from the side. The spin control was negative-only until this pattern asked for the other half of it; the lanes still alternate direction on their own index, so what the sign changes is the composition and not the motion. - **Nothing in the wall is a control.** `patternpasteLift` is `false`, so no tile carries the pull button and no tile is a click target: the pull is a disclosure control, and a picture with no words under it has nothing to disclose. It is also a measurement. The pull's box is 52px square on the plane, and a plane leaned this far foreshortens it: at 390 the button's own box measures 68.7 by 38.4, which is under the 44px floor `check-responsive` holds every tap target to (measured 2026-08-29; the same button clears the floor at 48.8 on `hero-wall-field`, which leans 48). A wall this steep either drops the pull or drops the tilt, and a mosaic that is only pictures is the one wall that loses nothing by dropping it. The stylesheet takes the pointer cursor away with it, so nothing promises a click that does not happen. - **The pin is short.** `patternpasteScroll` 0.5 with `patternpasteSpeed` 2: half a screen of scroll, run twice as fast, so the wall turns over once and lets the reader out. A long pin is for a section with something to say as it goes past, and this one says everything it has to say in the first frame. Compare `hero-wall-index`, which is pinned to the same half screen because it has forty-two entries to deal, and `hero-wall-field`, which is not pinned at all. ## What it inherits from your theme - **Typeface.** Nothing states a family. The headline, the line under it, the button and the hand-off row take whatever your theme sets. - **Palette.** The band is your `base` with your `contrast` as its text, the one pair every block theme is obliged to keep legible. The hand-off row's label leads on `role-label`, which only our theme tool defines, and falls through to `contrast` everywhere else. No accent slug appears in any rung. - **The seams between the pictures.** With the plate off the block paints no surface at all inside the wall, so the 14px between one picture and the next is the band's own ground. Put this section on a dark style and the seams go dark with it. - **Spacing.** Band padding, the gap between the masthead and the wall, and the hand-off row all use core spacing presets. ## What it decides for itself - **The headline is display, not a ladder rung.** `clamp(2.75rem, 7.2vw, 6.25rem)`: its size is the composition, three words holding the whole width above a wall with no other type in it, so it does not take `xx-large`. Everything else is on the ladder: the line under it and the hand-off paragraph take `medium` as a chain, and the hand-off label is a label with its own floor at 13px and its own tracking. - **The tiles are square, and 260 is why.** The block's own card is fluid and lands at 216 by 156, which is a landscape card for a landscape crop. A mosaic wants one shape, and square is the only shape that takes a portrait and a landscape photograph equally badly, which is to say equally well: both are cropped to the middle rather than one of them being letterboxed. - **The depth, and why it is twenty-eight.** The block lays `ceil(tiles / 3)` lanes capped at seven and deals the tiles round-robin, so twenty-eight pictures is seven lanes of four with no lane short. Live, that is only the seed: `view.js` clones whole lanes and whole tiles until the wall covers the frame. AT REST it is exactly the twenty-eight, and the block magnifies the plane to cover the frame off its SHORTEST lane, which is why the count is not a taste. It is the lane LENGTH that binds, not the lane count: four deep at this angle solves to about 1.5x at 1920, inside the block's own 1.6 cap, so the still render is a rack of small pictures and not a crop of three big ones. Change the count in sevens and the wall stays level. - **The gap is 14 and not 0.** Zero is a legitimate composition on this block and it was tried: with no seam at all the wall stops reading as a wall of frames and starts reading as one printed sheet, and the raise on a pointed-at tile has nothing to lift away from. 14 is a seam wide enough to separate two photographs of the same subject and narrow enough that the ground is never a thing the eye counts. - **The hand-off row is outside the block.** It is a sibling of the wall inside the band, not part of the introduction, because the introduction renders ABOVE the frame and the whole point of the row is to be on the far side of it: a full-bleed band with nothing under it reads as the site's chrome rather than as a section. It is inset by the same `clamp(1.25rem, 4vw, 4rem)` the block uses for its own gutter, so it lines up with the masthead. ## What needs the plugin This pattern embeds `patternpaste/iso-wall`, a dynamic block registered by the companion plugin, which comes with your access. Install it before pasting, or the block shows the missing-block placeholder in the editor. On a live page with the plugin deactivated the front end still shows the headline, the line, the button, all twenty-eight pictures and the hand-off row as a plain stack of core blocks; only the frame, its isometric styling, the square crop and the pinned run go. Nothing you typed lives in the block itself. A visitor who has asked for reduced motion gets the still mosaic, with every picture in it. ## What you change first 1. **The photographs.** Every tile includes an image block with an example photograph with a square crop set; click each and choose from your media library. The block's own toolbar has "Fill tiles from media library", which deals a multiple selection into the tiles in order and saves twenty-eight trips through the modal. This is the pattern that most rewards it: filling the wall IS the work here, because there is nothing else in it. 2. **The words, of which there are five kinds and only three in the section.** The headline, the line under it and the button. The tiles hold no copy at all, and adding a heading to one is the moment to turn the plate back on: type on a photograph is the one thing this pattern will not do for you. 3. **How many pictures.** Add one by duplicating a tile group and remove one by deleting it; the lanes follow. Work in sevens: past twenty-one tiles the lane cap is what is running, so the depth is the tile count over seven, and a count that does not divide by seven leaves one lane a tile short and the still render zooms to cover the frame off the short one. 4. **The plate.** "Plate behind each tile" in the block's Cards panel, off here. Turn it on and every tile becomes the card the other three walls use: padding, a ground mixed from your text colour and a hairline, with the picture inset from the edges. That is the switch that turns this pattern back into a wall of cards, and it is the one to reach for the moment a tile needs a word. "Tiles can be pulled out" is off beside it for the reason above; turn it on and every picture becomes something to open, with the pull control drawn on the photograph itself, and check that the mark still reads against the pictures you chose. 5. **The angle and the run.** Tilt 56 and spin +24 in the block's Motion panel, with the pin toggle, the scroll length (0.5 here) and the speed (2) beside them. Spin back through zero and the lanes stand upright; spin negative and the wall leans the way its three siblings do. 6. **The heading levels.** The masthead is an `h1` and the tiles carry no headings at all, so there is nothing under it to be out of order. Where this lands on your page is still yours to check: if the page already has an `h1`, or the section sits under an `h2`, change the masthead's level in the block toolbar so the outline reads in order. ## What is not proved **The pull control on a photograph.** This payload turns the pull off, so nothing here exercises it, but the block draws it whenever a plate-less wall keeps `patternpasteLift` on: with no surface under it the mark carries a rim and a ground mixed from your own text colour to separate it from whatever is behind it. That is a legibility argument, not a measured ratio, and nothing can be measured about a photograph a buyer has not chosen yet. If you turn the pull back on, look at the wall with your own pictures in it, and remember the tap target: at this tilt the control is under the 44px floor on a phone. **How the crop lands.** The wall crops every picture square from its middle. Whether that is the right half of a photograph is a judgement about that photograph, and no gate in this repo can make it: a face at the edge of a landscape frame will be cropped out. The pattern includes example photographs; the first thing to do after pasting is look at the wall with your own pictures in it at 390 as well as on a desktop. ## Included images 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.