I tend to just bang around on code until I get things doing what I want but in this case I think I hit a dead end since I dont really know how the internals of this hook work. Here's what I'm doing:

In order to make images and videos compatible with the markup that Facebook Instant Articles wants (and since it's just good HTML5 markup) I want to modify the wrappers around images and videos inserted via media wysiwyg. I want to wrap them in <figure> elements instead of <div> or <p> elements.

It took me a while, but I figured out that hook_media_wysiwyg_token_to_markup_alter() is the ticket here. And I actually have it working pretty well, even though it doesn't seem like it's really intended to be able to do this. Here's what I'm doing as of right now:

function mymodule_media_wysiwyg_token_to_markup_alter(&$element, $tag_info, $settings){
  if($tag_info['file']->type == 'image' || $tag_info['file']->type == 'video'){
    $classes = implode(' ', $element['content']['#attributes']['class']); //get the classes from the wrapper
    $element['content']['#prefix'] = '<figure class="' . $classes . '" data-feedback="fb:likes,fb:comments">'; //add a figure wrapper with classes and fb data tag
    $element['content']['#suffix'] = '</figure>'; //close the figure
    $element['content']['#type'] = ''; //images have a type of 'container' which we need to get rid of so theres no extra div markup
  }
}

This works fine...but my first question is: is there a better way than this?

The problem that causes me to post this issue is this: When I do the above it wraps things properly, but it also creates an empty <p></p> tag above the item. I have to assume this is because the WYSIWYG wraps the item normally in paragraph tags, then I alter it (which somehow moves my media outisde that tag) leaving an empty set of paragraph tags above it.

So my html looks something like this:

<p></p>
<figure class="media media-element-container media-medium_embed" data-feedback="fb:likes,fb:comments">
  <img height="147" width="220" class="media-element file-medium-embed" src="http://mysite/path/to/my/image.jpg" alt="">
  <figcaption class="field field-name-field-caption field-type-text-long field-label-hidden field-wrapper">test caption</figcaption>
</figure>

Any thoughts, help, or direction on achieving all this in a better way? (or at least getting rid of the empty <p> tags that are left over?) Thanks!

Comments

Rob_Feature created an issue. See original summary.

Rob_Feature’s picture

Title: changing media wrappers with hook_media_wysiwyg_token_to_markup_alter() » Creating HTML 5 wrappers with hook_media_wysiwyg_token_to_markup_alter()

Realized this would help anyone looking to become more HTML5 friendly, so retitled this as such.

Rob_Feature’s picture

Issue summary: View changes
funana’s picture

Hi @Rob_Feature

reading your posts about the Instant Article issues, when trying to do it via Views/RSS. I am on the same road actually, just that I am in a Panopoly environment, so some things are same same but different.

My skills are very limited, but just before reading your issue here, I stumbled across this: https://www.drupal.org/project/emptyparagraphkiller

Maybe a work around for your empty paragraphs?

Rob_Feature’s picture

Thanks funana, I actually ran across that module as well, but unfortunately it won't fix this issue because of the order in which these functions will fire. The media wysiwyg alter hook will fire much later in the process (from what I can tell) than the emptyparagraphkiller module (I cant remember if that module is an input filter or something that fires on node save), so unfortunately it didn't fix things (at least in my case). thanks for chiming in, though!

Chris Matthews’s picture

Status: Active » Closed (outdated)

Recent versions of media have resolved most of peoples concerns and is compatible with entity translation, multilingual and various advanced configurations. Due to the high volume of inactive and most often irrelevant issues we are Closing this as (outdated). If for whatever reason this issue is important to you AND you still have issues after checking the media recipe documentation, then let us know and we will review your concerns.

Otherwise, see the recipe documentation for how to configure media and for troubleshooting tips OR refer to the media_dev distribution if you want to see a working media setup.

As mentioned, feel free to make some noise in this issue if you still feel it is important to you or someone else.

Thanks,

Media team