Crop Avatar Elgg 6.2

Hello. I would like to ask for help with Elgg 6.2.
 
The avatars that the site provides for groups and profiles are square. And when I upload them, I am forced to crop the image to this format.
 
Could someone help me with a plugin so that the profile and group avatars are cropped to 196x350?
 
I am new to elgg and I still don't know how to use it very well.
 
How it is:
 
I wish I could put it without cropping or 196x350
 
Thank you.
  • 1 - Download this plugin

    2 - UnZip and upload folder my_plugin to /mod

    3 - Don't activate this plugin yet.

    4 - Copy file from

    \vendor\elgg\elgg\views\default\entity\edit\icon.php

    to 

    \mod\my_plugin\views\default\entity\edit\icon.php

    (Create non-existent folders)

    5 - Open icon.php and change code on:

    <?php
    
    
    $entity = elgg_extract('entity', $vars);
    
    if ($entity instanceof ElggEntity) {
       $vars['entity_type'] = elgg_extract('entity_type', $vars, $entity->getType());
       $vars['entity_subtype'] = elgg_extract('entity_subtype', $vars, $entity->getSubtype());
    }
    
    
    // custom code
    if ($entity instanceof \ElggUser || $entity instanceof \ElggGroup) {
       $vars['cropper_aspect_ratio_size'] = false;
    }
    
    $content = elgg_view('entity/edit/icon/file', $vars);
    $content .= elgg_view('entity/edit/icon/crop', $vars);
    $content .= elgg_view('entity/edit/icon/thumb', $vars);
    $content .= elgg_view('entity/edit/icon/remove', $vars);
    
    echo elgg_format_element('div', ['class' => 'elgg-entity-edit-icon-wrapper'], $content);
     
    6 - Save and activate My plugin via administration.
     
    Now you can freely crop avatars as you wish ;)
  • Thank you very much for your help, really.

    I can now crop it as I want, but when it is displayed on the profile, it is still square and not the cropped image in a rectangle.Could you tell me why?

  • By default, Elgg config has these sizes for avatars:

    'icon_sizes' => [
       'topbar' => ['w' => 16, 'h' => 16, 'square' => true, 'upscale' => true],
       'tiny' => ['w' => 25, 'h' => 25, 'square' => true, 'upscale' => true],
       'small' => ['w' => 40, 'h' => 40, 'square' => true, 'upscale' => true],
       'medium' => ['w' => 100, 'h' => 100, 'square' => true, 'upscale' => true],
       'large' => ['w' => 200, 'h' => 200, 'square' => true, 'upscale' => true],
       'master' => ['w' => 10240, 'h' => 10240, 'square' => false, 'upscale' => false, 'crop' => false],
    ],
    where,
    w - width,
    h - height,
     

    You can override this config via custom plugin.

    Use My plugin again.

    1 - Open elgg-plugin.php and add this code before last ];

    'events' => [
        'entity:icon:sizes' => [
            'group' => [
               \MyPlugin\SetIconSizes::class => [],
            ],
       
            'user' => [
              \MyPlugin\SetIconSizes::class => [],
            ],
          ],
    ],
     
    Be careful, all symbols are important.
     
    2 - Create a new file
     
    \mod\my_plugin\classes\MyPlugin\SetIconSizes.php
     
    3 - Open SetIconSizes.php and add this example code
     
    Change w\h on your custom sizes.
     
    You can ignore some sizes, e.g. small, tiny; just use default sizes and values.
     
    You may need to clear the cache - run 'Upgrade' via administration.
     

    Please note:

    • you need to recreate your avatars to overwrite previously saved icons on your server,
    • Elgg's design may not be compatible with your custom icon sizes so there may be some issues in UI.

    Learn docs.

     

  • It worked perfectly! Thank you so much, really. You saved me. Big hug.