Option to select Less Bright Colors

https://wordpress.org/support/topic/option-to-select-less-bright-colors/#post-14279481

Hello Team,

Thanks a lot for making this plugin. we are using it from almost 1year.

we would like to recommend few features depending on the possibilities and feasibility consider adding them.

allow to choose Less Bright Colors with “Automatically determine background color for each user (Recommended)” option

currently this plugin is making very bright colors which are not eye pleasing to avoid this we are trying to use custom colors https://i.imgur.com/Z8Ym6Gu.png but that is leading to another problem with profile page (developer took some reference from plugin, profile page banner color not updating)

please consider looking into this they did something cool idk .. but it just gives out very soft and pleasant colours https://github.com/flarum/core/blob/a6dd545dbc5c173bf470fdd9ce5c89fa5603d51c/js/src/common/utils/stringToColor.ts

reference link https://discuss.flarum.org/d/26434-where-can-i-get-list-of-profile-pic-color-codes-used-for-flarum

we have tired multiple file formats png, jpg and SVG. among these SVG is taking very less space after the new update which is fantastic. can we bring down it from 800bytes to 400bytes ? if possible offer some feature with file types like SVG with optimized version may be a check box.

Thanks again for an a awesome plugin. 🙏

if possible please tell where to modify the code for less bright colors

@arielhr1987 Replied Hi @hari-bonda

Thanks for your recommendations, I think number one looks very nice and it would be a cool feature to add. What i didn’t understand was the exact problem you are facing while using custom backgrounds. The avatar background color doesn’t update if you change it in settings page?

To accomplish this no so bright color request you can do something like code below. I copied some code from this library https://github.com/mistic100/RandomColor.php which does exactly the same thing as the one you sent. Modify the code to fit your needs.


function my_avatar_url_args( $url_args, $id_or_email ) {
    $bg = $url_args['background'];

    // Convert the username into a number based on the ASCII value of each
    // character.
    $num = 0;
    for ( $i = 0; $i < strlen( $bg ); $i ++ ) {
        $num += ord( substr( $bg, $i ) );
    }

    // Construct a color using the remainder of that number divided by 360, and
    // some predefined saturation and value values.
    $hue = $num % 360;

    $url_args['background'] = hsv2rgb( $hue, 30, 90 );

    $url_args['color'] = leira_letter_avatar()->public->get_contrast_color( $url_args['background'] );

    return $url_args;
}

/**
 * https://github.com/mistic100/RandomColor.php/blob/394b2a6f87b7cdc2ae0bfb02dd59b9e35fd08d8a/src/RandomColor.php
 *
 * @param $h
 * @param $s
 * @param $v
 *
 * @return string
 */
function hsv2rgb( $h, $s, $v ) {

    $h /= 360;
    $s /= 100;
    $v /= 100;

    $i = floor( $h * 6 );
    $f = $h * 6 - $i;

    $m = $v * ( 1 - $s );
    $n = $v * ( 1 - $s * $f );
    $k = $v * ( 1 - $s * ( 1 - $f ) );

    $r = 1;
    $g = 1;
    $b = 1;

    switch ( $i ) {
        case 0:
            list( $r, $g, $b ) = array( $v, $k, $m );
            break;
        case 1:
            list( $r, $g, $b ) = array( $n, $v, $m );
            break;
        case 2:
            list( $r, $g, $b ) = array( $m, $v, $k );
            break;
        case 3:
            list( $r, $g, $b ) = array( $m, $n, $v );
            break;
        case 4:
            list( $r, $g, $b ) = array( $k, $m, $v );
            break;
        case 5:
        case 6:
            list( $r, $g, $b ) = array( $v, $m, $n );
            break;
    }

    $res = array(
        'r' => floor( $r * 255 ),
        'g' => floor( $g * 255 ),
        'b' => floor( $b * 255 ),
    );

    $hex = '';//'#'
    foreach ( $res as $c ) {
        $hex .= str_pad( dechex( $c ), 2, '0', STR_PAD_LEFT );
    }

    return $hex;
}

add_filter( 'leira_letter_avatar_url_args', 'my_avatar_url_args', 10, 2 );

Exactly as you described SVG is the one that take less space among all formats. I have no idea how to decrease svg size, first think that comes to my mind is make the xml shorter. You can try something like this as a first approach, let me know how it works for you.

function my_image_content( $avatar, $data ) {

    if ( $data['format'] == 'svg' ) {
        //create a custom avatar or replace something int he current one.
        $avatar = str_replace( "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", "'Times New Roman', Times, serif", $avatar );
    }

    return $avatar;
}

add_filter( 'leira_letter_avatar_image_content', 'my_image_content', 10, 2 )

@ Hari Replied Thanks a zillion times, will try both and keep you posted.

What i didn’t understand was the exact problem you are facing while using custom backgrounds. The avatar background color doesn’t update if you change it in settings page?

I think this is something related to other factors i will ask concerned one to look into it. 👍

arielhr1987 / leira-letter-avatar

Option to select Less Bright Colors #2