» »

Красивые буквы вместо аватарки для сайта

Красивые буквы вместо аватарки для сайта

Теперь вы можете на сайте вместо аваратки автоматически поставить букву, которая будет идти первой вашем нике, где форма в стиле Mail. Ранее были скрипты, но после обновление системы они не стали корректно работать, а точнее ресурс майл обновил их. Но теперь все будет происходить и работать через скрипт, где за вами остается право на их редактирование в изменение под свой формат сайта.

Спасибо пользователю waak, который создал его, что теперь можно закрыть места, для тех, кто не поставил Avatar, да и если говорить о конструкторе, то почему то получаются битые ссылки, что теперь можно кардинально изменить. Где безусловно будет смотреться уникально, что основном идет под комментарий или на персональной странице. Что теперь у вас появилась возможность в установке, там где посчитаете нужным, но а точнее, где идет изображение пользователя, это как информер или отдельная страница.

Здесь будет представлена несколько версий:

Так визуально смотрится и идет по умолчанию:

Буквы-аватарки на списке

Приступаем к установке:

Первое, что делаем, это скачиваем архив, и что там находится, перетаскиваем файловый менеджер в папку ava, если нет такой, то создаем под таким именем.

Эта версия идет на такие формы вывода на замену, как профиль пользователя, также вид комментарием и страница материалов.

По месту, где хотите видеть такую вариацию аватар.

Код
<span class="avaWaakLogo$ID$"></span>

Ниже ставис скрипт:

Код
<script type="text/javascript">  
  var someText = '$USERNAME$'  
var firstChar = someText.substr(0, 1).toLowerCase();  
$(".avaWaakLogo$ID$").html('<img src="/ava/'+firstChar+'.png">');  

  </script>

Если говорить про оператор, то можно поменять на любой другой который выводит ник пользователя.

Код
$USERNAME$


2 Версия:

Она идет под информер и на модуль форума:

В шаблон информера разместим код вывода снимка:

Код
<span class="avaWaakLogo$ID$"></span>

Ну и скрипт который мы слегка переделали так как в данном информере оператор выводит не просто ник пользователя а ссылку на ник пользователя нам нужно с начало получить текст ссылки а после получить первую букву и после вывести нужный аватар для этого нам нужен следующий скрипт.

Для автора темы

Код
<span style="display: none;" class="ava_inf_avtornik$ID$">$AUTHOR$</span>

Данный код будет хранить ник пользователя для скрипта

В нужное место где будет выводится картинка

Код
<span class="avaWaakLogo$ID$"></span>

Теперь код который будет выводить картинку аватара

Код
<script type="text/javascript">  
  var someText = $('ava_inf_avtornik$ID$').text();  
var firstChar = someText.substr(0, 1).toLowerCase();  
$(".avaWaakLogo$ID$").html('<img src="/ava/'+firstChar+'.png">');  

  </script>

Для автора последнего поста темы

Код
<span style="display: none;" class="ava_inf_avtortemnik$ID$">$POST_USER$</span>

Данный код будет хранить ник пользователя для скрипта

В нужное место где будет выводится картинка

Код
<span class="avaWaakLogo$ID$"></span>

Данный код будет хранить ник пользователя для скрипта

Код
<script type="text/javascript">  
  var someText = $('ava_inf_avtortemnik$ID$').text();  
var firstChar = someText.substr(0, 1).toLowerCase();  
$(".avaWaakLogo$ID$").html('<img src="/ava/'+firstChar+'.png">');  

  </script>

Если вы решили совместить 2 скрипта, что предоставлены выше в одном информере, то вам придётся изменить в одном из них оператор вывода картинки

Как пример:

Код
.avaWaakLogo$ID$

на

Код
.avaWaakLogoava$ID$

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

Автор: waak
Источник: Talantlev.ucoz.ru

Рекомендую посетить этот ресурс, так как автор, сам пишет оригинальные скрипты, вообщем весь материал.
15.01.2018 Загрузок: 3 Просмотров: 466 Комментарий: (12)

Поделиться в социальных сетях

Материал разместил

Комментарий: 12
-SAM-
-SAM- 16.01.2018 04:301
+2
Да, только вот waak не автор в данном случае, что написано создал (просто материал подготовил, что имеющиеся ранее скрипты в кучу свёл). Собственно, темы на эти скрипты и решение уже неоднократно скидывал вам в личку, Kosten, но всё же так и не взяли на заметку, как и вдвойне странно увидеть, что приписываете авторство этих скриптов waak.
-SAM-
-SAM- 16.01.2018 05:292
+3
Ну и, к слову сказать, эта версия не из лучших, что имеются в сети. Есть еще версия обрезки первой буквы уловным оператором, с дальнейшим подключением стилизации, что все картинки эти одним файлом идут (спрайтом) - так и нужно делать, где это возможно, что выудить первую букву легко можно (не прибегая к скриптам, как и избегать подгрузки, а сразу статически выводить данные, а не каждый раз документ обрабатывать). Также на той же Вебочке обсуждалось (как ввели noavatar на самом mail-е, что соответственно после буквенные вариант аватарки перестало отдавать), и был опубликован скриптовый вариант этого решения (с использованием векторных изображений). Ссылки не буду публиковать здесь, чтобы не сочли за спам (но всё же, как и тогда писал в личке, что стоить опубликовать на сайте, чтобы не затерялось, как и скидывал сайт, откуда архивы скачать можно с полными наборами латиницы и кириллицы, цифр, в разных размерах и формате изображения этих noavatar от Gmail - именно у них mail.ру позаимствовал).
waak
waak 16.01.2018 13:043
-2
Этот скрипт как и картинки к нему я написал сам при создании информера для форума и являюсь автором данной работы но не автором идеи тут майл наверное автор а на странице указан автор работы и ссылка на сайт автора
-SAM-
-SAM- 16.01.2018 22:024
+2
Про это и написал выше (а сами скрипты - не что-то новое и особенное, что в прошлом попадались уже... не говорю, что брал их, тут просто иначе и не сделаешь, что функции применяются для достижения эффекта). Как и сказал, что описанное выше Kosten, мол до этого было решение, которое отвалилось, и якобы ты нашёл решение, чтобы вопрос по этому поводу закрыть - нет, были до тебя публикации, что более грамотный подход в реализации уже предложен был (по мне, это как изобретать велосипед снова, но квадратные колеса ставить, после говоря об авторстве). В добавок ко всему, в предложенном тобой варианте скрипта отсутствует проверка латиницы, что не идёт условие на проверку символов в переменной (если есть в списке латинский алфавит и цифры, то вывод делать изображения из набора)... просто без этого условия скрипт будет срабатывать в любом случае, делая вывод изображения, например, с кириллического набора, который не залит (изображения noavatar-ки с битой ссылкой)... или вообще в никнейме могут идти какие-то "иероглифы" (посему проверку наличия допустимых символов в переменной добавить надо бы, как уже сделал перевод в нижний регистр, ведь в этом случае к нему чувствительно всё, приходиться и стили классов дублировать, например). Ну и, раз используется скриптовый вариант, то вполне можно применять с уже имеющимися и опубликованными на том же zornet решениями, например, что когда нет залитого аватара (что выуживали его через персональную запросами, а после в колонке рядом с автором темы\поста последнего оставленного в теме вывод делался, вот пример обсуждения на этот счёт), то делать условие на вывод подобного буквенного аватара в качестве noavatar-а (и тут же еще одно условие на вывод можно сделать, как выше писал, что если лишь залит набор из латиницы и цифр, то можно выводить обычный noavatar для всех остальных случаев).
Вот еще вариант решения, что предложили на Вебочке http://jsbin.com/vodavihibi/2/ ... пожалуй, пока лучший вариант решения (из тех, что видел), для достижения подобного результата, если уж решили делать (ну, а как уже писал, что где возможно, то можно и даже нужно сразу вырезать условным оператором uCoz первую букву логина, а после через шаблон вывод сделать, подключив стилизацию - это самый оптимальный вариант, а не обработка документа страницы скриптами). Где-то еще видел вариант, что скриптом вывод был, что как и с флагами стран делалось (то ли спрайтом, то ли с подключением векторных изображений). Ну, а наборы эти Gmail-овских noavatar-ок видел в блоге sites[.]google.com, можно скачать оттуда, кому нужно (те, что раньше выводились скриптом с filin[.]mail.ru, будь то это или это решение).
waak
waak 16.01.2018 22:145
-2
у меня всё указано что я сделал только латинские а под русские нужна самим делать просто копи пост в котором не описали это и с условным оператором я тоже делал это был первый вариант но после решил всё таки скриптом
waak
waak 16.01.2018 22:307
-2
Цитата -SAM- ()
на Вебочке http://jsbin.com/vodavihibi/2/ ... пожалуй, пока лучший вариант решения (из тех, что видел),

с эти соглашусь реализация отличная
-SAM-
-SAM- 21.01.2018 05:1710
+2
Писал там, что обсуждалось на Вебочке, вот Доступно только для пользователей обсуждалось (не спам, а чтобы понятно было, кто выложил там - в комментариях).
Еще пару слов про те решения, что "отвалились" - мне удалось всё починить. Уже был хотел переделывать скрипт этот (ибо стоит на Diz-CS), потом понял, что ставить другую версию - не одно и то же, так как для каждого ника пользователя делается свой цвет заднего фона (то есть для ника с одной и то же первой буквой - фон разный, исходя из привязки по тому фейковому e-mail, что фигурирует в адресе к аватарке этой - в строке скрипта). Посмотрел на вкладке браузера "Сеть" чего же происходит, как оно выводит там noavatar - делается 302 (перенаправление). При наводке на первый попавшийся аватар скопировал его адрес, вставил в адресную строку браузера - открыло нужный файл изображения с буквой и задним фоном. Решил пока проблему тем, что вместо filin[.]mail.ru прописал адрес на него через анонимайзер... аватары эти выводятся теперь, как и ранее выводились.
waak
waak 16.01.2018 22:156
-2
А самое главное я некого не заставляю его использовать! если что то не нравится просто закройте страницу и сделайте лучше!!!
-SAM-
-SAM- 16.01.2018 22:378
+2
А я и не пишу, чтобы не использовали. Просто описал суть. Зачем делать, когда уже оно сделано и лучше (риторический вопрос, если вам задавать - для вас это еще одна разработка, что ссылку на свой сайт требовать ставить потом при перепечатке, якобы новизна решения была, когда по факту не было ее)... строку в скрипт просто добавить нужно, чтобы проверка латиницы и цифр из набора была... или же нужно все данные добавить в пост, залить все изображения.
-SAM-
-SAM- 16.01.2018 22:529
+2
Кстати, waak, я и примеры привёл, где твой скрипт пригодиться лучше всего - именно при использовании скриптовых решений, что там "отвалились"... если время у тебя будет - можешь переписать эти решения, скомбинировав, сделав их снова рабочими.
-SAM-
-SAM- 23.01.2018 09:3711
+3
Доработка этого решения находиться вот ЗДЕСЬ (именно, что идёт описанное мной, на что обратить внимание - вверена в скрипт строка проверки символов). Также, кто ставить будет отсюда набор - он неполный и для латинского алфавита, что отсутствует буква "P" (файл p.png), ну а для "Y" - файл Y.png нужно перевести в нижний регистр (y.png), иначе битой картинка будет при выводе. Еще в наборе должен идти символ "-" (дефис)... по мне, так не очень хорошо вывод его делать (что можно ввести в условие проверку по нему, тем самым сделав вывод обычного noavatar).
Kosten
Kosten 23.01.2018 18:3712
+1
-SAM-, от души за пояснение, что есть еще доработанный материал.
avatar