How to create Thumbnail in Umbraco using WebImage? (with Razor)

Question

I'm using Umbraco 6.

I try to create 2 Thumbnails for each photo I upload with the Mediapicker. I mean - every photo that upload should have 140x100 version and 350 x 200 version.

I don't want to use the ImageGen.

So I found this article about the WebImage helper - with this code:

@{  
    WebImage photo = null;
    var newFileName = "";
    var imagePath = "";
    var imageThumbPath  = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
             newFileName = Guid.NewGuid().ToString() + "_" +
                 Path.GetFileName(photo.FileName);
             imagePath = @"images\" + newFileName;
             photo.Save(@"~\" + imagePath);

            imageThumbPath = @"images\thumbs\" + newFileName;
            photo.Resize(width: 60, height: 60, preserveAspectRatio: true,
               preventEnlarge: true);
            photo.Save(@"~\" + imageThumbPath);        
        }
    }
}

So actually I just created a new Razor Script (under the Developer section) - and it just doesn't work...

How do I do it? All I need to do is just to create a Thumbnail for each photo I upload with the media picker - then use them in my pages.

Thanks!

score 2 · Answer 1 · answered Apr 25 '13 at 08:33

2

Umbraco automatically creates a thumbnail (for display in the media area) for every image saved into media. To use it just add _thumb between the image name and its extension after you get the umbracofile of the media item.

This should get all the media library images and their thumbs (obviously folders etc need to be handled differently):

var rootMedia = new umbraco.cms.businesslogic.Media(-1);
var allMediaImages = rootMedia.GetChildMedia();

foreach(var mediaImage in allMediaImages)
{
  var fullPath = mediaImage.GetPropertyAsString("umbracoFile");
  var thumbPath = mediaImage.GetPropertyAsString("umbracoFile").Replace(".","_thumb.");
}

answered Apr 25 '13 at 08:33

amelvin

8,919
4
38
59

Thanks, But I want to control the Thumbnails sizes - 140x100, 350x200 and 250x180 - Is it possible? – Menahem Gil Apr 25 '13 at 19:25
@MenahemGil The simplest answer would be to use imagegen - but you could also use the webimage library like: http://stackoverflow.com/questions/4535193/webimage-crop-to-square – amelvin Apr 26 '13 at 07:42
2

You can define multiple thumbnails in Developer/Datatypes/Upload and they get created automatically – BoKDamgaard Jun 19 '13 at 09:10

How to create Thumbnail in Umbraco using WebImage? (with Razor)

1 Answers1