Just4Fun - Аватарки!

+41
5.64K

Здравствуйте, любители InstantCMS 2.x =)

Иллюстрация
Недавно на форуме была поднята тема в рамках которой я вспомнил об одной своей идее с цветными дефолтными аватарками. Хотя называть эту идею "своей" в корне не правильно, т.к. её я подсмотрел у mail.ru и google.

Иллюстрация
Иллюстрация
Записал идею в "список добрых дел" и отложил в дальний ящик, до наступления лучших дней свободного времени...

Основная идея заключается в уходе от серости стандартных аватарок тех пользователей которые не установили свою картинку для однозначной идентификации себя в сообществе ваших сайтов.

И вот, вчера вечером, я не смог удержаться от любопытства и набросал пару строк кода чтобы посмотреть как это может выглядеть в нашей любимой CMS.

Итак, кто не боится хаков (внесение изменений в ядро системы) может также поиграться с изменением аватарок. Для этого в файле ..\system\libs\template.helper.php немного модифицируем функцию html_avatar_image($avatars, $size_preset='small', $alt='') — 261-ая строка:
  1. function html_avatar_image($avatars, $size_preset='small', $alt=''){
  2.  
  3. if (empty($avatars)){
  4.  
  5. // генерируем фоновый цвет из никнейма
  6. $bg_color = $alt
  7. ? substr( dechex(crc32($alt)), 0, 6 )
  8. : sprintf( '%02X%02X%02X', rand(0, 255), rand(0, 255), rand(0, 255) );
  9.  
  10. // выбираем контрастный цвет для текста
  11. $r = hexdec( substr($bg_color, 0, 2) );
  12. $g = hexdec( substr($bg_color, 2, 2) );
  13. $b = hexdec( substr($bg_color, 4, 2) );
  14. $yiq = (($r*299)+($g*587)+($b*114)) / 1000;
  15. $txt_color = ($yiq >= 128) ? 'black' : 'white';
  16.  
  17. // более простой метод определения контрастного цвета (менее точный)
  18. // $txt_color = (hexdec($bg_color) > 0xffffff/2) ? 'black' : 'white';
  19.  
  20. $wh = 64;
  21. if ($size_preset == 'normal') { $wh = 200; }
  22. if ($size_preset == 'micro') { $wh = 32; }
  23.  
  24. $style = "background-color: rgba({$r}, {$g}, {$b}, .7); " // "background-color: #{$bg_color}; "
  25. ."color: {$txt_color}; "
  26. ."width: {$wh}px; "
  27. ."height: {$wh}px; "
  28. ."line-height: {$wh}px;"
  29. ."font-size: ".round($wh*0.625)."px";
  30.  
  31. $type = $alt ? 'letter' : 'user-'.$txt_color;
  32. //$type = $alt ? 'user-'.$txt_color : 'letter';
  33.  
  34. return '<div class="avatar-colorbox '.$type.'" title="'.htmlspecialchars($alt).'" style="'.$style.'" data-letter="'.mb_substr($alt, 0, 1).'"></div>';
  35.  
  36. }
  37.  
  38. $size = $size_preset == 'micro' ? 'width="32" height="32"' : '';
  39.  
  40. $src = html_avatar_image_src($avatars, $size_preset);
  41.  
  42. return '<img src="'.$src.'" '.$size.' alt="'.htmlspecialchars($alt).'" />';
  43.  
  44. }
Здесь мы проверяем установлен ли аватар у пользователя, и если нет, собираем наш вариант. Получаем цвет из никнейма пользователя, который обычно передаётся в переменной $alt, но если его там не окажется, то цвет генерируется случайным образом. Кто хочет более тонкой настройки получаемого цвета может использовать вот эту функцию gist.github.com/mrkmg/1607621. Затем определяем цвет буквы аватара — белый или черный, так, чтобы он был контрастным фоновому цвету. В переменной $type мы указываем какой аватар хотим увидеть: с начальной буквой никнейма пользователя или иконкой человечка. Наконец, собираем html-тег и отправляем его вызывающей функции.

Теперь добавим немного стилей для наших аватаров (я добавил их в конец файла ..\templates\default\css\theme-gui.css):
  1. .avatar-colorbox {
  2. margin: 0;
  3. padding: 0;
  4. background: no-repeat center;
  5. background-size: 1em;
  6. }
  7.  
  8. .avatar-colorbox.letter {
  9. position: relative;
  10. font-family: "Helvetica Neue",Helvetica,Arial,sans-serif!important;
  11. font-style: normal;
  12. font-weight: 300;
  13. text-align: center;
  14. text-transform: uppercase;
  15. -webkit-font-smoothing: antialiased;
  16. -moz-osx-font-smoothing: grayscale;
  17. }
  18.  
  19. .avatar-colorbox.letter:before {
  20. content: attr(data-letter);
  21. display: inline-block;
  22. position: absolute;
  23. left: 0;
  24. right: 0;
  25. margin-left: auto;
  26. margin-right: auto;
  27. }
  28.  
  29. .avatar-colorbox.user-white {
  30. background-image: url('data:image/svg+xml;utf8,<svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  31. }
  32. .avatar-colorbox.user-black {
  33. background-image: url('data:image/svg+xml;utf8,<svg fill="#222222" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  34. }
Всё! Запускаем сайт и смотрим изменения😊В стандартном исполнении аватарки можно увидеть на главной странице сайта в виджетах "Новые пользователи", "Активность" и "Комментарии", в списке пользователей и на странице профиля пользователя, а также во многих других местах =)
Иллюстрация Иллюстрация
Или можно глянуть на демо-сайте

Стоит отметить что проблема дефолтных аватарок существует достаточно давно и многие предлагают свои варианты ее решения:
https://randomuser.me/ — сервис предлагает свой API для генерации случайных данных пользователя, в том числе и аватаров;
http://8biticon.com/ — а здесь можно генерить случайные аватарки пользователей и использовать их в замен дефолтных. (https://habrahabr.ru/post/163181/ — пост с описанием сервиса);
github.com/tequilarapido/letter-avatar — авторы предоставляют небольшую php-библиотеку для создания цветных буквенных-аватарок и сохранения их в картинки формата jpg и png;
MonsterID — библиотека для генерации уникальных монстроподобных изображений (её плагин для WP);
Wavatars — еще одна php-библиотека;
http://scott.sherrillmix.com/blog/blogger/wp_identicon/ — WP-плагин для создания геометрических аватарок;
http://uifaces.com/ — множество аватарок для мокапов сайтов
+4
WebMan WebMan 8 лет назад #
Интересное решение. Может быть даже не "Просто смеха ради", а вполне серьёзное, хотя и простое решение.

В никах часто бывает не одно слово, а несколько. Мне кажется, можно попробовать подставлять в аватар не по одной букве, а первые буквы из первых двух-трёх слов. Может быть через точку, чтобы не выглядело одним словом. Также можно добавлять точку после второй буквы в варианте с одной-двумя буквами в аватарке, если слов в нике больше двух. Тогда аватарки станут ещё более уникальными и наглядными.

Например, у "Олег Васильевич я" на аве будет "О.В" или "О.В." или "О.В.я", а у "Олег с клещами" - "О.с.к" или "О.с." или "О.с". (Простите, ребята, ничего личного. Вы просто оказались подходящими для примера). joke

Правда, при трёх буквах иногда могут получаться неприличные слова. Но это уже будут издержки производства. Зато в таком случае человек быстрее поменяет свою аву на что-то более подходящее ему. laugh
+3
Val Val 8 лет назад #
Ну выводить вместо одной буквы 2 или 3 проблем вообще нет =), нужно лишь подставить желаемые вариации и сочетания в атрибут data-letter.
0
WebMan WebMan 8 лет назад #
А как сделать автоматический подбор размера букв? Чтобы для одной буквы был такой, как есть, а для двух-трёх - меньше.
+2
Val Val 8 лет назад #
Ну в данном случае я пошел простым путем -> в стилях поставил text-transform: uppercase;, но никто же не мешает навести форматирование в PHP, записать данные в data-letter и просто отобразить их без лишних трансформаций))
Код PHP:
  1. $words = str_word_count($alt, 1);
  2. if (count($words)>1) {
  3. $nick = '';
  4. foreach ($words as $word) {
  5. $nick += mb_substr($word, 0, 1);
  6. }
  7. }
  8. ...
  9. 'data-letter="'.$nick.'"
+1
Val Val 8 лет назад #
Это не готовый код, а лишь направление мыслей)))
+1
WebMan WebMan 8 лет назад #
Спасибо, Val, когда доберусь до этой темы, поэкспериментирую.
-1
Андрей Андрей 8 лет назад #
Креативно smile
+1
Dost Dost 8 лет назад #
Классно, мне нравится. Провал поставить, у меня цветные квадраты без букв получилось. Кто будет ставить отпишите плиз, у вас нормально стало. Автор молодец!
+1
Val Val 8 лет назад #
Ставили на чистую систему? На локалке или на хостинге - есть возможность глянуть что да как?
0
Iceman Iceman 8 лет назад #
Есть такая проблема, судя по всему она возникает из-за того, что у изображения банально отсутствует атрибут alt. в функции он есть, но почему-то не подтягивается и остается пустым, а следовательно не работает и показ символа и определение цвета.
0
Iceman Iceman 8 лет назад #
В моем случае проблема была в том, что в виджет списка пользователей действительно не подтягивался alt.
заменил
Код PHP:
  1. html_avatar_image($profile['avatar'], 'small');
на
Код PHP:
  1. html_avatar_image($profile['avatar'], 'small', $profile['nickname']);
и все стало как надо.
+3
Val Val 8 лет назад #
Странно(( на случай отсутствия $alt стоят условия по которым также генерится цвет фона, а на выходе вместо буквы показывается иконка пользователя:
0
Iceman Iceman 8 лет назад #
Видимо это условие не срабатывало, поскольку собственно "alt" там выводился даже без переменной с содержимым, но при этом он был пустой, от него только отрезалось ="".
+1
Val Val 8 лет назад #
по коду alt и должен выводиться в любом случае: return '<img src="'.$src.'" '.$size.' alt="'.htmlspecialchars($alt).'" />';

Вы можете мне скинуть какой тег на выходе у вас получается при отсутствии $alt?
Должно быть что-то похожее на это:
Код HTML:
  1. <div class="avatar-colorbox user-white" title="" style="background-color: rgba(44, 102, 170, .7); color: white; width: 64px; height: 64px; line-height: 64px;font-size: 40px" data-letter=""></div>
+1
Iceman Iceman 8 лет назад #
На удивление: убрал сейчас для проверки переменную с alt и отобразились силуэты, так что повторить проблему не вышло, хотя вроде больше ничего не менял в этой стороне. Тег соответственно вышел как Вы и написали.
+2
lezginka.ru lezginka.ru 8 лет назад #
+++
жаль что без вмешательства в ядро не получается...
+7
Val Val 8 лет назад #
Первоначально была (а может и есть)) ) идея сделать отдельным дополнением. Вероятно по пути перехвата процесса регистрации и генерации картинки для нового пользователя.
Данный вариант делался любопытства ради.
+3
WebMan WebMan 8 лет назад #
Это отличная идея! joke
+4
Datiks Datiks 8 лет назад #
будем очень ждать отдельным дополнением ++++
0
F_a_R_i_D F_a_R_i_D 8 лет назад #
Отображает буквы только на кирилице и латинице?
+1
Val Val 8 лет назад #
Восточные языки не проверял, но должно показывать все символы, которые поддерживаются utf-8
Олег Васильевич я Олег Васильевич я 8 лет назад #
Комментарий удален
-2
Андрей Андрей 8 лет назад #
есть еще прикольный вариант Загрузка аватара при регистрации от камрада Evanescence
+3
Jestik Jestik 8 лет назад #
А может что бы не боятся сразу в коробку?) zst
+3
Val Val 8 лет назад #
Это не ко мне вопрос)) Но для коробки код надо творчески переработать
+5
Fuze Fuze 8 лет назад #
Универсальности ради надо:

1. сделать опцию в компоненте авторизация регистрация "формировать аватары автоматически"
2. если опция включена, то формировать готовый аватар (картинку) по указанному алгоритму, думаю вполне реально
3. все удобно, гибко и универсально.

имхо)
0
WebMan WebMan 8 лет назад #
Я тоже сразу подумал про генерацию и сохранение картинок для аватара. Но простая логика показывает, что если хранить в профиле массив с несколькими параметрами (цветами и размерами букв), а потом подставлять их в html-шаблон дефолтной аватарки, то работать будет быстрее, чем запросы к серверу за картинками, даже с учётом их кэширования в браузере. Да и шаблон таких аватарок всегда можно легко поменять при необходимости.
+2
Pocus Pocus 7 лет назад #
Хех :)
Когда оно в офф. версии появилось? Наверное с 2.6?
Я пару месяцев пользовался этим хаком и радовался.
А после выхода 2.7 полез восстанавливать и... заметил переменную $is_html_empty_avatar
Вот только не нашел где её в админке включить.
+1
Val Val 7 лет назад #
Уверяю вас этот хак я выложил раньше чем функционал появился в коробке)) Я ничего не копипастил.
+1
Pocus Pocus 7 лет назад #
Ясно дело, я ж не в упрёк вам. Я про собственную невнимательность.
Кстати, спасибо, и эта и другие ваши работы очень радуют.
0
WebMan WebMan 7 лет назад #
Такой опции в Админке нет.
+2
Lobusik Lobusik 4 года назад #
Интересное решение и работает сейчас на 2.13. Вопрос в другом, аватар с буквой виден в ленте, в комментариях но его нет у пользователя в профиле и общем списке пользователей, в чём причина? как можно исправить? если это ещё актуально
0
Yuran Yuran 4 года назад #
Работает все отлично! Подскажите как увеличить в 2 раза размер этих аватарок, а то 64 как то маловато:))
Посмотрел в коде есть такое:

Код PHP:
  1. $wh = 64;
  2. if ($size_preset == 'normal') { $wh = 200; }
  3. if ($size_preset == 'micro') { $wh = 32; }
В начале в функции поменял small на normal так
Код PHP:
  1. function html_avatar_image($avatars, $size_preset='normal', $alt=''){
но этого недостаточно... Наверное нужно еще где то настроить. Помогите пожалуйста.
+1
Yuran Yuran 4 года назад #
Нашел:) все в админке меняется:)

Еще от автора

СтопХам - userscript для instantcms.ru
Всем привет! Презентую чужую разработку со своей небольшой доработкой .
Предпросмотр для InstantCMS 2
Всем привет!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.