Profile Icon Cropping

I would like to be able to crop a profile icon dynamically, so you can select any portion of an image in rectangular form.


I edited the image select javascript in the profile mod, commenting out all the calls to aspectratioxy and aspectratioyx and that worked.  I can select rectangles of any size.  But now the preview is squished or stretched because it resizes to a specific size, and when I hit "save" it says there was an error uploading (or updating, I can't remember which right now) the avatar.  This is the extent of my programming knowledge,  just being able to hack apart some code.


Is there a plugin that already allows for this and I just don't know what to look for?


Or can someone tell me what else I have to edit in the jquery.imgareaselect-0.8.min.js file I found in the /mod/profile/views/default/js/ directory?


And while I'm at it, why is it the jquery.imgareaselect-0.8.min.js file being used, and not the jquery.imgareaselect-0.8.js ?


Thanks in advance!

  • I'm surprised this isn't an easy fix, or something that's been covered before...

  • min stands for minimized. It is a smaller file.

    To change profile icon handling, you'll need to do more than change the javascript. There is the PHP code that actually crops the image in the icon crop action.

  • Yeah, I realized that shortly after I posted it.  Thanks though!

    So, I found the javascript, and I can edit that, and I found the editicon.php in the profile mod.  Now, I'm not sure what to modify.  I'm fairly certain it's in this bit of code I'll paste below, but I'll be damned if I know what to do next.  Any help?


       //function to display a preview of the users cropped section
        function preview(img, selection) {
            // catch for the first click on the image
            if (selection.width == 0 || selection.height == 0) {
            var origWidth = $("#user_avatar").width(); //get the width of the users master photo
            var origHeight = $("#user_avatar").height(); //get the height of the users master photo
            var scaleX = 100 / selection.width;
            var scaleY = 100 / selection.height;
            $('#user_avatar_preview > img').css({
                width: Math.round(scaleX * origWidth) + 'px',
                height: Math.round(scaleY * origHeight) + 'px',
                marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
                marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
        //variables for the newly cropped avatar
        //var $x1, $y1, $x2, $y2, $w, $h;
            function selectChange(img, selection){
               //populate the form with the correct coordinates once a user has cropped their image
            $(document).ready(function () {
                //get the coordinates from the form
                var x_1 = $('#x_1').val();
                var x_2 = $('#x_2').val();
                var y_1 = $('#y_1').val();
                var y_2 = $('#y_2').val();
                var w = x_2 - x_1;
                var h = y_2 - y_1;
                selection = { x1: x_1, y1: y_1, x2: x_2, y2: y_2, width: w, height: h };
                $('<div id="user_avatar_preview"><img src="<?php echo $user_master_image; ?>" /></div>')
                $('<div id="user_avatar_preview_title"><label><?php echo elgg_echo('profile:preview'); ?></label></div>').insertBefore($('#user_avatar_preview'));
            $(window).load(function () {
                //this produces the coordinates
                $('#user_avatar').imgAreaSelect({ selectionOpacity: 0, onSelectEnd: selectChange });
                //show the preview
                $('#user_avatar').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });

  • Hi. Did you get this to work as I am trying to do the same thing. If so what did you do.

  • I am also interested .............please check below link for help and functioning and let me know if you get it working:--

  • Hello, I'm also trying to modify, in cropicon.php found to change the size of wavatar there you can change the icon size.

    Maybe this way you can help


    $topbar = get_resized_image_from_existing_file($filename,16,16, true, $x1, $y1, $x2, $y2, TRUE);

                    $tiny = get_resized_image_from_existing_file($filename,25,25, true, $x1, $y1, $x2, $y2, TRUE);

                    $small = get_resized_image_from_existing_file($filename,40,40, true, $x1, $y1, $x2, $y2, TRUE);

                    $medium = get_resized_image_from_existing_file($filename,100,100, true, $x1, $y1, $x2, $y2, TRUE);

                    $large = get_resized_image_from_existing_file($filename,210,210, true, $x1, $y1, $x2, $y2);


  • eu concegui mitifica todo tamnha dele so recorte em retangulo que nao se laguem tiver afim te partilha alguma informação?