Media Embed macros

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} = ''
• attrs {object} = {}

_video()

Embed a video file. For external videos, use youtube for Youtube-hosted videos and iframe for everything else.

Params:

• src {url}
• width {number} = none
• height {number} = 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.

• grid {string} = full

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 ‘miriamsuzanne’

• 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:

• CodePen docs

caniuse()

Embed a browser-support chart from CanIUse.

Params:

• feature {string}

  The “slug” of the desired feature

• periods {string}

  Optionally change what browser versions are shown.

• script {boolean} = true

  When using this multiple times in a single page, there’s no reason to import the script every time.

Links:

• The CanIUse Embed

_youtube()

Embed a video from Youtube

Params:

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

  Span multiple columns of a gallery

img()

Embed an image

Params:

• src {url}
• alt {string} = ''
• 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} = {}

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

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)