
Blocks
DOM Media Block
The DOM Media block displays an image, video, or embedded social media feed. It is designed to be used as a nested child in other blocks, but works equally well as a block on the root level.
Settings Overview
- Media Settings
- Image / Embed : Choose an image from your Media Library or enter an embed URL from one of the supported video or social networks. [tutorial]
Object Map (DOM)
- root object (div) targeted node from Block Settings panel : You may assign style settings that apply to this entire block.
- internal wrapper (div) untargeted node : Used to support advanced layout options. Most of our blocks have one of these wrappers. It has no styling of it’s own, it’s children are considered the block’s children.
- media wrapper (div) targeted node from Media Settings panel : This is a wrapper node to which we apply styles and media object specific rules. It’s children are a series of objects that display either an AMP friendly image or media embed. It’s children will inherit it’s styles, so we only allow certain styles in this node.
- internal wrapper (div) untargeted node : Used to apply rules for caption placement and responsivity.
- media object (amp-img or embed) : untargeted node : This is the actual amp component that creates the image or embed object.
- caption (div) targeted node from Caption panel : This node includes a text field and has standard node styling options in addition to position and margin settings.
- internal wrapper (div) untargeted node : Used to apply rules for caption placement and responsivity.
- media wrapper (div) targeted node from Media Settings panel : This is a wrapper node to which we apply styles and media object specific rules. It’s children are a series of objects that display either an AMP friendly image or media embed. It’s children will inherit it’s styles, so we only allow certain styles in this node.
- internal wrapper (div) untargeted node : Used to support advanced layout options. Most of our blocks have one of these wrappers. It has no styling of it’s own, it’s children are considered the block’s children.
Tutorial
Example – Image with basic shadow
- Insert a DOM Media block into your page/post.
- Choose an image from the Media Library. [tutorial]
- Open the Media Settings panel in the block inspector (sidebar).
- Choose a Shadow Color. [tutorial] This example uses the default offset and blur values.
Example – Video with border and offset shadow
- Insert a DOM Media block into your page/post.
- Enter or paste a Youtube video URL into the embed URL field. [tutorial]
- Open the Media Settings panel.
Comments are closed.