Skip to main

Media Embed macros

content/_includes/embed.macros.njk

Helper macros for consistent embedding of images, svg, video (iframes), and audio media – as well as creating particular patterns like media/icon-blocks, logo arrays, figures, galleries, etc.


Patterns

media_block()

Media blocks create a side-by-side layout, with constrained-width media on one side, and text-content flowing to the other side.

Params:

  • media {string}

    The media to embed (this macro does not generate the media itself)

  • name {string} = ''

    This name will be applied to the data-media attribute

  • attrs {object} = {}
  • reverse {boolean} = false
  • content {string} = none

    Provide either the content parameter or a caller() block

figure()

Generate a figure from data, or pass in a caller() block.

Params:

  • data {array} = none

    Array of media-data dictionaries

  • caption {string} = none
  • class {string}

video()

Generate a figure for a one-off video

Params:

  • src {url}
  • height {number} = none
  • width {number} = none
  • caption {string} = none

screen()

Place an image inside a screen, like an iphone.

Params:

  • device {string}

    Name of an icon in _includes/devices/

  • fill {color} = none

    Color to use in any extra space around the image

  • content {html} = none

    The image to embed (can also be passed into a caller() block)

logos()

Generate a block of project logos.

Params:

  • projects {array}

    Names of svg files to include from content/_includes/logos/, without the path or .svg extension.

Todo:

This is likely to move and expand to include page data.

icon_block()

Generate a series of media-blocks with icons

Params:

  • data {array}

    Each dictionary in the array should include an icon and text, with optional title and url.

  • title {string} = none

    The overall title for the icon-blocks section.

codepen()

Embed a demo from CodePen

Params:

  • id {string}

    The “slug hash” of the desired pen

  • title {string}

    Used in the default fallback link

  • user {string}

    The CodePen username, eg ‘mirisuzanne’

  • tab {string} = result

    The tabs to have open by default, eg ‘html’ or ‘html,css,result’

  • height {number | '100%'} = 500

    The pixel-height of the embed, or ‘100%’ to fit a sized container

  • theme {string | 'light' | 'dark'} = none

    The embed-frame theme (not the code theme)

  • preview {boolean} = none

    Set true to keep the pen from auto-running

  • attrs {array} = {}

Links:

patterns

from_event()

Generate a figure from one particular event.

Params:

  • collection {11ty collection array}

    The 11ty source collection to look in

  • venue {string}

    Venue of the event

  • page {url} = none

    Url of a page to select from

  • caption {string} = none

Embed

srcset()

Generate a srcset attribute for responsive images

Params:

  • src {url}
  • width {number} = none

img()

Embed an image

Params:

  • src {url}
  • alt {string}
  • width {number} = none
  • height {number} = none
  • sizes {string | none} = none

    Only required for small images, since the default is 100vw. See taxonomy data for named sizes like “card”, “media”, and “gallery”.

  • attrs {object} = {}

svg()

Embed an svg file from the content/_includes/ folder

Params:

  • path {string}

iframe()

Embed an iframe (most often used for videos). Width and height are provided both as defaults, and to create intrinsic ratios when possible.

Params:

  • src {url}
  • width {number} = none
  • height {number} = none
  • span {number | 'full'} = none

    Span multiple columns of a gallery

audio()

Embed an audio file

Params:

  • src {url}
  • attrs {object} = {}

Layout

ratio()

Maintain aspect ratio for embedded media

Params:

  • width {number} = none
  • height {number} = none
  • span {number | 'full'} = none

    Span multiple columns of a gallery

  • content {html} = none

    The content to embed (can also be a caller() block)


See Also: