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.

 

Let user just move the square dotted area which we can set it from community style.

 

Can we disable the resize functionality while cropping avatar image?

 

Thanks,

Sunny

  • KaelaC's avatar
    KaelaC
    10 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!

5 Replies

Sort By
  • peterlu's avatar
    peterlu
    Champion
    10 years ago

    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
    10 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
    10 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

  • KaelaC's avatar
    KaelaC
    Lithium Alumni (Retired)
    10 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!