Imagecache module button provides a user interface for adding images provided by imagecache presets.

It allows users select one of the imagecache presets that will handle the selected image. If IMCE is installed, the image URL can be retrieved from IMCE interface, otherwise the user specifies it manually.

A demo is available for testing.

Note that, preview of images won't work since imagecache is not installed in this site. The two preset options (set1 and set2) do not exist.

Button code (6.x-2.x or above)

php:
if (!
function_exists('imagecache_presets')) return;
$filepath = url(file_directory_path());
$presets = array('' => '');
foreach (
imagecache_presets() as $preset) {
 
$presets[$preset['presetname']]= $preset['presetname'];
}
$presets = drupal_to_js($presets);

return
"js:
var form = [
  {name: 'src', title: 'Image URL', suffix: E.imce.button('attr_src'), required: 1},
  {name: 'preset', title: 'Image style', type: 'select', options:
$presets},
  {name: 'alt', title: 'Alternative text', required: 1}
];
//open dialog
E.tagDialog('img', form, {title: 'ImageCache Image', submit: function(tag, form) {
  var ps = form.elements.attr_preset;
  var url = form.elements.attr_src;
  var fp = '
$filepath';
  if (ps.value) {
    if (url.value.indexOf(fp) == 0) {
      url.value = fp +'/imagecache/'+ ps.value + url.value.substr(fp.length);
    }
    ps.value = '';
  }
  E.tgdSubmit(tag, form);
}});
//update fields
var el = $('form', E.dialog)[0].elements;
var url = el.attr_src.value;
var i = url.indexOf('/imagecache/');
if (i > -1) {
  url = url.substr(i+12);
  i = url.indexOf('/');
  el.attr_src.value = '
$filepath'+ url.substr(i);
  el.attr_preset.value = url.substr(0, i);
}
"
;

Button code (7.x)

php:
if (!
function_exists('image_styles')) return;
$filepath = url(file_stream_wrapper_get_instance_by_scheme('public')->getDirectoryPath());
$presets = array('' => '');
foreach (
image_styles() as $name => $style) {
 
$presets[$name]= $name;
}
$presets = drupal_json_encode($presets);

return
"js:
var form = [
  {name: 'src', title: 'Image URL', suffix: E.imce.button('attr_src'), required: 1},
  {name: 'preset', title: 'Image style', type: 'select', options:
$presets},
  {name: 'alt', title: 'Alternative text', required: 1}
];
var fp = '
$filepath';
//open dialog
E.tagDialog('img', form, {title: 'Image Style', submit: function(tag, form) {
  var ps = form.elements.attr_preset;
  var url = form.elements.attr_src;
  if (ps.value) {
    if (url.value.indexOf(fp) == 0) {
      url.value = fp +'/styles/'+ ps.value + '/public' + url.value.substr(fp.length);
    }
    ps.value = '';
  }
  E.tgdSubmit(tag, form);
}});
//update fields
var el = $('form', E.dialog)[0].elements;
var url = el.attr_src.value;
var rx = /\/styles\/([^\/]+)\/public\/(.+)$/;
var M = url.match(rx);
if (M) {
  el.attr_src.value = fp + '/' + M[2];
  el.attr_preset.value = M[1];
}
"
;

Thanks for this. I added a

Thanks for this.

I added a small bit of code to load and fill up the preset options directly from ImageCache so the list won't need to be maintained manually. Hope this helps someone:

php:
$imce_url = url('imce');
$filepath = url(file_directory_path());
$for_removal = base_path() . file_directory_path();
foreach (
imagecache_presets() as $preset) {
$presets .= "'" . $preset['presetname'] . "'" . ': ' "'" $preset['presetname'] . "'" . ', ';
}

return
"js:
var B = eDefBrowseButton('
$imce_url', 'attr_src', 'Browse', 'image');
var form = [
{name: 'src', title: 'Image URL', suffix: B},
{name: 'preset', type: 'select', options: {'': '',
$presets }},
{name: 'alt', title: 'Alternate Text'}
];
eDefTagDialog('img', form, 'Image Cache', 'OK', 'imageCacheProcess');

imageCacheProcess = function (tag, form) {
  var ps = form.elements['attr_preset'];
  var url = form.elements['attr_src'];
  if (ps.value) {
    url.value = url.value.replace('
$for_removal', '');
    url.value = '
$filepath/imagecache/'+ ps.value + url.value;  
    ps.value = '';
  }
  eDefTagInsert(tag, form);
}

var el = document.forms['eDefForm'].elements, url = el['attr_src'].value, i = url.indexOf('/imagecache/');
if (i != -1) {
  url = url.substr(i+12);
  i = url.indexOf('/');
  el['attr_src'].value = url.substr(i);
  el['attr_preset'].value = url.substr(0, i);
}
"
;

where is supposed to be

where is supposed to be placed this code?

Create this as a new button

Create this as a new button in the BUEditor settings. However, with BUEditor 2.1, you need to change some of the code in the previous comment.

Change this code:
var el = document.forms['eDefForm'].elements

to this:
var el = $('form', E.dialog)[0].elements

Otherwise you get an "undefined" error.

Another bug occurs if you insert an image and then immediately click the ImageCache button. The width and height options remain in place, giving a distorted image. So either save your node before using the imagecache button, or delete the width and height options. Ideally an automatic solution would be better.

Fantastic button code, by the way. Thanks.

Since D7 uses the image style

Since D7 uses the image style module from core, is it possible to create another button to provide the same functionality? any tips?

Button code for Drupal 7 has

Button code for Drupal 7 has been added.

Получил ошибку! Пришлось

Получил ошибку! Пришлось переустанавливать редактор... может что то не то делаю...

Can you please tell how (and

Can you please tell how (and whether) to get a link to original image (to later open it using fancybox, lightbox, highslide, etc.) that was inserted as a result and a link to the original image and the image itself:

<a href="original image (imce)">
  <
img src="small image (imagecache)" />
</
a>

Thank you!

Add var lnk = url.value;

Add
var lnk url.value; after var url form.elements.attr_src;
and
E.replaceSelection('<a href="'lnk +'">'E.getSelection() +'</a>'); after E.tgdSubmit(tagform);

Thank you very much. But

Thank you very much. But after inserting a code, the button disappears: preventing quotes in this line:
E.replaceSelection('<a href="'lnk +'">'E.getSelection() +'</a>');
Rewritten as:
E.replaceSelection('<a href='lnk +'>'E.getSelection() +'</a>');
Or
E.replaceSelection('<a href=&quote;'lnk +'&quote; class=&quote;fancybox&quote; rel=&quote;fancybox&quote;>'E.getSelection() +'</a>');

Line

Line E.replaceSelection('<a href="'lnk +'">'E.getSelection() +'</a>');
to replace that line and you can add class and rel
E.replaceSelection('<a href=\"'lnk +'\" class=\"fancybox\" rel=\"fancybox\">'E.getSelection() +'</a>');

Hello! What BUeditor

Hello!

What BUeditor integrate (add mutton-option) to Media module?
Paste Media\image\field to text, NOT image file$ Use gallery (or listing) thumbail imagefield (mediafield), NOT use file brouser.

Great TNX for your editor, from Russia ;)

It doesn't seem to work

It doesn't seem to work without IMCE. If I select file manually (ie paste the URL into the text input box) it appears as is with no imagecache presets added -(

Imagecache presets work for

Imagecache presets work for files that are located under file directory tree which is /files in this site.

How insert code for Drupal 7?

How insert code for Drupal 7? I receive this message: The editor code did not produce proper editor data.
I insert code to field Editor code (From Import Button).
Please help!

You should put the code in

You should put the code in content field while adding a new button at the bottom of your button list.

thankyou very much

thankyou
very much

This button no longer works

This button no longer works as intended in D7.20+:

The security fixes in this release change all image derivative URLs generated by Drupal to append a token as a query string.

D7.20 Release Notes

Since this button code does not generate a token when the image is inserted, requests to the URL will result in a 404.

Under supervision of Drupal :)