Hello, I have created a module to allow insertion of images with CKEditor that are responsive thanks to the resp_img module. Code reviews and feedback are welcome.

http://drupal.org/sandbox/ShaunDychko/1905886

The module also simplifies the node edit screen as attached. The approach taken is:

  • The 'link' tab is removed since editors can use the regular 'link' button to make images clickable, and the 'advanced' tab is removed since all that stuff seems extraneous, with the exception of the 'title' attribute field.
  • The 'title' attribute field is added to the main dialog, along with a select box for image width and alignment. Width and Alignment each add 'data' attributes ('data-image-width' and 'data-image-align' to the img tag and the module comes with a basic .css file with rules to get started. The Alignment box has a 'center' option added.
  • A custom configuration file is generated for CKEditor containing the image styles that have the resp_img default suffix which you selected at admin/config/media/ckeditor_adaptive_images. The CKEditor image drop-down will be populated with the chosen styles (displayed without the suffix).
  • The URL of each image file is re-written by inserting "/styles/[image_style_name_with_default_suffix]/public" into the path: 'sites/[site-name or default]/files/...[insert image style string here] .../the_rest_of_the_regular_path_to_file'. This triggers the Responsive Images and Styles module to do it's work with delivering different file sizes to different width devices.
  • Browser resize handles are removed from images (and tables also, as it turns out) in order to avoid pesky inline height and width styles, and also because width is being selected in the image dialog.
CommentFileSizeAuthor
image-properties.jpeg120.95 KBshaundychko

Comments

shaundychko’s picture

I'm applying for project status for this integration: http://drupal.org/node/1917730
Please review this code if you have a chance.

shaundychko’s picture

I'm also working on a patch to the picture module here: http://drupal.org/node/1885766, and if that get's accepted, it'll probably replace this module.

attiks’s picture

Status: Active » Postponed

@Shaun I think we better focus first on #1885766: WYSIWYG support and you're getting really close. I think it's better to integrate everything in picture.

I'm postponing this one for the moment.

shaundychko’s picture

Status: Postponed » Closed (fixed)

Patch committed to Picture module! http://drupal.org/node/1885766#comment-7110076

shaundychko’s picture

Issue summary: View changes

correct new image path