The latest dev version of module picture support now WYSIWYG module with IMCE to include image in body field with a picture group format.

I test to include image too in body field with the latest dev version of media module 2.x as explain in this issue WYSIWYG support.

I create 2 display mode of file in media (file display)
1- the first, called, "large" use a display of core's image (with a style fixed)
2- the second, called "responsive" use a display of picture (with a picture group)

I inserted an image with media module in a body field and used the both display mode created

1- In the first case, the same style (large) is always used. I double click on image to insert the data-picture-group attribute after inserting it with Media, and save. But the configuration of the data-picture-group attribute is not saved

2- In the second case, It's the same thing, the data-picture-group attribute is not saved when I double click on image to insert them. But the image is responsive, with the display mode i called "responsive" wich is defined on a picture group (in /file-types/manage/image/file-display).

So, the second case permit to insert image with media module rendered with a picture group.

But now you can't define the position of the image (left, right, center) because the data attibute are not saved. An other solution would be to apply a css style to the img wich do the the job (float: left, etc) but we can't attribute a css style to the img with the new dialog box.

Any idea ?

Comments

akmalfikri’s picture

Please list here what patch do we need to make to make it work.

I also have an error : Undefined index: mythemename in picture_wysiwyg_plugin() (line 1222 picture.module). after I enabled the 'Make images responsive with the picture module' setting in my site's text format.

flocondetoile’s picture

I try to uncheck the option Include Bartik picture group in the CKEditor image dialog (Bartik is the name of the picture group) in admin/config/media/picture/ckeditor, in order to have the classic CKEditor image dialog and then apply the style on the image inserted with media module.

I get well the classic image dialog box, and in the node edit the html markup are well applied (float: left, etc.).

But when i view the node the only html markup are those of picture module but without the markup of picture (data-picture-align="right" data-picture-group="bartik", etc.) and without the html markup i defined in the image dialog box.

So when i inserted an image with media module 2.x in WYSIYWG with ckeditor 4.0.1.1, i can't apply any custom style either with the image dialog box modified by this patch or with the classic image dialog box.

But I wonder if this issue is relative to picture module ?

@akmalfikri : the patch should permit to apply the html markup (image alignment and image size) to image inserted with media module. It was very useful also if we can choose in a other select list some css styles that we could set in the configuration page.

I don't have your error.

alexgkt’s picture

The comment on the picture_image_uri() function stated that the img src can be either http://, https://, or root relative /.

@param
 *   Image src starting with http://, https://, or root relative /.
 *   It must point to a local file.

But it's not so because i realised that when an absolute path is used this particular function will return an error causing the validation code to return an error because the $needles[$scheme] will not be at position 0.

    // Check whether the file stream directory is at the beginning of
    // the image src. Use === since strpos could return false.
    if (strpos($src, $needles[$scheme]) === 0) {
      $matches[$scheme] = $needles[$scheme];
    }

When i tried using a relative path, the validation passed and $needles[$scheme] is indeed at position 0 therefore I've added 2 lines of code to make sure to remove the domain name of from the $src when an absolute path is used. Not sure if this is the best way to solve it but $key[0] remained empty even when i'm using a relative path.

    // Convert absolute path to relative path
    $key = explode($needles[$scheme], $src);
    $src = str_replace($key[0], '', $src);
    
    // Check whether the file stream directory is at the beginning of
    // the image src. Use === since strpos could return false.
    if (strpos($src, $needles[$scheme]) === 0) {
      $matches[$scheme] = $needles[$scheme];
    }

This is not quite a media module issue but images that is added through the add media button are in absolute path hence i think this should be useful to those that are having issue using the add media button.

attiks’s picture

Can you try using parse_url, something like

$src = parse_url($src, PHP_URL_PATH);

it should work for both absolute and relative paths.

attiks’s picture

Title: Media module support » Wysiwyg + Media module support

Better title, since this is about wysiwyg + media

ShaunDychko’s picture

Here's the second piece of the puzzle. The Media module needs to be told to accept the custom attributes. Patch attached.

parse_url

definitely looks like a better solution for checking the 'Drupal URI' (not included in this patch).

ShaunDychko’s picture

Oops, forgot to make patch project relative. BTW, this patch is against media-7.x-2.x-dev from today. Revised patch attached.

attiks’s picture

alexgkt’s picture

Here's the new patch file as suggesested by attiks at #4 instead of the previous hack.

ShaunDychko’s picture

Status: Active » Needs review

Tested:

$src1 = '/sites/all/default';
$src1 = parse_url($src1, PHP_URL_PATH);
$src2 = 'http://picture.dev/sites/all/default';
$src2 = parse_url($src2, PHP_URL_PATH);
echo $src1 . '<br>';
echo $src2;

and it returns:

/sites/all/default
/sites/all/default

Which looks great!

attiks’s picture

Status: Needs review » Fixed
westis’s picture

I added an image with Media in WYSIWYG. But when I double-click the image to select the Picture groups the entire page is greyed out but no popup window comes up. Same is happening if I just click the Image button instead of Add media.

I have the dev version of Picture as of today, and have enabled "Make images responsive with the picture module" in the Text formats, and put that after "Convert Media tags to markup" int he Filter processing order.

Do need something more to make Picture work with Media in WYSIWYG? Do I need to apply the patch for Media in #7?

attiks’s picture

#12 can you create a new issue please and link it with this one?

attiks’s picture

#12 you probably need the patch for media

Status: Fixed » Closed (fixed)

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

  • Commit d37a7a3 on 7.x-1.x, picturefill2 authored by alexgkt, committed by attiks:
    Issue #1932898 by Shaun Dychko, alexgkt | flocondetoile: Added Wysiwyg...

  • Commit d37a7a3 on 7.x-1.x, picturefill2, 7.x-2.x authored by alexgkt, committed by attiks:
    Issue #1932898 by Shaun Dychko, alexgkt | flocondetoile: Added Wysiwyg...