this is a great module ufku
thanks for the efforts,

I have in mind an enhancment that would be very usefull to the users ( I believe )

how about having an easy way to integrate with http://drupal.org/project/thickbox

this is how a user would see it:

-browse and download a file and thumbnail is created automatically (I believe this part is already there through the config)
-then checking a checkbox that says something like "display original using thickbox" you click on the image
-on the textarea you get something like this

<a href="/files/images/image1.jpg" class="thickbox">
<img src="/files/images/image1_0.jpg"/>
</a>

which in effect will let you click on the thumbnail and get the original image displayed with thickbox
(if thickbox is not pressent the picture just opens up in the parent window - pressing the back button takes you back to your page)

I hope you find it usefull

CommentFileSizeAuthor
#10 thickbox_class.gif7.56 KBVlad M

Comments

ufku’s picture

This kind of custom code creation is possible using IMCE JS API. Currently "image insertion into plain-textareas" feature makes use of it.
Your thickbox example can be achieved by making a few changes in imce_set_inline.js.
I don't want to provide a default support for a specific html code since it is unwise to support every module that has it's own code snippet. That's why there is the ability to use IMCE in a custom way.
What i can do is to provide javascript help for those who want to use this ability.

newdru’s picture

hey ufku,

i'd be interested if you could post the code to implement this and where to put it.

I'd basically like to add a button that:

1) inserts an image (large version) as the href to an anchor tag (normally imce button just inserts img to an img tag)

2) automatically creates a class 'thickbox' on the a tag

3) allows one to type in a title tag (i believe that already exists in the standard imce img tag)

4) does either of the following depending on how hard it is to implement:

a) duplicates the large img text to be the the img tag of the a tag defined in step #1 (in this case i will go in and manually edit to be the thumbnail path that when clicked pops up the thickbox larger img)

b) makes the thumbnail path some variation of the original larger path (e.g img_0_lrg becomes img_0_thumb etc)

c) *** preferably allows me to select and specify the thumbnail img from the dialog box (just like i did the large img)

Basically this would produce the code snippet giorgosK asked for. 4c is the best method but i'm not sure how easy or hard it is to make two separate browse + select and insert imgs on the popup form.

Any code snippet or assistance would be appreciated
thanks

newdru’s picture

Also, is there a default naming convention imce uses when you resize or create a thumnail of a given img? I imagine it uses the original name and then appends suffixes as necessary...

what if any are the the default naming rules?

thanks

ufku’s picture

hi,
you my have a look at imce_set_inline.js to see how the link html is created using IMCE API.
filenames are created by drupal's file_create_filename function. it simply adds numeric values to the end if there is a duplicate.

drupalzack’s picture

Version: 5.x-1.x-dev » 4.7.x-1.x-dev

Hello!
I tried the suggestion to use imce_set_inline.js to add the thickbox class to the images inserted with imce, but I don't see the class getting inserted. I tried clearing the cache, it behaves as before. no class. Here's the change I made

//custom callback. hook:ImceFinish
function _imce_ImceFinish(path, w, h, s, imceWin) {
  var basename = path.substr(path.lastIndexOf('/')+1);
  imceActiveType = imceActiveType ? imceActiveType : (w&&h ? 'image' : 'link');
  var html = imceActiveType=='image' ? ('<img src="'+ path +'" width="'+ w +'" height="'+ h +'" class="'thickbox'" alt="'+ basename +'" />') : ('<a href="'+ path +'">'+ basename +' ('+ s +')</a>');
  imceInsertAtCursor(imceActiveTextarea, html, imceActiveType);
  imceWin.close();
  imceActiveType = null;
}

I added class=thickbox to this function. What am I missing?

Thanks!

mao’s picture

Hello, this is how I solved this problem... Its a just a little adjustment to the IMCE javascript and .module file. Which are both very well written IMO, thx for this great module!
imce.module
I added another link so the line looks like this [line 770]:
$element['#description'] .= '<div style="display:none">'. t('Insert !image or !link or !popup.', array('!image' => l(t('image'), 'imce/browse', array('name' => $element['#id'].'-IMCE-image', 'class' => 'imce-insert-inline')), '!link' => l(t('link'), 'imce/browse', array('name' => $element['#id'].'-IMCE-link', 'class' => 'imce-insert-inline')), '!popup' => l(t('popup'), 'imce/browse', array('name' => $element['#id'].'-IMCE-popup', 'class' => 'imce-insert-inline')))) .'</div>';
No other changes in imce.module...

imce_set_inline.js
We need IMCE to recognize our new defined type "popup" [line 22]
var type = imceActiveType=='popup' ? 'popup' : imceActiveType=='link' ? 'link' : (w&&h ? 'image' : 'link');
And create a proper HTML output depending on type [line 23]
var html = type=='image' ? ('<img src="'+ path +'" width="'+ w +'" height="'+ h +'" alt="'+ basename +'" />') : type=='popup' ? ('<a href="'+ path +'" class="thickbox">'+ basename +' ('+ s +')</a>') : ('<a href="'+ path +'">'+ basename +' ('+ s +')</a>'); This does almost the same as 'link' type - it just adds "class=thickbox".
And final workaround for proper output insertion [line 33]:
if ((type == 'link' || type='popup') && (field.selectionEnd-field.selectionStart)) {
and finally [line 39]:
if ((type == 'link' || type='popup') && document.selection.createRange().text.length) {

That should do the thing. It works for plain textarea insertion only. I hope ufku isnt upset with my alternation of his precious code :)

ufku’s picture

it's all right mao ;)
drupalzack, you should have written class="thickbox" (without single quotes).

markux’s picture

Sorry, but it doesn't work for me.

I tried dupalzack solution (with ufku correction) and mao solution, but never print link How value imceActiveType is popup?

The problem the automatic links on thumbnails to original images is much request from italian drupal user.

thanks

I use drupal 5.1 , thickbox, tinymce e imce last version dor 5.x

markux’s picture

hello,

I have not understood as it works: the type popup when it comes passed?
I have analyzed to all the options but popup from which it comes passed?

I have tried also the solution drupalzack, but he never does not come to me printed the class="tichkbox".

I use drupal5.1, and the last versions of thickbox and imce and tinymce

thanks

Vlad M’s picture

Title: IMCE: Allow easy integration with thickbox » BUEditor + IMCE + ThickBox
StatusFileSize
new7.56 KB

Hi, everybody!
I use BUEditor + IMCE and think it’s the best and the simplest solution for articles with images. To integrate it with ThickBox you don’t need to use thickbox module. Just follow instructions “How to Implement ThickBox” here http://jquery.com/demo/thickbox/ and add
{name: 'class', title: 'Class', type: 'select', options: {'': '', thickbox: 'thickbox'}}
in link button in BUEditor. Now link button dialog looks like in attachment.
Example http://interaction.net.ua/conference_lviv_en (image is clickable).
It may be a rude solution, but I’m not a programmer. If anybody could develop BUEditor + IMCE + ThickBox integration it would be great.

brashquido’s picture

Exactly what I've been looking for. Now to see if I can get it working...

ufku’s picture

Status: Active » Closed (won't fix)