# Testimonial portrait > One client quote against one example upright portrait, two up on your page ground. The picture is the small half and is aligned to the foot of the row, so it starts well below the first line of the quote and the words overhang it; the quote is set at reading size rather than display size, and the name and role sit on a currentColor hairline beneath it. Example images are included and can be replaced in the editor. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/testimonial-portrait.html Section: Testimonials Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 7.0 to 7.1. 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. Blocks: column, columns, group, image, paragraph Keywords: testimonial, quote, review, portrait, photo, client, two column ## Variations (3) ### Low portrait (the default) Identical markup in every theme. The quote and its ruled attribution on the wide side, the small upright picture low on the narrow side. The rule belongs to the words, so the portrait stands free of it. ### Espresso and peach This variation states its own colours and states its own type: identical in every theme. States an espresso ground with cream quote text, an Iowan Old Style quote, and peach on the eyebrow and attribution. ### Ruled foot Identical markup in every theme. The attribution leaves the quote column and becomes a hairline running under both halves, so the picture and the words stand on the same line and the quote is the only thing above it. Same copy, same picture, same ground. --- ## The signature moment: the quote overhangs a low portrait **The picture is the small half and it is aligned to the foot of the row, so it starts a long way below the first line of the quote and the words hang over it.** The two columns are 62 and 38, the portrait is held to a 240px measure inside its column rather than filling it, and the whole row is bottom aligned. So the top edge of the section is the quote alone, the bottom edge is the quote and the picture together, and the step between them is the composition. Nothing is centred, nothing is stretched to match, and the empty space above the portrait is the point rather than a gap. That is what keeps it away from the rest of the section. `testimonial-band` is a full-bleed inverted band with a hanging quotation mark and a display-size quote; `testimonial-trio` is three bordered cards with ragged tops and level feet; `quote-wall` is eight short voices at reading size. This one is the only pattern in the section with a picture in it, and the only one whose composition is a step rather than a row. ## What it inherits from your theme - **The typeface.** No font family is stated anywhere, so the quote is set in your theme's face and the tracked attribution in the same one. - **Your colours.** The ground asks for `base` and the type for `contrast`, the two slugs every stock block theme defines, each behind a fallback chain that ends on a colour WordPress itself guarantees. Nothing here can resolve to nothing. - **The hairline.** It is `currentColor`, so it is exactly the colour of the type above it in every theme, including one that defines no presets at all. - **Your spacing scale.** The section's padding and the gaps inside it are spacing presets, so a theme with a generous scale gets a taller section. ## What it decides for itself - **The quote is at reading size, not display size.** `clamp(1.25rem, 1.9vw, 1.625rem)` at a 1.42 line-height. A display quote beside a photograph turns into a poster, and the section already has a second object in it. This is the deliberate opposite of `pull-quote`'s ramp, and it lets the quote run to sixty words without shouting. - **The portrait's size and its crop.** 240px wide at 4:5, `aspectRatio: 4/5` with `scale: cover`, so whatever the buyer uploads is cropped to the same upright rather than changing the layout. An upright rather than a square because this frame is large enough to be a photograph of somebody: a square at this size centres on the chest, and 4:5 keeps the head where a portrait puts it. - **The bottom alignment and the 62/38 split.** Both are the signature. Set the columns back to top alignment, or give the picture the wide half, and there is no reason to buy this over any other two-up. - **The attribution as a ruled block under the words.** In the base the rule belongs to the quote column, so the portrait stands free of it. - **Its own ground and padding.** The section states both, so it can drop between any two neighbours without borrowing air from either. It is a section on your page ground rather than a coloured band: the bands in this section are `testimonial-band`'s job. ## What a buyer changes first 1. **The picture.** Select the example portrait and choose Replace to use a photograph from your media library. The included portrait is generated and nobody real; replace it with the person who supplied your real quotation. 2. **The quote.** Fifty to seventy words is what the ramp is drawn for. Much shorter and the quote column stops being taller than the portrait, which is the whole composition; much longer and it becomes a case study. 3. **The name and the role.** Two lines, tracked caps then plain. Delete the second and the first stays on its rule. 4. **The eyebrow.** "From the client" is a paragraph rather than a heading, so it stays out of your page outline. Change the words or delete the block. 5. **How small the picture is.** It is held by a 240px content size on the group around it, and that number is a WIDTH: at 4:5 the frame is 300px tall. Raise it towards 320px to close the step, lower it to open it. Do not let it pass the height of the quote block: at that point the picture is overhanging the words and the section is a different one. ## The variation - **Espresso and peach** (`variations/espresso-and-peach.html`) states an espresso ground, an Iowan Old Style quote in cream, and peach labels and rule. The low portrait and copy remain the base composition. - **Ruled foot** (`variations/ruled-foot.html`) is the structural axis. The attribution leaves the quote column and becomes a hairline running the full 1240 under both halves, so the picture and the last line of the quote stand on the same rule and the quote is the only thing above it. The copy, the picture, the ground and the type are the base's. ## Notes - Core blocks only: group, columns, column, paragraph, image. No plugin, no script, no stylesheet, nothing to keep updated. - The example portrait is included by public URL in both the preview and copied markup. It is a generated picture of nobody real, so it illustrates the layout and does not represent a customer endorsement. - Nothing is set on the photograph. Type over an image is a colour pair nobody can measure, because the buyer chooses the image, so the quote and the attribution sit on the section's own ground. - The quote crosses 24px at wide viewports, so its pair is judged at the large-text floor of 3:1 there and at 4.5:1 below; the eyebrow and the attribution are small and are judged at 4.5:1. Every pair is `base` against `contrast`. - At 390 the columns stack, which is the right answer: the quote, then its rule and name, then the portrait beneath, still small and still left. ## Included images The copied markup includes example portraits, generated and nobody real. The public image URLs keep the examples visible after pasting. Select an image or cover and choose **Replace** to use photographs of your own people. See [image credits](/image-credits/) for the sources. Pasting an image URL does not import a Media Library attachment.