Image Cropper Auto Create

Auto generate cropped images after image upload

It probably happend you often that you need to add image cropper to a page or custom media type.

Right after you upload image cropper property does not generate cropped image file. You would have to save the page/media once againg, so that image cropper is initialized and cropped files are generated.

This is not so anoying when you create docuemnts in your content one by one, but image what will happed if you use multiple upload for uploading, let's say 20 files and generated images are custom media types which have cropper as a property.

Note

You can find a solution for multiple custom media upload in Umbraco Cms posts for April 2014

There is a package for this called Create Crops and you can find it at http://our.umbraco.org/projects/backoffice-extensions/create-crops

This is pretty useful, but I was thinking to make it more automated. I used reflector to pull out the logic for instantiating and invoking cropper from the above mentioned package. Then I invoked this code from Umbraco event handler and voila, worked like a charm.

The following is code of class which invokes cropper. I called it ImageCropperHelper.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using umbraco.DataLayer;
using umbraco.BusinessLogic;
using umbraco.interfaces;
using umbraco.cms.businesslogic.datatype.controls;
using umbraco.editorControls.imagecropper;
using System.Web.UI;
namespace Umbraco.Cms.Custom
{
public class ImageCropperHelper
{
protected static ISqlHelper SqlHelper
{
get
{
return Application.SqlHelper;
}
}
public static bool CallImagecropper(int mediaId)
{
bool flag = false;
IDataType newObject = new Factory().GetNewObject(new Guid("7A2D436C-34C2-410F-898F-4A23B3D79F54"));
string str = string.Format("
select cpd.id as id, cpt.dataTypeId as datatypeid from cmsPropertyData cpd
inner join cmsPropertyType cpt on cpd.propertytypeid = cpt.Id
inner join cmsDataType cdt on cpt.dataTypeId = cdt.nodeId
where cpd.contentNodeId = {0}
and cdt.controlId = '{1}'", mediaId, newObject.Id);
            using (IRecordsReader reader = SqlHelper.ExecuteReader(str, new IParameter[0]))
            {
                if (!reader.HasRecords)
                {
                    return flag;
                }
                flag = true;
                while (reader.Read())
                {
                    newObject.Data.PropertyId = reader.GetInt("id");
                    newObject.DataTypeDefinitionId = reader.GetInt("datatypeid");
                    CC_ImageCropper cropper = new CC_ImageCropper(newObject.Data, ((PrevalueEditor)newObject.PrevalueEditor).Configuration);
                    cropper.Page = new Page();
                    cropper.CallInit();
                    cropper.Save();
                }
            }
            return flag;
        }

    }

    public class CC_ImageCropper : DataEditor
    {
        public CC_ImageCropper(IData Data, string Configuration)
            : base(Data, Configuration)
        {
        }
        public void CallInit()
        {
            base.OnInit(new EventArgs());
        }
    }

}

    

As I mentioned before, my idea was to invoke this piece of code automatically, so I created Application handler.

Note

Details how to attach to Umbraco events you can find in Umbraco Cms posts

So here is a snippet of this Umbraco ApplicationHandler.

    public class UmbracoAppHandler : ApplicationEventHandler
    {
        public UmbracoAppHandler()
        {
            MediaService.Saved += MediaService_Saved;
            ContentService.Saved += ContentService_Saved;
        }

        void ContentService_Saved(IContentService sender, Core.Events.SaveEventArgs<IContent> e)
        {
            foreach (IContent page in e.SavedEntities)
            {
                ImageCropperHelper.CallImagecropper(page.Id);
            }
        }

        void MediaService_Saved(IMediaService sender, Core.Events.SaveEventArgs<IMedia> e)
        {
            foreach (IMedia media in e.SavedEntities)
            {
                ImageCropperHelper.CallImagecropper(media.Id);
            }
        }
    }
    

References

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.


About the author

DEJAN STOJANOVIC

Dejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN  Loginlinkedin Logintwitter Logingoogleplus Logingoogleplus

.NET

read more

JavaScript

read more

SQL/T-SQL

read more

PowerShell

read more

Comments for this article