Blocks

Media Split Block

by Creator

The Media Split block puts a media object next to a content object. You may display an image from your Media Library or embed a video or social embed from one of the AMP supported providers (YouTube, Vimeo, Dailymotion, Facebook, Instagram and Twitter). With a huge array of options you can use this block to create anything from the simple side-by-side block to a full width media banner.

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]
    • AMP-Image-Lightbox : Lightbox is an AMP friendly way to allow users to click on the image and view it full-size.
    • Object Alignment : Choose where to display the object in respect to the Content Wrapper.
      • This setting is ignored in mobile mode unless you turn on the Side-by-Side in Mobile setting, along with other options for how to display the object in mobile.
    • Vertical Alignment : Vertical alignment of the content wrapper and object when displayed side-by-side.
      • When the object is taller than the content wrapper, the content will be aligned to the top, center or bottom of the object.
      • When the object is shorter than the content wrapper, the object will be aligned to the top, center or bottom of the content.
      • This setting uses CSS Flexbox tech to responsively retain this alignment across browser, object and content sizes.
    • Image Max-Width by % : The maximum width of the image as a percentage of the available area, set to 0 to use pixels.
      • Using percentage % rather than pixels allows for responsive display across browser sizes. Images will only fill the available width up to their actual width to prevent pixelation.
      • Set both Max-Width settings and Max-Height to 0 to display the image in it’s full original size.
    • Image Max-Width by Pixels : Maximum width in pixels for the image, set to 0 to preserve the original aspect ratio with respect to the Max-Height setting.
    • Image Max-Height by Pixels : Maximum height in pixels for the image with vertical cropping to suit the available space.
      • Set to 0 to preserve the original aspect ratio with respect to the Max-Width setting.
    • Object Separation : Distance in pixels between the main object and the Content Wrapper.
    • Fill Width in Mobile : Ignore the width setting and fill the available area in mobile mode. By default the CTA box will retain it’s width setting in mobile mode while being centered (per options). This setting allows it to fill the width on smaller devices.
    • Center Object in Mobile : By default the object will be centered in mobile mode. Turning this setting off allows it to be aligned left or right instead. Object alignment can be affected by text and object alignment rules inherited from parents.
    • Side-by-Side in Mobile : Ignore the other mobile options and force the object and content wrapper to stay side-by-side in mobile mode. Be sure to use a width that is small enough to allow the contents of your content wrapper to be readable. This may still have odd looking results on the smallest of devices.
    • Object Below Content : Move the main object below the content wrapper rather than above when viewed in mobile mode or when the Object Alignment setting is set to center.
    • Border : Border color, style and corner rounding options to frame the image object. [tutorial]
    • Box Shadow : Shadow color and options applied to the iamge object can create a hover or ineset effect. [tutorial]
      • The media object only supports border and box-shadow options to limit how it affects incoming embeds.
  • Caption – The Caption panel is only visible when an image is assigned.
    • Display Caption : Display a caption object with it’s own style settings over, above or below the image. You may need to polish and tweak the caption settings to suit the shape and size you have set for the image, especially with circles and ovals.
      • Caption Position : Display the caption above, below or over the image anchored to the top, middle or bottom of the image area.
        • Be sure to include a background color or text shadows to allow readable text when displayed over the image. Even if the text color works for the current position in the image, it may not always be readable while the image is adjusted for responsivity across browser sizes.
      • Margins : Due to it’s optional overlay behavior, you have margin options for all four sides.
  • Styled Nodes : Object nodes within the block DOM with styling settings. [tutorial]
    • root object : Block Settings panel
      • media object : Media Settings panel
        • caption : Caption panel
      • content wrapper : Content Wrapper panel
        • title : Title panel
        • subtitle : Subtitle panel
        • content : Nested Content panel

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 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
      • content wrapper (div) targeted node from Content Wrapper panel : This node contains the block title, subtitle and content area so it can be set side-by-side with the media object. Styles applied to this node will be inherited by all children, including nested children and will override the same style applied to the block at root level.
        • title (div) targeted node from Title panel : Single text field, text is edited in the block not in the panel. Styles targeting this node only apply to the title, and will override the same style applied to the block and/or content wrapper.
        • subtitle (div) targeted node from Subtitle panel : same as title
        • content (div) targeted node from Nested Content panel : This node is where you may enter basic text as paragraph blocks (just type) or insert other blocks. Styles applied to this node are inherited by it’s children and it follow suit with previously explained cascading.
          • wp nested wrapper (div) untargeted node : This node is generated by Gutenberg around nested content, we sometimes use it when layout rules need to be applied. Follow suit with the internal wrapper.
            • nested blocks (?) untargeted nodes : Anything put into the nested content area. Each block may have it’s own style rules, some core blocks do. Styles applied to a child “should” be able to override the same style cascaded to it from above. I use the word “should” because we only have control over our own blocks and how styles are applied to them, core and outsider blocks have their own methods.

We’ll give 3 examples of methods you can use to create very different looks using the same block.

Each of these examples (incuding images and graphics) is available from our API as a Block-Set download, we will show you how to recreate them yourself.

Example 1 – Stylized block

In this example we just add some basic colors, border and shadows to create a block that stands out without getting too complicated.

Title
Subtitle ~ Fusce dignissim lacus erat, gravida lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus. Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti. Sed ac augue quis arcu mattis rutrum.

  • Insert a Media Split block into your page/post.
  • Start with the block styling settings. This example has a background color, border and box shadow.
    • Open the Block Settings panel in the block inspector (sidebar).
    • Choose a Background Color. [tutorial]
    • Choose a Border Color. [tutorial]
      • Set the Border Width to 8px.
      • Under the Border Sides setting, turn off the Left and Right borders.
      • This will give you 8px wide top and bottom borders in the color you chose.
    • Choose a Box Shadow Color. [tutorial]
  • Next we’ll choose an image and give it a border and shadow.
    • Choose an image from the Media Library. [tutorial]
    • Choose a Border Color.
      • Set the Border Width to 5px.
    • Choose a Box Shadow Color.
      • You may tinker with the options to create interesting inset and lighting effects, this example uses a 2px Horizontal Offset and a 2px Vertical Offset to create a minor hover effect. Inset shadows in light colors against an image with a thick border can appear to have a frame with lighting.
  • Now give the content object some basic style to separate it from the block background. Open the Content Wrapper panel.
    • Set the Background Color to white. You may choose any color you wish, just make sure to change the text color to suit.
    • By default the block text uses the font color you have specified for your site. If it is too light, you may wish to change the Font Color or choose a dark Background Color.
    • Choose a Box Shadow Color, this example uses the default shadow settings.
    • Set the Padding to 10px. [tutorial]
  • You can enter any text you wish into the content. We will be styling the title and subtitle so they require some text for this example.
    • In the block editor, click in the Title field and enter some text. The click in the Subtitle field and enter some more text.
    • Below these fields is the nested content area. By default the text you type here becomes a WP core paragraph block just like in the base editor. When you press Enter it will create a new line as a new paragraph block. You may insert any blocks you like into this nested area (like the base), and they will be treated as a child objects of this Nested Content object.
  • Finally, style the title and subtitle a little.
    • The title has a white font color with a black shadow. This works, experiment as wish, but in my experience very few color combinations work well for this effect.
      • Open the Title panel.
        • Set the Font Color to white and set the Text Shadow Color to black. [tutorial]
        • Now turn on the Double Shadow setting, I find this is almost always necessary for readable text with shadow.
        • The title is bolded by default. This is even more helpful when using text shadows.
    • The subtitle will just get a nice top and bottom border to help separate the title from the content.
      • Open the Subtitle panel.
        • Choose a Border Color, in this example we use a light gray.
        • Under the Border Sides setting, turn off the Right and Left borders.

That’s it, you have just recreated this example. You have the tools to create HTML and CSS without knowing anything about HTML or CSS.

Before moving on to the next example, we suggest you try out the toolbar buttons for Block Layout, Object Align and V-Align using the example you have just created. You can preview how it will look across various viewport widths by resizing your browser window while viewing the page from the front end.

Example 2 – Media banner

In this example we use a background image rather than a background color. The image is cropped to fit the vertical space while reaching the viewport edges. The “media” in this block is a PNG with a transparent background, and the text is given colors and shadow to make it visible over the image while allowing the image to be almost fully visisble.

SUB/PRE-TITLE
YOUR HEADLINE GOES HERE

Quo ea et Perferendis eaque nihil sunt molestias quae Qui itaque corporis corporis perferendis. Nulla sit voluptas expedita. voluptas provident delectus Reprehenderit veniam nostrum laboriosam similique aspernatur.

CALL TO ACTION
  • Insert a Media Split block into your page/post.
  • This is a banner, we want it to go to the browser edges, but in this example we want to keep it’s text and content aligned with the page text and content. We support the WordPress “full width” and “wide” alignments, and we also have a block layout to cover this scenario.
    • In the Block Layout section of the block toolbar toggle on Full Content Aligned (last button). This setting can also be found in the Block Settings panel. [tutorial]
  • Open the Block Settings panel.
    • Choose a Background Image. [tutorial] As this is a banner it will only look good with a large image, preferrably wide or with content that crops well vertically. The example image was a good choice for this reason.
    • Set the Padding Top to 100px (max) and also set the Padding Bottom to 100px. [tutorial] This gives the content vertical space while not affecting the content aligned block layout.
  • Our example uses a globe PNG graphic with a transparent background. This is a Media Split block, but you do not actually have to choose any media, so you can create a banner like this without the graphic.
    • Choose an image from the Media Library. [tutorial] You can use any image you wish, but it would be best to choose one that is equal in width and height to suit this example.
    • Set Image Max-Width by % to 0.
    • Now set Image Max-Width by Pixels to 320. This will keep the media object at a static 320 pixels while adjusting the content object to fit the remaining available space.
    • Turn on the Media Below Content setting. We do this to keep the text as priority on mobile devices. This setting only applies in mobile mode or when the Center Media Over Content object alignment is chosen.
  • We want all of the text in the content object to be white with a black shadow for readability against an image background.
    • Open the Content Wrapper panel.
    • Choose white as the Font Color and choose black as the Text Shadow Color. [tutorial]
    • Turn on the Double Shadow setting. [tutorial]
  • In this example we have a “pre-title” and a “headline”. The available block fields are displayed as title then subtitle, so we will have to use the Title field for the smaller “pre-title” text and the Subtitle field as the “headline”. Enter any text you wish into the two fields, we will adjust their styling settings to suit their new usage.
    • Open the Title panel.
      • Set the Font Size to 24.
      • Select “Inherit” from the Font Weight selector. The title is bolded by default, but we want to reduce it’s impact in this example.
    • Open the Subtitle panel.
      • Set the Font Size to 60.
      • Select Inherit from the Font Weight selector. The subtitle is italicized by default, but we want to normalize the headline in this example.
    • Enter any text you wish into the nested content area of the block editor, or none if you prefer. You will be inserting a button below the text.
  • Below the Subtitle field is the nested content area. By default the text you type here becomes a WP core paragraph block just like in the base editor. When you press Enter it will create a new line as a new paragraph block. You may insert any blocks you like into this nested area (like the base), and they will be treated as a child objects of this Nested Content object.
    • Insert a DOM Button block into the nested content area. This a button block specifically designed to be used as a child object in our blocks, but it can also be used at the root level to add a button to your page with more options and styling settings than the WP core button block.
      • You may enter text directly in the block editor button, if left blank the default button text “Read More…” will be used instead. We are using “CALL TO ACTION” in our example.
      • Open the Button Options panel.
        • Enter a URL into the Link URL or PopUp ID field, both full and relative URLs are both acceptable. [tutorial]
        • Turn off the Open in New Tab setting, in this example we want to user to navigate away from this page as a “call to action”.
      • We are using the common “button” class to style this button, but you may apply your own custom styles to the button if you wish. Skip this step if you wish to adhere to the “recreation”.
        • Open the Button Styling panel. [tutorial]
        • Turn off the Apply the “button” Class setting, which will open up all custom styling options for this button.
        • Go ahead and tinker with the options, or leave it alone to display the button as a simple textual link.
      • Finally we want to add some more space between the button and the content above it.
        • Open the Block Settings panel and select “30px” from the Top Margin selector. [tutorial]

Example 3 – Image with video overlay

In this example we use a background image in only part of the block to create a banner that anchors to one side and a video window overlay with it’s right edge aligned to the page text and content, while the image is resized to suit the height of the video. It does not actually use an image as the media object, it uses a video embed instead. This sounds complicated, but it’s actually the easiest example on this page.

  • Insert a Media Split block into your page/post.
  • This is a banner, we want it to go to the browser edges, but in this example we want to create the illusion that only meets one edge.
    • In the Block Layout section of the block toolbar toggle on Full Content Aligned (last button). [tutorial] Since the background image will only be displayed across half of the block, the contrained edge will be applied to the content wrapper.
  • Now choose an image and create the offset effect. This is not a media object, or even an img or amp-img tag… this is an image used as a background through CSS.
    • Open the Block Settings panel.
      • Scroll to the Background section and choose/upload a Background Image. [tutorial] We suggest you choose an image with content that crops well vertically, but this will be very subjective depending on viewport size and the height of the video in those viewports.
      • Select “50% (1/2)” from the Background Image Size selector. This limits the image width to half of the block width.
      • Set the Background Image Alignment to Align Left (left-most button). This moves the image to the left side.
      • Set the Padding Top to 30 and also set the Padding Bottom to 30. [tutorial] This keeps the image height exactly 60px taller than the video height, and centers the video vertically. The video is not actually centered vertically (by CSS rules) but it looks that way because it pushes the image background height to suit it’s own height.
  • Finally let’s embed a video and give it a border.
    • Open the Media Settings panel.
      • Scroll to the Embed section and enter a Youtube video URL into the Video/Social Media Embed URL field. [tutorial]
        • Set the Object Alignment to “Align Object Right” (right-most button). This can also be done set from the Object Align section of the block toolbar.
        • Set the Image Max-Width by % to 55%. This will create the edge-overlay effect, allowing the video to “hang” off the image in larger viewports.
        • Turn on the Fill Width in Mobile setting. This allows the video to look better on smaller devices.
      • Choose a Border Color. [tutorial]
        • Set the Border Width to 5.