ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивые буквы вместо аватарки для сайта

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

Красивые буквы вместо аватарки для сайта
Теперь вы можете на сайте вместо аваратки автоматически поставить букву, которая будет идти первой вашем нике, где форма в стиле 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 Января 2018 Загрузок: 10 Просмотров: 6321 Комментариев: (12)

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

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

Оставь свой отзыв

Комментарии: 12
-SAM-
-SAM- 16 Января 2018 04:301
+2
Да, только вот waak не автор в данном случае, что написано создал (просто материал подготовил, что имеющиеся ранее скрипты в кучу свёл). Собственно, темы на эти скрипты и решение уже неоднократно скидывал вам в личку, Kosten, но всё же так и не взяли на заметку, как и вдвойне странно увидеть, что приписываете авторство этих скриптов waak.
-SAM-
-SAM- 16 Января 2018 05:292
+3
Ну и, к слову сказать, эта версия не из лучших, что имеются в сети. Есть еще версия обрезки первой буквы уловным оператором, с дальнейшим подключением стилизации, что все картинки эти одним файлом идут (спрайтом) - так и нужно делать, где это возможно, что выудить первую букву легко можно (не прибегая к скриптам, как и избегать подгрузки, а сразу статически выводить данные, а не каждый раз документ обрабатывать). Также на той же Вебочке обсуждалось (как ввели noavatar на самом mail-е, что соответственно после буквенные вариант аватарки перестало отдавать), и был опубликован скриптовый вариант этого решения (с использованием векторных изображений). Ссылки не буду публиковать здесь, чтобы не сочли за спам (но всё же, как и тогда писал в личке, что стоить опубликовать на сайте, чтобы не затерялось, как и скидывал сайт, откуда архивы скачать можно с полными наборами латиницы и кириллицы, цифр, в разных размерах и формате изображения этих noavatar от Gmail - именно у них mail.ру позаимствовал).
waak
waak 16 Января 2018 13:043
-2
Этот скрипт как и картинки к нему я написал сам при создании информера для форума и являюсь автором данной работы но не автором идеи тут майл наверное автор а на странице указан автор работы и ссылка на сайт автора
-SAM-
-SAM- 16 Января 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 Января 2018 22:145
-2
у меня всё указано что я сделал только латинские а под русские нужна самим делать просто копи пост в котором не описали это и с условным оператором я тоже делал это был первый вариант но после решил всё таки скриптом
waak
waak 16 Января 2018 22:307
-2
Цитата -SAM- ()
на Вебочке http://jsbin.com/vodavihibi/2/ ... пожалуй, пока лучший вариант решения (из тех, что видел),

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