Linked images from the Media module in WYSIWYG having A tags stripped when rendered to template

Question

I am using the WYSIWYG module to load TinyMCE 4.x, I am then uploading an image via the Media button in the toolbar of TinyMCE finally I am using LinkIt to link the image to a location.

All of this is fine inside the WYSIWYG editor, but once it is published and viewed on the page the wrapping <a> tag is stripped.

So in the editor if I view the source I see:

<a href="/my-exciting-page/index.html">
    [[{"fid":"7","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"","field_file_image_title_text[und][0][value]":""},"type":"media","link_text":null,"attributes":{"height":376,"width":640,"class":"media-element file-default"}}]]
</a>

However once this is rendered to the template I see simply:

<img height="376" width="640" class="media-element file-default" typeof="foaf:Image" src="http://example.org/sites/default/files/miscl.jpg" alt="" />

If I then edit this piece of content again and view the source of the WYSIWYG editor the <a> tag is definitely still wrapped around the Media module's little string of JSON.

In a bid to prevent this from happening I changed the Wysiwyg Profiles and Text Profiles so that they don't remove broken tags or attempt to clean up an HTML or introduce any of their own HTML. Unfortunately this has had no effect.

Is there some way that Media/Drupal/WYSIWYG/LinkIt can be setup so that it will allow images to be linked? I have been unable to find a relevant issue or patch floating about out there on the web either.

Answer 1

I posted this as an issue on the media_wysiwyg module bug tracker over at https://www.drupal.org/node/2357993 and have been working my way through it since. Here is the best result I have managed to achieve so far copied from my responses to that issue.

---

This issue is mostly caused by the file_entity module. To work round this I have restricted the view modes available to media_wysiwyg in /admin/config/media/wysiwyg-view-mode. I have set images to only allow the WYSIWYG view mode like so:

I have then created an override template for the file entity called file--image--wysiwyg.tpl.php (see https://www.drupal.org/node/1793548) and I have the following code in it:

<?php

hide($content['links']);
print render($content);

This has now removed all the annoying links, headers and wrapping <div>s from the output EXCEPT for the media_wysiwyg wrapping mentioned in comment #4.

As this is just one wrapping <div> and the page is HTML this now no longer breaks the link, but it would still be preferable to be able to remove this annoying wrapping <div>.