Plugin for changing profile avatar/icon size

Hi!

I can't find a plugin that allows you to change the default size of avatars/icons. I would love to be able to change the size of the profile avatar/icon. Right now the default size is 200 x 150px I would like to make it bigger. As I have understood this, this cannot be changed in CSS, this default size is in the core file and there should not be any changes made to the core file. The way this can be done is to create a plugin, that's correct isn't it?

 

I have not created any plugins before so if anyone could help me figure out how to do this it would be highly appreciated! :)

  • Profile avatar has three sizes:

    small, medium, large

    You could change it via CSS or extending the profile view and change the size of the avatar.

    Rodolfo Hernandez

    Arvixe/Elgg Community Liaison

     

  • In your plugin's start.php just add the new Iconsizes

    $icon_sizes = array(
    'tiny' => array('w' => 25, 'h' => 25, 'square' => TRUE, 'upscale' => TRUE),
    'medium' => array('w' => 100, 'h' => 100, 'square' => TRUE, 'upscale' => TRUE),
    );

    elgg_set_config('icon_sizes', $icon_sizes);

    For example this will set only two types of Icons for your site, named medium and tiny with the size of 25x25 and 100x100 respectively.

  • For some reason this didnt work for me..
    I tried what Webgalli said, im using Independence theme.
    Do you have to put it anywhere specifically in the plugin's start.php

  • hmm. i also tried overriding in engine/lib/views.php but it didnt change anything. am i neglecting something? sorry, im still pretty new to elgg dev but loving it

  • in which css file could one change these sizes?

  • so i found the css file
    views/default/css/elements/icons.php
    i resize it now and it works, but it doesnt blowup the image to the new size
    only the frame of the image (if that makes sense)

  • For example.
    screenshot

    How do i "upscale" it in the css?

  • (sorry to clog this thread up, but it may help others anyway).

    I found out that adding a new picture to a profile now creates the larger one.


    image

    But it doesnt display on the profile.

    image

    currently i have restored engine/lib/views to default, put team webgalli's code in the start.php of my theme and i have also changed the css in icon.php which ive added to my theme.

    /* ***************************************
        AVATAR ICONS
    *************************************** */
    .elgg-avatar {
        position: relative;
        display: inline-block;
    }
    .elgg-avatar > a > img {
        display: block;

    }

    .elgg-avatar-tiny{
        width: 100px;
        height: 100px;
        
    }

    .elgg-avatar-tiny > a > img {
        width: 100px;
        height: 100px;
        
        /* remove the border-radius if you don't want rounded avatars in supported browsers */
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        
        -moz-background-clip:  border;
        background-clip:  border;

        -webkit-background-size: 100px;
        -khtml-background-size: 100px;
        -moz-background-size: 100px;
        -o-background-size: 100px;
        background-size: 100px;
    }
    .elgg-avatar-small > a > img {
        width: 100px;
        height: 100px;
        
        /* remove the border-radius if you don't want rounded avatars in supported browsers */
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        
        -moz-background-clip:  border;
        background-clip:  border;

        -webkit-background-size: 100px;
        -khtml-background-size: 100px;
        -moz-background-size: 100px;
        -o-background-size: 100px;
        background-size: 100px;
    }
    .elgg-avatar-medium > a > img {
        width: 100px;
        height: 100px;
    }
    .elgg-avatar-large > a > img {
        width: 200px;
        height: 200px;
    }


    Any help?