Image Editor type controls in Image Gallery

[Quinn]

I've seen the controls that are available in the Image editor and would really like to see them implemented in the image gallery. Being able to allow the client to specify image zoom, or other effects has a great value. I was curious if there was any simple solution currently to show a client a list of image thumbnails, and to open a single one in an editor.

[Rumen]

Hi Quinn,

You can access the URL of the currently selected image in the ImageGallery in a similar way:

$find("ImageGallery1").get_selectedItem().get_imageUrl();

Once you got the img URL, you can set it to the ImageEditor through its ImageUrl property.

If you decide to do it on ajax request the implementation could be similar to the following one:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadImageEditor1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadImageGallery ID="ImageGallery1" runat="server">
    <Items>
        <telerik:ImageGalleryItem ImageUrl="~/Images/image1.jpg" />
        <telerik:ImageGalleryItem ImageUrl="~/Images/image2.jpg" />
        <telerik:ImageGalleryItem ImageUrl="~/Images/image3.jpg" />
    </Items>
</telerik:RadImageGallery>
<asp:Button ID="Button1" runat="server" Text="Edit Image" OnClientClick="EditImage(); return false;"/>
<telerik:RadImageEditor ID="RadImageEditor1" runat="server"></telerik:RadImageEditor>
<script>
    function EditImage() {
        var imageGallery = $find("ImageGallery1");
        var imageUrl = $find("ImageGallery1").get_selectedItem().get_imageUrl();
        $find("RadAjaxManager1").ajaxRequest(imageUrl);
    }
</script>

C#

protected void RadAjaxManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

    RadImageEditor1.ImageUrl = "~/" + e.Argument;

    RadImageEditor1.GetEditableImage().Resize(100, 200); //resize the image

  

    string fullPath = Server.MapPath("~/Images/SavedImages");

    string fileName = string.Format("relax-{0}.jpg", DateTime.Now.ToString("yyyyMMdd-hhmmss"));

    fullPath = Path.Combine(fullPath, fileName);

  

    RadImageEditor1.GetEditableImage().Image.Save(fullPath); //save the image to a custom location

}

 

In case you want to use the RadImageEditor only to resize and save the image and do not want to give the user the opportunity to edit it by him/herself, you can directly use the ImageEditor's EditableImage class. For example:



protected void RadAjaxManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

    string imageUrl = Server.MapPath ("~/" + e.Argument);

    EditableImage image = new EditableImage(imageUrl);

  

    image.Resize(100, 200); //resize the image

  

    string fullPath = Server.MapPath("~/Images/SavedImages");

    string fileName = string.Format("relax-{0}.jpg", DateTime.Now.ToString("yyyyMMdd-hhmmss"));

    fullPath = Path.Combine(fullPath, fileName);

  

    image.Image.Save(fullPath); //save the image to a custom location

}

I hope that you'll find the sample useful!

Regards,
Rumen
Progress Telerik