Adaptive images in wysiwyg

I'm looking for the same thing - I've got AIS installed, and it works great for images uploaded in an "image" field, but what about those that are embedded in the body field?

I'm using CKEditor and IMCE.

Thanks!

Aha! I figured it out.

In the CKEditor configuration, edit the Full HTML profile.

Under Editor Appearance, two things need to happen:

(1) Add the media button to the toolbar AND
(2) Under Plugins, check "Plugin for inserting images from Drupal media module".

I always forget that even if set up, this won't work for Filtered HTML - just Full.

Now, when I go to edit a page, I can use the media button to either upload or use an existing image. When I select the item, it gives me the options for display size. I select "Adaptive" and it works for both video and images.

@barbbar: I see no "media button" just the "media embed" but it only allows to embed a code ...

A query: I do not see "Plugin for inserting images from Drupal media module" mentioned in comment 2. Once the media module and media browser are installed, I have a 'media browser' option under CKEditor buttons and plugins, and nothing else related.

I am not sure what the 'embed media' button refers to in comment 4 refers to.

[I am using media 7.x-2.0-unstable5]

You all need to install Media module. Then you will have a Media button as mentioned in #2.

Just thought I'd post my workaround solution. I used media and plupload and then set my image style to use for inserting images. This works great with wysiwyg editors. Then I'm using a responsive theme which I assume anyone interested in adaptive images would also be using.. for the narrow, normal, and wide displays then I just change the "max-width: " css property for the image style I applied. works great!

What is the width of the image is less than the width of the windows? How do you set the "max-width" ?

So I created a new image style that is called "large" and then I just set the "max-width:" property in css for this style. So when I insert the image into my CKE editor using plupload it automatically applies the "large" image style to the image.

/** your-theme-alpha-default-narrow.css **/
  .image-large {max-width: 300px;}

/** your-theme-alpha-default-normal.css **/
.image-large  {max-width: 480px;}

I ran into the same issue and the Media module was not solving this issue. I wanted the images to be adaptive, the same way other images on the site are adaptive.

I have written a patch that will make images added through an editor become adaptive, without having to add the class "adaptive-image" manually to each image.

This patch is only for the body text of a content type, it is not setup to work with other text fields or with blocks. If anyone wants to work on adding those additional features, that would be great.

After installing the patch, be sure to clear all caches in order to have the module pick up the new functions.

To turn the functionality on for a content type body field, navigate to the content type and edit the field. Example: Structure -> Content Types -> Basic page -> Manage Fields

Click "edit" next to the Body field. Scroll to the bottom of the page, check the box for "Adaptive Images" and click "Save settings."

Next, navigate to a node with an image in the body, edit the node, save the node. This will remove the height and width attributes from the images, remove the height and width styles from the style attribute and add the "adaptive-image" class to the image.

Please test and let me know.

Thanks,
Shane

Status update

Height and width attributes should not be removed, these can be overridden by normal css rules. Explicit height and width attributes allow browsers to make decisions about layout before the entire image has downloaded (a good thing).

It is only necessary to remove inline height and width styles, to avoid requiring the !important modifier in css.

I think the integration in the media module and thus in CKEditor is only possible with the Adaptive Image Styles module ...
https://drupal.org/project/ais
This is a different module but almost the same name, hence the confusion ... ?
Correct me I'm wrong ...

Be Warned for the AIS module, .htaccess needs to be edited ..

I think @webatelier is right. Adaptive Image Styles support inline images, Adaptive Images does not. I just installed AIS following the instructions on the project page, and it works like a charm. I am using the Wysisyg module with CKEditor and inserting images with the insert module.