BUEditor + Lightbox + IMCE

Just a first attempt at finding the solution... anyone else please feel free to chime in with something better.

Found http://drupal.org/node/124177#comment-520612
Edit: forgot to mention... this just gave me the idea, don't follow the instruction on that post. Do install Lightbox2 module.

With IMCE this process is less automated than Image Assist, but not too bad (and I think with some work can be made easier too).

For a "functional" if not ideal solution:

1. Go to the BUEditor settings page (admin/settings/bueditor/1).
2. While you're here might as well setup an image-floating method... so change the Insert/edit image code to the following:
   

   php:
   $imce_url = function_exists('imce_menu') && user_access('access imce') ? url('imce/browse') : '';
   
   return "js:
   var B = eDefBrowseButton('$imce_url', 'attr_src', 'Browse', 'image');
   var form = [
   {name: 'src', title: 'Image URL', suffix: B},
   {name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
   {name: 'height', attributes: {size: 3}},
   {name: 'alt', title: 'Alternative text'},
   {name: 'class', title: 'Position', type: 'select', options: {'': '', img_left: 'Left', img_right: 'Right'}}
   ];
   eDefTagDialog('img', form, 'Insert/edit image', 'OK');
   ";
   

   And add this to your style.css:

   .img_left {
     float: left;
     padding: 0 10px 10px 0;
   }
   
   .img_right {
     float: right;
     padding: 0 0 10px 10px;
   }
   

   You can now choose to float an image left or right from the Image settings button. Adjust padding as needed.

3. Now for the lightbox, change the Insert/edit link code to:
   

   php:
   $imce_url = function_exists('imce_access') && imce_access() ? url('imce') : '';
   
   return "js:
   var B = eDefBrowseButton('$imce_url', 'attr_href', 'Browse', 'link');
   var form = [
    {name: 'href', title: 'Link URL', suffix: B},
    {name: 'html', title: 'Link text'},
    {name: 'title', title: 'Link title'},
    {name: 'rel', title: 'Lightbox', type: 'select', options: {'': '', lightbox: 'lightbox'}}
   ];
   eDefTagDialog('a', form, 'Insert/edit link', 'OK');
   ";
   

   Wish I could get it to work as a checkbox or radio field instead of a select, but haven't figured out how yet... just changing "select" didn't seem to do the trick. You can now browse IMCE for the fullsize image you want loaded in the lightbox, and the rel="lightbox" code will be added to the link if you select it.

Now ideally, I'd like to make this a lot more automated by using the techniques discussed in the lengthy README.txt for BUEditor, like the section "Here are the METHODS of the instance E" (if I understand them correctly that is, it seems to me this could work though). My goal with this would be to build a "Lightbox" link button you can press while an image's HTML is selected (or even an all-in-one button that handles everything in one step). The button would extract the URL from the image HTML and use it to construct the <a href=""></a> tags around it like the normal Link button does, but automatically construct the URL to be used with an added prefix or suffix file name, such as sample.jpg -> sample_large.jpg (which would make it a link that you'd have already automatically generated an IMCE image for).

Hope this helps!

-- David
absolutecross.com

Also here's some code you could use to make another custom button, e.g. call the button "Lightbox" or "LB"... this just duplicates the functionality of the Link button, but adds the rel="lightbox" by default so you don't have to select it. Again, could be a cleaner way to do it (ideally hiding the lightbox form field which is unnecessary to show in this case) but so far I couldn't figure out how to do that successfully. At least it knocks off a few extra clicks, so that's a start.

php:
$imce_url = function_exists('imce_access') && imce_access() ? url('imce') : '';

return "js:
var B = eDefBrowseButton('$imce_url', 'attr_href', 'Browse', 'link');
var form = [
 {name: 'href', title: 'Link URL', suffix: B},
 {name: 'html', title: 'Link text'},
 {name: 'title', title: 'Link title'},
 {name: 'rel', title: 'Lightbox', type: 'text', value: 'lightbox'}
];
eDefTagDialog('a', form, 'Insert/edit link', 'OK');
";

-- David
absolutecross.com