Image2 is an enhanced image plugin for CKEditor that supports image captions, CSS class-based alignment and centering.

https://www.drupal.org/node/2454995
http://ckeditor.com/addon/image2

CKEditor 4.4 and above comes with two image properties dialogs, but both CKEditor module and Wysiwyg API only support the older of the two.

This module is a drop-in solution that when enabled will help replace the existing image properties dialog in a CKEditor instance with the Enhanced Image properties dialog.

This module is different from the CKEditor Image2 Captions module, because it is more complete:

  • CKEditor_Image2 supports both CKEditor and WYSIWYG modules.
  • CKEditor_Image2 contains a drush make file for downloading the required third-party plugins from ckeditor.com.
  • CKEditor_Image2 not only supports captions, but also chooses to be opinionated about how images are sized by preventing the editor from adding inline height and width styles on the image tags which is more responsive friendly.
  • I've already asked the author of CKEditor Image2 Captions module if he would like to be co-maintainer (here) with no response. Additionally, s/he has not applied for full project status as far as I can tell.

Finally, about me. (https://www.drupal.org/u/jwilson3) I'm very active in the contrib and core issue queues, contributing many patches to very many modules over the course of my 7+ years experience with Drupal. I am co-maintainer on a number of projects, but never got around to creating my own module (always too busy site building and theming).

Git clone instructions

git clone --branch 7.x-1.x http://git.drupal.org/sandbox/jwilson3/2454995.git ckeditor_image2
cd ckeditor_image2

Manual Reviews by author for PAReview bonus

https://www.drupal.org/node/2546002#comment-10472172
https://www.drupal.org/node/2402633#comment-10472550
https://www.drupal.org/node/2311531#comment-10472570
https://www.drupal.org/node/2450085#comment-10474156

Comments

jwilson3’s picture

Issue summary: View changes
jwilson3’s picture

Issue summary: View changes
PA robot’s picture

Status: Needs review » Needs work

There are some errors reported by automated review tools, did you already check them? See http://pareview.sh/pareview/httpgitdrupalorgsandboxjwilson32454995git

We are currently quite busy with all the project applications and we prefer projects with a review bonus. Please help reviewing and put yourself on the high priority list, then we will take a look at your project right away :-)

Also, you should get your friends, colleagues or other community members involved to review this application. Let them go through the review checklist and post a comment that sets this issue to "needs work" (they found some problems with the project) or "reviewed & tested by the community" (they found no major flaws).

I'm a robot and this is an automated message from Project Applications Scraper.

jwilson3’s picture

Looks like all the warnings and errors are related to docblock formatting. I'll work on that asap.

markconroy’s picture

HI jwilson3,

Very interesting module and will certainly be a valuable part of the ckeditor family.

Some comments on this. In your ckeditor_image2.info file you might consider setting a package for this module. I'd suggest "User Interface" so it resides in the modules list beside ckeditor and/or wysiwyg and other UI items.

The link in the README.md for 'widget' brought me to 404:
http://ckeditor.com/addons/widget
I think it should be:
http://ckeditor.com/addon/widget (no 's' after addon)

The same is true for Line Utils and DialogUI:
http://ckeditor.com/addons/lineutils (remove 's' after addon)
http://ckeditor.com/addons/dialogui (remove 's' after addon)

For some reason, I couldn't get image2 button to show (using wysiwyg module) unless I also enabled the image button.

Once installed I keep getting this notice:
Notice: Undefined index: removePlugins in ckeditor_image2_wysiwyg_editor_settings_alter() (line 100 of /Users/markconroy/htdocs/drupal-7/sites/all/modules/sandbox/ckeditor_image2/ckeditor_image2.module).

You might want to note in the README.md, or on the project page, that this approach adds classes such as align-left or align-right to your image, but does not actually result in the image positioning left/right - these classes need to be added to the theme. (Or you could include a small CSS file with this module.)

Your config.js file attempts to remove the width and height properties, but I didn't find that it worked. I was able to resize the image by one parameter - width or height (though at least the proportions were kept.

Caption worked very well.

jwilson3’s picture

Great feedback! thanks. I'll work these changes in

VanD’s picture

+1 to see this as a full module

bneil’s picture

Thanks for writing this image2 integration code and submitting your project for review!

I noticed while testing that line 100 of ckeditor_image2.module that the following line should be changed:

      $settings['removePlugins'] .= 'image';

to

      $settings['removePlugins'] = 'image';

If the removePlugins key isn't set, we need to create it and set the value to 'image' instead of the concatenating it.

jwilson3’s picture

Status: Needs work » Needs review

I've fixed #8, and incorporated all the feedback from #5 and pushed changes to the 7.x-1.x branch on d.o

I also added the note about having to add CSS to your theme in the Readme as well as on the project page, and opened a follow-up task to actually provide the sample CSS that can be copied and pasted into the theme. Here: #2486227: Provide default CSS for align-left, align-right, and align-center.

darol100’s picture

Status: Needs review » Reviewed & tested by the community

Automated Review

Pareview.sh shows so minors warnings- http://pareview.sh/pareview/httpgitdrupalorgsandboxjwilson32454995git

They should be address before the release but they are not blockers.

Coder Module: Show same warnings that Pareview.sh

Manual Review

Individual user account
Yes: Follows the guidelines for individual user accounts.
No duplication
Yes: Does not cause module duplication and/or fragmentation.
Master Branch
Yes: Follows guidelines for master branch.
Licensing
Yes: Follows the licensing requirements.
3rd party assets/code
Yes: Follows the guidelines for 3rd party assets/code.
README.txt/README.md
Yes : Follows guidelines for in-project documentation and/or the README Template.
Code long/complex enough for review
Yes: Follows the guidelines for project length and complexity.
Secure code
Yes: Meets the security requirements.
Coding style & Drupal API usage
List of identified issues in no particular order. Use (*) and (+) to indicate an issue importance. Replace the text below by the issues themselves:
  1. Should fix all the warnings from Pareview.sh, before the release.
  2. I think you should add the text "See addon page for more details." at the end of "Plugin for the Enhanced Image2 widget for CKEditor." It should looks something like this "Plugin for the Enhanced Image2 widget for CKEditor. See addon page for more details." Just to have consistency with the rest of plugins.
  3. Add hook_help with some information about your module so users can have access at your module documentation in the Drupal UI.
  4. ckeditor_image2.module - Line 12: You should consider adding your css hook_page_build() instead of hook_init. Because:
    hook_init() runs even on AJAX requests, private file requests, etc. hook_page_build() runs when we're only delivering HTML.

The starred items (*) are fairly big issues and warrant going back to Needs Work. Items marked with a plus sign (+) are important and should be addressed before a stable project release. The rest of the comments in the code walkthrough are recommendations.

If added, please don't remove the security tag, we keep that for statistics and to show examples of security problems.

This review uses the Project Application Review Template.

I do not see any blocker. This is a great module that should be promote it long time ago.

jwilson3’s picture

I've added stylesheets to the module so you no longer have to manually add the alignment CSS to your theme, or to the editor's content.css file.

Also, I've fixed all of the recommended changes listed in comment #10, except for the implementation of hook_help(), which seems to be a fairly non-trivial documentation task. It appears the help text is supposed to be written for non-devs, and instruct people how to use the module through the UI. I'll need some more time to get my thoughts together in order to write all the instructions down in another non-technical way, using the hook_help implementation from CKEditor module as a guide.

Thanks for the review.

Here is a link to my last run through Pareview.sh, noting that everything passes, except for two longer lines in the readme file, that there is no way to reduce them to 80 columns.

http://pareview.sh/pareview/httpgitdrupalorgsandboxjwilson32454995git

Pedro Lozano’s picture

Priority: Normal » Major

I have tested this and seems to be working well and meets the coding standards.

RTBC, Can someone promote this to project status and give james full access to create projects?

Bumping to Major just because this has been sitting here for too long.

citlacom’s picture

I have tested too and worked pretty well, also the code meets the coding standards.

darol100’s picture

1+ to promote this project to full project.

I have been using this on a production site for over a month without any problems.

jwilson3’s picture

Issue summary: View changes
Issue tags: +PAreview: review bonus
klausi’s picture

Status: Reviewed & tested by the community » Fixed

manual review: everything looking good.

Thanks for your contribution, jwilson3!

I updated your account so you can promote this to a full project and also create new projects as either a sandbox or a "full" project.

Here are some recommended readings to help with excellent maintainership:

You can find lots more contributors chatting on IRC in #drupal-contribute. So, come hang out and stay involved!

Thanks, also, for your patience with the review process. Anyone is welcome to participate in the review process. Please consider reviewing other projects that are pending review. I encourage you to learn more about that process and join the group of reviewers.

Thanks to the dedicated reviewer(s) as well.

jwilson3’s picture

Thank you Klausi.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.