Blocks

DOM Media Block

by Creator 3

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]
    • The media object only has Border [tutorial] and Box Shadow [tutorial] options to limit how it affects incoming embeds.

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.

Tutorial

  • Insert a DOM Media block into the page or insert it into another block.
  • Choose an image or assign an embed URL. [tutorial]
  • You may add some styling to the block in the form of a border and/or shadow.
    • Open the Media Settings panel in the block inspector (sidebar).
      • Choose a Border Color. [tutorial]
      • You may choose a Shadow Color as well. [tutorial]
  • All AMP Publisher blocks have Top Margin and Bottom Margin settings. [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.
    • Choose a Border Color. [tutorial]
    • Set the Border Width setting to 10px.
    • Choose a Box Shadow Color. [tutorial]
    • Set the Horizontal Offset and Vertical Offset each to 3px. This will appear to move the shadow’s light source.

Comments are closed.