The Picture module allows you to use picture groups created with inline image inserted in body field with WYSIWYG or CKEditor modules.
Configuration
Picture settings
Navigate to Picture settings (admin/config/media/picture/ckeditor) and enable the picture groups wich will be available in the ckeditor (the library) image dialog box.
You can set for each group his weight (in the select list) and the fallback image style
Filter Text format
Navigate to the text format (admin/config/content/formats/full_html for the Full HTML Format) on wich you want use picture module and enable the filter Make images responsive with the picture module.
Plugin WYSIWYG
Navigate to the WYSIWYG profiles (admin/config/content/wysiwyg/profile/full_html/edit) and enable the plugin Responsive images with the picture module.
And insert an image
You can now insert an image with the image dialog box.
Select the image alignment and choose the picture group you enable in the first step.
You can set the alt and title attributes.
Custom css file for the WYSIWYG
The image inserted in the body field is displayed with original size in the node edit form. You can set a custom css in the WYSIWYG settings in order to better control the display of the picture in this form.
For example you can use some rules as
/* File editor.css */
/* Picture rules for node edit form */
img[data-picture-align="left"] {
margin-right: 20px;
float: left;
}
img[data-picture-group="bartik"] {
max-width: 33%;
}| Attachment | Size |
|---|---|
| ckeditor_settings.jpg | 48.7 KB |
| filter_text_format.jpg | 15.1 KB |
| plugin_wysiwyg_picture.jpg | 21.7 KB |
| image_dialog_box.jpg | 41.01 KB |
| custom_css_wysiwyg.jpg | 29.66 KB |
| dialog_box_button.jpg | 27.94 KB |