Image Editor type controls in Image Gallery

2 posts, 0 answers
  1. Quinn
    Quinn avatar
    2 posts
    Member since:
    Aug 2019

    Posted 12 Aug Link to this post

    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.
  2. Rumen
    Admin
    Rumen avatar
    14103 posts

    Posted 13 Aug Link to this post

    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.
Back to Top