Hi,
I was wondering what is the best practice/possilbe solution to get responsive images (with the Picture module) in wysiwyg fields using Media.
I tried the Media>Media CKEditor>CKEditor + Picture approach (recipe) and the Media>Media Wysiwyg>Wysiwyg + Picture approach. Both with no success.
Anytime I end up with an image which has fixed width and height set differing from what the Picture module should get. Is there any way to remove these, maybe in the file display settings?
My current approach is with IMCE which works OK but with fixed paths and I am not able to use the media library (which I would like to use out of consistency and usability).

Thanks for any help on this.

Comments

grossmann created an issue. See original summary.

joseph.olstad’s picture

what theme engine are you using as a sub-theme?

don't think this is a media issue, sounds more like a theme issue.

joseph.olstad’s picture

Component: Media WYSIWYG » Documentation
Status: Active » Postponed (maintainer needs more info)
grossmann’s picture

Hi,
thank you for your reply. I am using a subtheme of the Omega 3 them but could reproduce the issue with Bartik. So i think this is not a theme problem.

I updated all involved modules to their latest releases and finally figured out how it could work.
I had to remove the "widget" plugin (in contrast to the recipe above) to get the button "Picture properties" (alongside the "Media settings") if I right click on an image. This way I can select the image size (breakpoints) supplied by the picture model.
Problem is, that the images get locally set width and height attributes as shown below:

<picture data-picture-mapping="aaa" class="media-element file-default" data-delta="8" typeof="foaf:Image" width="567" height="425">
...
<img data-picture-mapping="aaa" class="media-element file-default" data-delta="8" typeof="foaf:Image" width="567" height="425" data-aspectratio="" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 1w" alt="" title="">
...
</picture>

This way the size set by the picture module is ignored and therefor not responsive.
Is there any way to get rid of the width and height attributes, maybe through a separate module?
Thanks for the help!

grossmann’s picture

Status: Postponed (maintainer needs more info) » Active
kalabro’s picture

grossmann’s picture

I figured this has been discussed in the picture issue queue. A workaround would be to add this css to my theme.

picture img {
    width: auto;
    height: auto;
}

as suggested in #14 here.

But I am not sure what is the right way to fix this? Remove the width/height attribute in the media module (is it needed?) or the add the css in the picture module? Maybe a configurable setting of http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions would be possible.

grossmann’s picture

grossmann’s picture

Thanks kalabro for your reply. But I think this is a bit different issue. I have no problems inserting the image in the wysiwyg area as I choose "image" not "picture" in the file image display config. Then I used the picture popup dialog when right clicking on the image after it was inserted (remember widget plugin for ckeditor needs to be disabled) and select the required size here.

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