Forum Discussion

sunny_mody's avatar
sunny_mody
Advisor
11 years ago

Avatar upload - crop image to a set size

Hi,   I want the user to upload an avatar of his choice but he should not be able to crop it, Like there will be a crop selector in dotted border which can be resized, can we disable its resizing....
  • KaelaC's avatar
    KaelaC
    9 years ago

    Hi sunny_mody - You can do this in a 2 step process. 

     

    First create a custom component that you will place on the upload avatar page

    <!-- -->
<@liaAddScript>
(function($) {
   $(document).one("LITHIUM:updateCoordinates",function() {
       var image = $(".lia-image-cropper-source-container > .lia-quilt-column-alley-left > img");
       var img = new Image();
            function addAspectRatio() {
                image.data("Jcrop").setOptions({aspectRatio: 1});
            }
            
            function addLater() {
                        if (!image.data("Jcrop")) {
                                window.setTimeout(addLater, 50);
                        } else {
                                addAspectRatio();
                        }
            }
            
            img.onload = addLater;
            img.src=image[0].src;
    });
})(LITHIUM.jQuery);
</@liaAddScript>

    Then, in the skin properties, set the avatar height and width to be the same:

    size.pixel.avatar_profile_h                                     = 125
size.pixel.avatar_profile_w                                     = 125

size.pixel.avatar_message_h                                     = 50
size.pixel.avatar_message_w                                     = 50

    You are now good to go!

aaronknol's avatar
aaronknol
Contributor

Hi peterlu I tried setting a fixed height and width on the crop tool using !important in the CSS. This prevented the user being able to resize the cropping tool, thank you! However, the preview of the avatar on the right hand side is no longer accurate. Do you have any suggestions on how to fix that?

peterlu's avatar
peterlu
Champion
9 years ago

aaronknol, here may be another way to do it.

1. Set the skin property to use the correct width and height on avatar sizes in STUDIO. This way the crop tool can have the correct ratio by default.

2. use CSS to hide the resize handler of the crop tool, so users can only pan around

  • aaronknol's avatar
    aaronknol
    Contributor
    9 years ago

    Thanks peterlu! I'll give it a try