Image resizing using the ImageResizer.net library

Topics: Announcements, Customizing Orchard, General, Installing Orchard, Writing modules
Oct 12, 2012 at 6:07 PM

Should be available soon in the gallery, but for those keen on a sneak peak, here's the git repo for the module Contrib.Thumbnails I've added https://github.com/pnmcosta/orchardcontribthumbnails/ a nupkg is also available in the Downloads section.

Main features:

  • Simple and easy to use extension method
  • Compatible with Azure Storage or local file system
  • Uses the media folder to store cache of images (assets/cache)

Usage 1 (extension):

  • Reference Contrib.Thumbnails on your theme
  • Add @using Contrib.Thumbnails.Extensions; to your overriding view
  • Use extension method, @Html.Thumbnail("{mediaimageurl}", "Alternate Text", 100, 100, null)

Usage 2 (URL):

  • Use url /Thumbnails?mediaPath={mediapathfordirectory}&name={filename}&width=100&height=100

Futures:

  • Implement different resizing methods from the ImageResizer.net library.
  • Thumbnail management via the dashboard, refresh, erase, etc.
  • Detect file changes and invalid cache.

Looking forward to any feedback the community might have.

Coordinator
Oct 12, 2012 at 6:38 PM

Sad you could not have been to Orchard Harvest. We demonstrated a module to handle thumbnails and more.

You could maybe join the effort.

Coordinator
Oct 12, 2012 at 6:53 PM

Nice, but I would recommend not accepting image sizes as querystring parameters. That opens the site to easy cache flooding attacks.

Oct 12, 2012 at 8:12 PM

@sebastien Me too, but if it's not to late I'd be happy to join the effort :)

@bertrand I totally agree, but I needed a "quick fix" for the thumbnail issue! Resize templates could be a way forward.

Oct 15, 2012 at 8:55 PM
sebastienros wrote:

Sad you could not have been to Orchard Harvest. We demonstrated a module to handle thumbnails and more.

You could maybe join the effort.

Do you mean Media Garden, or there is another one?

Coordinator
Oct 15, 2012 at 9:08 PM

No, Sébastien demonstrated a new one that should be in 1.7.

Oct 16, 2012 at 10:11 AM
Edited Oct 16, 2012 at 10:12 AM

Could I have a preview of this module you guys talk about? IMO is one of the few crucial bits that Orchard was missing, the ability to resize/crop images.

I'm about to modify the Thumbnails module to cater for resize templates (e.g. only 500x500 and 100x100 allowed) but I would like to, if possible, to keep any modifications in line with this new module for a smooth future migration to 1.7.

Thanks,

P.

Oct 16, 2012 at 10:17 AM

I'm +1 with it.

Would the upgrade go smooth if I'll start using the Contrib.Thumbnails?

Coordinator
Oct 16, 2012 at 4:44 PM

It will be available from the source tree soon after 1.6 is released.

Upgrade could be smooth if @pnmcosta provides an upgrade path I suppose. Those things are never super-easy.

Oct 16, 2012 at 4:57 PM
Edited Oct 16, 2012 at 4:57 PM

:( could I have a sneak peak at the module? I would be happy to ensure upgrading is a smooth as, but without knowing any details on the new module it would be hard to even begin to consider it!

also, from now on I'll be contributing every Friday to the project with modules and bug fixes, but I like to plan these things ahead, if there's any bug on the active list that you might think I can work on and would speed up 1.6 release, could you assign it to me? Or should I just go the list and assign myself one?

Coordinator
Oct 16, 2012 at 5:15 PM

Ask Sébastien, he may be able to give you an early look. I don't have that code myself, I've only seen it run.

Coordinator
Oct 16, 2012 at 5:40 PM

Code is here.

https://hg.codeplex.com/forks/jrmurdoch/imageprocessing

Very easy to use, almost exactly like the Projection module (not by accident).

When you have created a profile, you can use it on any media using this shape:

<img src="@Display.ImageUrl(Profile: "Thumbnail", Path: Model.ContentField.Url)" />

You can thank John Murdoch for the implementation.

Oct 17, 2012 at 11:16 AM

That's pretty cool, quick question any reason that couldn't be a module now? Does it have dependencies on forthcoming changes?

I wouldn't mind deprecating Contrib.Thumbnails and work on a new module based on John's code, of course I would ask his permission to do so first.

Otherwise, and I would ask his permission for it also, I could incorporate the Profile management into Contrib.Thumbnails.

I'm at your disposition guys, whatever is best for everyone I'd be happy to contribute with, but please let me know before Friday, that's when I'll be working on it.

Cheers,

P.

Coordinator
Oct 17, 2012 at 5:50 PM

Awesome. Work on 1.7 will start soon. Stay tuned.

Coordinator
Oct 17, 2012 at 5:51 PM

It's a module right now. He just developed it using a fork. It should get it's own repo someday if it's not part of the core modules. TBD.

Be careful before adding new features. Let's talk about a features list first and priorities, as a team, if you can. I can create a trello board with a backlog of features to share with you.

Oct 17, 2012 at 6:59 PM

if it would to count, my vote is that this feature should be part of the core :)

awesome yes, please create the trello board, whatever path you guys recommend for this, I'd be happy to help

Nov 1, 2012 at 11:28 PM

I've made some Effects for MeidaProcessing using AForge (http://svn.usanov.net/orchard-modules-public/trunk/Modules/Orchard.MediaProcessing.Effects/),

it seems that MediaProcessing module needs some more work to become a core module, here is the list of bugs/missing features:

* Form validation is missing in filters. User have no idea why the image is not rendered in case of an exception.

* Prevew - is just a stub atm. I've made a simple implementation which takes a hard coded image from module Content folder. Maybe a good idea to set this image (or several images, to test output with different palettes) from the settings.

* Up/Down stopped working after a while when I've been testing profile (not sure how to repro it, just sorted/added/removed filters). Had to re-create whole profile to make it work again.

* Bitmap usually leaks. I'm not sure about current implementation, didn't have a profiler with me.

Coordinator
Nov 2, 2012 at 1:22 AM

Looks nice, thanks for the feedback on the module too. It hasn't been tested yet so it's very useful.

 

Coordinator
Nov 3, 2012 at 7:01 AM

On the leaky bitmaps, that's something that ImageResizer.net handles really well. I wouldn't worry about it, but hey, better safe than sorry, if you want to profile it, that's great.

Nov 5, 2012 at 11:26 AM

Just checked profiled the memory. Good news, looks like no leak in there.

Nov 5, 2012 at 11:37 AM

One more thing. Currently all the profiles are being created directly under media root folder. I would rather put them into some sub folder like "Profiles".

Nov 5, 2012 at 2:01 PM

I'm trying to make a Watermark effect for MediaProcessing, but there is no support for media picker in forms API (simply, there is no such shape). It there are workaround for it? The idea is to have an image and profile to get the watermark as the source.

Nov 13, 2012 at 4:24 PM

So, Nobody required the MediaPicker for Form API?

Coordinator
Nov 17, 2012 at 3:21 AM

Not so far, no. Build it?

Nov 20, 2012 at 8:51 AM

Ok, I did a kind of solution for that here: http://svn.usanov.net/orchard-modules-public/trunk/Modules/Orchard.Contrib.Forms/

But is seems not that easy to implement. I'm only storing the source (alternate text and size are not taken into account).

Currently it depends on the Orchard.MediaPicker, should be a part of it? As for ContentPicker I'm not sure how to implement it at all, as it should store an ID and TypeName, maybe hidden field can be used for that.

I've also had to add the routes to MediaProcessing: http://svn.usanov.net/orchard-modules-public/trunk/Modules/Orchard.MediaProcessing/, as MediaPicker JS does the location check: :\Orchard\src\Orchard.Web\Modules\Orchard.MediaPicker\Scripts\MediaPicker.js line:17. Shouldn't the controller check for permission instead?