Adding Placeholder Images to Your Documents

Overview

The {{< placeholder >}} shortcode generates a placeholder image, which is incredibly useful when you’re designing your document or website layout but the final images aren’t ready yet. It helps maintain the design integrity without interrupting the development flow. Placeholder images can have configurable sizes and will be generated in either PNG or SVG format.

Example

Here’s an example of a placeholder image:

By default, the placeholder shortcode creates 100x100 pixel images in the PNG format. You can customize the size and format of the image by providing parameters to the shortcode.

Usage

The placeholder shortcode can take additional arguments controling the size and format of the image:

{{< placeholder 400 200 format=svg >}}

This will create a scalable vector graphic (SVG) placeholder image with dimensions of 400x200 pixels.

It also takes an optional format keyword argument.

  • {{< placeholder >}}: Create a 100x100 pixel PNG placeholder image.
  • {{< placeholder width >}}: Create a widthxwidth pixel PNG placeholder image.
  • {{< placeholder width height >}}: Create a widthxheight pixel PNG placeholder image.
  • {{< placeholder format="svg" >}}: Create a 100x100 SVG placeholder image.
  • {{< placeholder width format="svg" >}}: Create a widthxwidth SVG placeholder image.
  • {{< placeholder width height format="svg" >}}: Create a widthxheight SVG placeholder image.