When I add an image via the "add media" link in the WYSIWYG and turn it into a link, the link is effectively disabled. The image displays but there is no link.

Generated HTML from around an example image:

<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>
<a href="http://www.example.com">
<br />
<div class="media media-element-container media-default">
<div id="file-841" class="file file-image file-image-jpeg">
<h2 class="element-invisible">
<a href="/file/myimagejpg">myimage.jpg</a></h2>
<div class="content">
<img height="345" width="386" class="media-element file-default" data-delta="1" alt="" title="" typeof="foaf:Image" src="http://www.example.com/sites/default/files/myimage.jpg" />  
</div>
</div>
</div>
<p></a></p>
</div></div></div></div>

(I don't know what <h2 class="element-invisible"> is or if it has anything to do with it.)

The code generated by the Media module when viewed in edit mode is:

<p><a href="http://www.example.com">[[{"fid":"841","view_mode":"default","fields":{"format":"default","alignment":"","field_file_image_alt_text[und][0][value]":false,"field_file_image_title_text[und][0][value]":false,"external_url":""},"type":"media","field_deltas":{"1":{"format":"default","alignment":"","field_file_image_alt_text[und][0][value]":false,"field_file_image_title_text[und][0][value]":false,"external_url":""}},"link_text":null,"attributes":{"height":345,"width":386,"class":"media-element file-default","data-delta":"1"}}]]</a></p>

...which incidentally seems an awful lot for one image (I'm sure about three lines more than there used to be in older versions of the module).

I am not sure when this problem started on my site but I have only noticed it today, as of updating to 7.x-2.6.

There are quite a lot of web results for this issue which say to untick "convert URLs into links" in the input filter, yet even if I do this the problem doesn't go away. It still happens even if "Convert Media tags to markup" is the only filter.

Currently my only way of linking off images is to upload the image in the usual way using "add media", then copy the image location e.g. /sites/default/files/myimage.jpg, then remove the image and reinsert it using the "image" icon in the wysiwyg by quoting that image URL, then adding the link onto it. Or just by going into the HTML and using <img src>. All of which is long winded and difficult for me to explain to editors who are used to using "add media".

CommentFileSizeAuthor
#13 0001-Add-conditional-if-no-external_url-field-present-don.patch1.45 KBtwfahey

Comments

awebmanager created an issue. See original summary.

joseph.olstad’s picture

joseph.olstad
Primary language French
commented

Please try the latest dev release
and see related issue
#2884412: add the config option for add embed link to make it optional

joseph.olstad’s picture

joseph.olstad
Primary language French
commented

sorry for any trouble this may have caused.
I'll cut a new release probably today, media 7.x-2.7

awebmanager’s picture

awebmanager commented

Hi Joseph, I've tried updating to the latest dev release and I can see there is now an option in /admin/config/media/browser for "Provide the ability to link media to pages". I have ticked this and added a new image and added a URL into the "link image" field in the media browser, but it still didn't make my image into a link. I've also tried adding a link off the media image in the usual ways i.e. through the image properties or link icon but still no luck I'm afraid. I can't follow the thread on #2884412 as this is very technical.

joseph.olstad’s picture

joseph.olstad
Primary language French
commented
Category: Bug report » Support request
Status: Active » Needs review

In order to use this functionality you must upgrade file_entity to release 7.x-2.1
the link functionality requires file_entity 7.x-2.1 , there was a tpl change in there to accommodate this.

awebmanager’s picture

awebmanager commented

Thanks Joseph, that has worked! However, it only works if I enter the URL in the "link image" field during the process of uploading/inserting the image. If I do this and forget to add a link, and/or try to link off the image in the traditional way by highlighting it and clicking the "link" icon in the toolbar, this doesn't work. Also, there now seems no way to edit an existing link off an image created with media browser using the wysiwyg - if I right click on an existing linked image and select "properties" and then "link", there is no URL in the field to edit. The user has to go into the HTML to edit the URL, which isn't as user-friendly, so will affect some editors with lower web skills.

mattgross’s picture

mattgross commented

I'm experiencing the same issue (I think) with Media 7.x-2.9 & File Entity 7.x-2.3

This markup on the editor side:

<p class="rtecenter"><a href="https://www.soapguild.org">[[{"fid":"938","view_mode":"default","fields":{"format":"default","alignment":"","field_file_image_alt_text[und][0][value]":false,"field_file_image_title_text[und][0][value]":false},"type":"media","field_deltas":{"1":{"format":"default","alignment":"","field_file_image_alt_text[und][0][value]":false,"field_file_image_title_text[und][0][value]":false}},"link_text":null,"attributes":{"height":750,"width":1200,"style":"height: 63px; width: 100px; margin: 5px;","class":"media-element file-default","data-delta":"1"}}]]</a></p>

Generates this:

<a href="https://www.soapguild.org"></a>
<div class="media media-element-container media-default">
    <div id="file-938" class="file file-image file-image-png">
        <h2 class="element-invisible"><a href="/file/hscg-logopng">HSCG Logo.png</a></h2>
        <div class="content"> <img height="750" width="1200" style="height: 63px; width: 100px; margin: 5px;" class="media-element file-default" data-delta="1" alt="" title="" src="https://www.humboldtsoapcompany.com/sites/humboldtsoapcompany.com/files/HSCG%20Logo_0.png"></div>
    </div>
</div>

I'm also not seeing any link fields when adding an image via the media tool, so the above was done by adding the link html.

joseph.olstad’s picture

joseph.olstad
Primary language French
commented

@mattgrosswork
can you try temporarily enabling theme debugging by adding this (temporarily) to your settings.php file:

$conf['theme_debug'] = TRUE;

see what tpl files are generating your page by viewing page source.

if it's not file_entity then it might be that your tpl is overriding the file_entity tpl.

Not sure, it's working for others. This might explain it for you.

mattgross’s picture

mattgross commented

Interesting, in the page source the anchor is actually wrapping around the media div:

<a href="https://www.evenvision.com/" target="_blank"><div class="media media-element-container media-half_width media-wysiwyg-align-right">

<!-- THEME DEBUG -->
<!-- CALL: theme('file_entity') -->
<!-- FILE NAME SUGGESTIONS:
   * file--5--half-width.tpl.php
   * file--5.tpl.php
   * file--image--gif--half-width.tpl.php
   * file--image--gif.tpl.php
   * file--image--half-width.tpl.php
   * file--image.tpl.php
   * file-entity.tpl.php
-->
<!-- BEGIN OUTPUT from 'sites/all/modules/file_entity/file_entity.tpl.php' -->
<div id="file-5--2" class="file file-image file-image-gif">

        <h2 class="element-invisible"><a href="/file/5">500x521.gif</a></h2>
    
  
  <div class="content">
    <img class="media-element file-half-width" data-delta="4" src="http://base.ln.evenvision.com/sites/base.ln.evenvision.com/files/500x521.gif" width="500" height="521" alt="" title="" /></div>

  
</div>

<!-- END OUTPUT from 'sites/all/modules/file_entity/file_entity.tpl.php' -->

</div></a>

However it doesn't match the final markup on the page. In dev tools, it looks like the browser is inserting tags just before the media element:

<div class="media-p"><a href="https://www.evenvision.com/" target="_blank"><br>
</a><div class="media media-element-container media-half_width media-wysiwyg-align-right"><a href="https://www.evenvision.com/" target="_blank">
<!-- THEME DEBUG --><!-- CALL: theme('file_entity') --><!-- FILE NAME SUGGESTIONS:
   * file--5--half-width.tpl.php
   * file--5.tpl.php
   * file--image--gif--half-width.tpl.php
   * file--image--gif.tpl.php
   * file--image--half-width.tpl.php
   * file--image.tpl.php
   * file-entity.tpl.php
--><!-- BEGIN OUTPUT from 'sites/all/modules/file_entity/file_entity.tpl.php' --></a><div id="file-5--2" class="file file-image file-image-gif"><a href="https://www.evenvision.com/" target="_blank">
</a><h2 class="element-invisible"><a href="https://www.evenvision.com/" target="_blank"></a><a href="/file/5">500x521.gif</a></h2>
<div class="content">
    <img class="media-element file-half-width" data-delta="4" src="http://base.ln.evenvision.com/sites/base.ln.evenvision.com/files/500x521.gif" width="500" height="521" alt="" title="">  </div>
</div>
<!-- END OUTPUT from 'sites/all/modules/file_entity/file_entity.tpl.php' --></div>
</div>

No additional templates, just file_entity.tpl.php. Any ideas?

joseph.olstad’s picture

joseph.olstad
Primary language French
commented

Please review this support issue, it may be related. There's several configuration options to review.
#2888472: Images shown as links

joseph.olstad’s picture

joseph.olstad
Primary language French
commented

particularly, https://www.drupal.org/node/2888472#comment-12149043

mattgross’s picture

mattgross commented

Thanks for the suggestion, For the image file display, we do indeed have only image selected with the link to field set to Nothing, and our text format settings are as follows:

  • Convert Media tags to markup
  • Convert line breaks into HTML (i.e.
    and

    )

  • Convert URLs into links

We're not filtering out any tags & have ACF disabled, which was also suggested.

It's worth noting that we're using the modules CKEditor & Media CKEditor instead of the WISIWYG module with the CkEditor library, just in case that's relevant.

twfahey’s picture

twfahey commented
StatusFileSize
new 0001-Add-conditional-if-no-external_url-field-present-don.patch1.45 KB

I wound up having an issue where my Media WYSIWYG was failing to load with a Javascript error:

media_wysiwyg.filter.js Uncaught TypeError: Cannot read property 'length' of undefined...

which I wound up tracing back to the fact that somehow, the media tokens were saved without an "external_url" field inside the JSON. Adding it manually fixes it. Attached patch adds conditional check for this value before attempting to load it, so it does seem to resolve the issue. Not sure if there's some deeper issue here I am running into, any advice on this would be great.

Status: Needs review » Needs work

The last submitted patch, 13: 0001-Add-conditional-if-no-external_url-field-present-don.patch, failed testing. View results

joseph.olstad’s picture

joseph.olstad
Primary language French
commented

Your patch has utexas in it, and paths of your site root.

To make a patch for media you should first clone the media project, change cloned code and make a patch from that.

twfahey’s picture

twfahey commented

Thank you for the guidance, I apologize for the oversight in my patch. Funny enough, when I went to do just that process you described, I found that in the dev version, this issue it appears has been remedied, and in a cleaner way. Well, I at least learned a lesson in proper patching that I had overlooked, I should have read the docs a bit more carefully! And, always check the dev version for the fix :) Thanks again.

joseph.olstad’s picture

joseph.olstad
Primary language French
commented

that fix has been there since media 7.x-2.7 published in june 2017.

we're now at media 7.x-2.10

joseph.olstad’s picture

joseph.olstad
Primary language French
commented
Version: 7.x-2.6 » 7.x-2.10
Status: Needs work » Fixed

fixed in 7.x-2.10
#2884412: add the config option for add embed link to make it optional

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.