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!

peterlu's avatar
peterlu
Champion

I think the goal is to limit user to upload their avatars in square for example, by setting the cropping tool to a fixed size.

Then you can do more fancy stuff, like css the square avatar to circle avatar.

 

sunny_mody have you tried to use css !important to set the fixed width and height for the cropping tool?

aaronknol's avatar
aaronknol
Contributor
9 years ago

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