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
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
And insert an image
You can now insert an image with the image dialog box.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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 |