Image thumbnails

Topics: General
Jun 24, 2012 at 11:39 AM

Hello. I'm new to Orchard and have a simple question.

I need image thumbnails to be created automatically when I upload images with TinyMCE for my posts/pages. Same way ImageGallery module does it. How can I do that?

Jun 26, 2012 at 1:19 AM

I don't think the Media module (which TinyMCE uses via the MediaPicker module) exposes an event when media is uploaded, so that's going to be a problem (unles you modify that code to expose an event via the event bus mechanism: then you could write a handler that generates the thumbnail for you).

Or, you could do it the other way around: instead of generating a thumbnail during upload, you generate a thumbnail during the initial request of the image. For that you could use the and its disk cache module (it's not an Orchard module, but a .net library containing http modules and handlers).

Once installed and configured correctly, all you would need to do is append some querystring parameters to your image url. For exampe, suppose you wanted to display a 100x75 thumbnail of an image of some arbitrary size, the "src" attibute could have this value: "/media/default/images/mypicture.jpg?width=100&height=75&mode=crop".

What will happen is that will generate a thumbnail (and if you enabled the disk cache, store it on disk for the next requests) and serve that one instead of the original image.

Jun 26, 2012 at 4:31 PM

This is what the ImageCache module does in Drupal. They also have the notion of profile made of actions (crop, resize, scale, ...). This could be part of next effort on Media management. Though it could be implemented right now like this.

Also, the Image Field (on the gallery) let's you upload an image, and will resize it automatically based on the settings. But the technique explained previously would be far better.

Jun 26, 2012 at 5:32 PM

Nice, I didn't know that about ImageField.
That would be supercool, having something like Drupal's ImageCache as part of the next Media management solution in Orchard.