{placeholder} · PAD tags

Syntax

{placeholder '600x300', text='text'}
{placeholder ratio='16:9', width=640, fluid}

Parameters

size: The size, width x height: '600x300'. Left out when ratio is given.

Options

ratio: Proportions instead of a size ('16:9'), drawn width pixels wide.
width: The width of a box drawn from ratio, default 640.
text: Written in the middle and the accessible name; by default the size (600 × 300) or the ratio.
fluid: Bare option: as wide as the container (width="100%"), the height following from the proportions.

Description

{placeholder} stands in for a picture that is not there yet: a grey box with two crossing lines and its size - or a text - in the middle, written as inline SVG (tags/_lib/placeholder.php). Wireframes and layouts get their proportions right before the photos exist, without a placeholder image service.

The first parameter is the size, '600x300'. Or give the proportions with ratio='16:9': the box is then width pixels wide (640) and says its ratio. fluid makes the box as wide as its container, the height following from the proportions - the box for a responsive column. text replaces the size in the middle and is the accessible name.

The view box is the size itself, so the box scales without distortion and the text stays centred, shrunk to fit a narrow box. The colours are --pad-placeholder-surface, -line and -text on .pad-placeholder, with light-dark() defaults written once per page. A size or ratio that is not two whole numbers is an error under the strict check. {lorem} is the same idea for text.

Examples

Fixed sizes

The size in the middle, unless a text is given.

Templateexamples/placeholder/1-sizes.pad

<p style="display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start">
  {placeholder '300x250', text='Medium rectangle'}
  {placeholder '160x250'}
  {placeholder '320x50', text='Mobile banner'}
</p>

Resultopen alone

A wireframe at ratios

ratio= and fluid make boxes as wide as their column, their height following.

Templateexamples/placeholder/2-fluid.pad

<div style="display:grid; gap:12px; max-width:480px">
  {placeholder ratio='21:9', fluid, text='Hero image'}
  <div style="display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px">
    {placeholder ratio='4:3', fluid}{placeholder ratio='4:3', fluid}{placeholder ratio='4:3', fluid}
  </div>
</div>