This is a migrated thread and some comments may be shown as answers.

Image Editor type controls in Image Gallery

1 Answer 27 Views
ImageGallery
This is a migrated thread and some comments may be shown as answers.
Quinn
Top achievements
Rank 1
Quinn asked on 13 Aug 2019, 12:48 AM
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.

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 13 Aug 2019, 07:24 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ImageGallery
Asked by
Quinn
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or