Add support for: Media backgrounds, <picture> elem

[cjg89]

We probably have to add support for this via shortcodes, since <picture> in particular isn't supported natively in the WYSIWYG editor, and while video elements are supported, their CSS classes can't be modified via the WYSIWYG.

Maybe something like:

Images: (auto-detect immediate inner elems and apply required classes to each, if necessary)

[media-background-container object-fit="cover"]
<img src="...">
[/media-background-container]

Videos: (auto-detect immediate inner elems and apply required classes to each)

[media-background-container object-fit="cover"]
[video ....]
[/media-background-container]

Pictures: (auto-detect immediate inner elems and apply required classes to each)

[media-background-container object-fit="cover"]
[picture]
[picture-source srcset="..." media="..." sizes="..."]  // maybe detect either an attachment ID attr, or valid srcset attr?  Checking for an attachment ID would allow WP to handle srcset generation
[picture-source srcset="..." media="..." sizes="..."]
[picture-source srcset="..." media="..." sizes="..."]
[picture-fallback src=""]  // maybe allow optional 'srcset' for folks using picturefill.js
[/picture]
[/media-background-container]

OR, if we don't mind being more Athena-specific, and are okay with limiting <picture> tag options:

[media-background-container object-fit="cover"]
[picture xs="" sm="" md="" lg="" xl="" fallback=""]  // attrs could be either IDs or URLs with is_numeric() detection?
[/media-background-container]

In this scenario, [media-background-container] should have a long list of available element_types, and allow extra CSS classes, ID, inline styles, etc. Might even want to allow it to be a <a> tag with link options (href, open in new window..)

Might also want to consider hooking into the default [video] shortcode to add class/ID/inline style attributes for convenience.