Hi,

Problem is that CKEditor is stripping out the PICTURE and SOURCE tags. I have tried multiple methods of allowing the tags, but nothing works.

I am using the following modules: Media, Breakpoints, Picture, CKEditor

Thank you for your input.

-Erik

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ErikHendrick’s picture

Issue summary: View changes
ErikHendrick’s picture

Issue summary: View changes
loparr’s picture

same here, have you found a solution?

ErikHendrick’s picture

Hi,
I found no solution, I believe there is no solution in D7.
In D8 there is this module: https://www.drupal.org/project/inline_responsive_images
However, as of about 3 or 4 weeks ago, that module has bugs as well:
https://www.drupal.org/node/2770965

Changing from Inline WYSIWYG Images to Images as Fields
I had read several times over the last couple years about content authoring solutions that worked around inline images via WYSIWYG because that can be a problem for migrations. The solution is to use images in Fields. So I re-thought the content authoring solution and re-worked it with the Paragraphs module.

Paragraphs Module
Using the paragraphs module has turned out to be very helpful for the content author. Additionally, I get exactly what I want in using Responsive Images anywhere in the content. For example: Create Paragraph Type: Image Medium + Text which has an image field and a body field. Then in Display mode for the Image, choose "Responsive Image" and select the responsive image style.
Using only the Paragraphs module you can end up with several paragraph types to accommodate the various Image Paragraph Only types, or Image + Text paragraph types. However, using the Classy Paragraphs module allows you to cut the number of Paragraphs by 50% or more since Floating the image Right or Left can be done with a simple check of a box.

loparr’s picture

Hi, I just turned off ckeditors Advanced content filter. Now all picture markup inserted remains.

ErikHendrick’s picture

Thanks, that must have been the one thing I didn't try.

kalabro’s picture

Version: 7.x-2.0-alpha4 » 7.x-2.1
FileSize
27.68 KB

I had to use this workaround to make Media WYSIWYG and CKEditor (part of WYSIWYG) work together:

/**
 * Implements hook_file_displays_alter().
 */
function YOUR_MODULE_file_displays_alter(&$displays, $file, $view_mode) {
  // Disable Picture display in WYSIWYG mode. Normal <img> will be rendered
  // instead. CKEditor and Media WYSIWYG modules with render with common <img>
  // while frontend will render full <picture> output as usual.
  if (!empty($file->override['wysiwyg']) && !empty($displays['file_field_picture']['status'])) {
    $displays['file_field_picture']['status'] = 0;
  }
}

It simply doesn't render <picture> at all in WYSIWYG mode. Fallback display will be used to render image (see attached).

I quickly ran though the code in Chrome and my current assumption is that `media_wysiwyg.filter.js` can't properly parse and replace <picture> output.

joseph.olstad’s picture

Interesting, where is this 'picture' type comming from? is this a custom module making this type? or is this a type of image that you created?

Oh ok, nevermind, I see issue summary now, picture is a module. I haven't tried this module before.

joseph.olstad’s picture

this code could either go into the media module as a patch, or into the picture module as a patch or commit.
have to make a patch

joseph.olstad’s picture

Status: Active » Needs work
joseph.olstad’s picture

Please back off your custom workaround(s) and try this patch , should apply to either 7.x-3.x or 7.x-2.x.

joseph.olstad’s picture

Status: Needs work » Needs review
joseph.olstad’s picture

for those using the media_ckeditor module, we may have to make a patch for that too. But in the media_ckeditor queue.

ron_s’s picture

Version: 7.x-2.1 » 7.x-2.x-dev
Related issues: +#2938748: Support picture module and file display

I'm tempted to mark as RTBC, but technically I can't say patch #11 works for Media WYSIWYG, since I'm using Media CKEditor.

However, I used your patch to create a Media CKEditor version. Works perfectly: https://www.drupal.org/project/media_ckeditor/issues/2938748

Given there is a lot of overlap, maybe we can get both of these versions to RTBC?

joseph.olstad’s picture

Status: Needs review » Reviewed & tested by the community

Hi ron_s , so patch 11 works for you when using media_ckeditor?

If it doesn't , set this issue back to 'Needs review'

joseph.olstad’s picture

to be extra careful could write an if module_exists

if (module_exists('picture')) {
  // add magic juice seen in patch 11
}
ron_s’s picture

I think the module_exists is an excellent idea.

ron_s’s picture

Status: Reviewed & tested by the community » Needs review
FileSize
1.15 KB

Here's an update with the suggestion. Works for me.

ron_s’s picture

Status: Needs review » Reviewed & tested by the community

Also in case it wasn't clear, this can be set to RTBC. Thanks!

  • joseph.olstad committed 1260239 on 7.x-2.x authored by ron_s
    Issue #2496461 by joseph.olstad, ron_s, kalabro: CKEditor Strips out...

  • joseph.olstad committed 1260239 on 7.x-3.x authored by ron_s
    Issue #2496461 by joseph.olstad, ron_s, kalabro: CKEditor Strips out...
joseph.olstad’s picture

Status: Reviewed & tested by the community » Fixed

Thanks @ron_s and everyone else!
committed to 7.x-2.x dev and 7.x-3.x dev
will make it into next release whenever that is.

Status: Fixed » Closed (fixed)

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