Thumbnails of images in TinyMCE

[Nico Knoll]

Hi,

it would be great if there would be only thumbnails in the TinyMCE image window, so that they load faster and you can have like 4 images in a row.

I guess there are thumbnails automatically after upload, aren't it?

Greets,

Nico

[apeisa]

+1 and upcoming image grid would be nice there too.

[achabany]

+1

[nikola]

+1

Nice suggestion Nico. It would be quite useful when having lots of images on one page for instance...

[ryan]

I can see using a browser resize where a max width or height is specified, but am not so sure if it's good to have ProcessWire going and creating multiple new thumbnail files just so they can be selected in the admin. Perhaps a good balance would be to display the ones with thumbnails where the 'admin thumbnails' option is selected with the image field, and just use the same thumbnail.

[Pete]

I think that'd be the way to do it Ryan - it covers every website I've done so far as they all have admin thumbnails turned on.

Obviously other people's scenarios will vary but that would cater for the majority I think.

[ryan]

Okay I will plan to make this update.

[achabany]

Here is my hack to do such thing easily :

I edited the ProcessPageEditImageSelect.module to add two protected vars : $thumbWidth and $thumbHeight and i change the ___execute() function like so :

      	 foreach($images as $image) {
               //$width = $image->width();
               $thumb = $image->size($this->thumbWidth, $this->thumbHeight);

               if($width > $this->maxImageWidth) $width = $this->maxImageWidth;
               $out .= "\n\t<li><a href='./edit?file={$image->basename}&modal=1&id={$this->page->id}&winwidth=$winwidth'>" .
                   "<img src='{$thumb->url}' width='{$this->thumbWidth}' alt=\"{$image->description}\" /></a></li>";
           }

i used the size() function to change the image width and height, to create a thumbnail and instead of using $image->url i use $thumb-url

Just after that, i change my css to make <li> element float in order to get a grid of elements :

#select_images li {

float: left;
margin: 0 5px 5px 0;
}

see the attached image for an example of use.

There is just a one problem, if the picture is smaller than the thumbnail width and height, the size function will make a pixelazed version wich isn't good, in such case, the function have to add a blank space to make a correct thumb.

[ryan]

Nice work Achabany, this looks great. I will aim to get a similar look with the module.