ФОРУМ PS-Studio.Info

  • Страница 1 из 1
  • 1
Форум » Форум по uCoz: работа с сайтом - дополнения и изменения » Общий форум » Вид комментариев » Вывод первых букв логина пользователя вместо аватара (Ставим заглушку - букву вместо отсутствующего аватара)
Вывод первых букв логина пользователя вместо аватара
Дата: Чт, 05.04.2018, 23:40Сообщение # 1
ps-studio
Администраторы
Сегодня реализуем такую фишку, как вывод вместо аватара пользователя в его комментариях первых букв его логина. Часто используется в социальных сетях, браузерах, почтовых клиентах итд.

Выглядит это так:



Реализация предусматривает разное цветовое оформление фона для разных групп. Имитация Flat Shadow эффекта для текста с помощью CSS.

Вариант с полной заменой аватар

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

1. В шаблоне "Комментарии - Вид комментариев" заменяем код на этот:

Код

<?if($GID$='4')?>  
<div itemscope itemtype="https://schema.org/Review" class="uComment $CLASS$">
$ITEM_REVIEWED$
<span class="uc-avatar">
<div class="user-info">
<div class="user-info-avatar admin_bg" id="avatar$NUMBER$"></div>
<div class="user-info-name" id="name$NUMBER$"></div>
</div>  
</span>
  <div class="uc-content">
  <div class="uc-top">
  <div class="uc-top-right">
  <?if($GOOD_COMMENT_URL$)?>
  <a href="$GOOD_COMMENT_URL$"><img alt="" src="/.s/img/icon/thumbu2.png" title="Хороший пост" style="margin:0 4px; vertical-align:middle;"></a>
  <?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  <span itemprop="ratingValue">$COMMENT_RATING$</span>
  </span>
  <?else?>$COMMENT_RATING$<?endif?>
  <a href="$BAD_COMMENT_URL$"><img alt="" src="/.s/img/icon/thumbd2.png" title="Плохой пост" style="margin:0 4px; vertical-align:middle;"></a>
  <?else?>
  <img alt="" src="/.s/img/icon/thumbu2_.png" title="Хороший пост" style="margin:0 4px; vertical-align:middle; opacity:.5; ">
  <?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  <span itemprop="ratingValue">$COMMENT_RATING$</span>
  </span>
  <?else?>$COMMENT_RATING$<?endif?>
  <img alt="" src="/.s/img/icon/thumbd2_.png" title="Плохой пост" style="margin:0 4px; vertical-align:middle; opacity:.5;">
  <?endif?>
  <?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>
  </div>
  <div class="uc-top-left">
  <a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + location.search + '#comEnt$ID$' ); if (document.getElementById('comEnt$ID$') ) { $('body').scrollTo({top:$('#comEnt$ID$').offset().top-54, left:0 }, 500 ); return false; }" name="ent$ID$"><b>$NUMBER$</b></a>
  <?if($SOC_TYPE$)?><img src="/.s/img/icon/social/16/$SOC_TYPE$.png" alt="" /><?endif?>
  <?if($USERNAME$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" href="$PROFILE_URL$" class="uc-profile-link"><span itemprop="name">$USERNAME$</span></a>
  <?else?>
  <?if($SOC_LINK$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" rel="nofollow" href="$SOC_LINK$" class="uc-profile-link"><span itemprop="name">$NAME$</span></a>
  <?else?><span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">$NAME$</span></span><?endif?>
  <?endif?>
  <span itemprop="datePublished" content="$DATE_FORMATTED$ $TIME$" class="uc-opacity">• $TIME$, $DATE$</span>
  </div>
  </div>
  <div itemprop="reviewBody" class="uc-message cMessage">$MESSAGE$</div>
  <?if($ANSWER$)?><div class="uc-answer cAnswer"><b>Ответ</b>: $ANSWER$</div><?endif?>
  <?if($ANSWER_URL$)?><div class="uc-answer-link"><a href="$ANSWER_URL$">Ответить</a></div><?endif?>
  </div>
</div>

<?else?>

<div itemscope itemtype="https://schema.org/Review" class="uComment $CLASS$">
$ITEM_REVIEWED$
<span class="uc-avatar">
<div class="user-info">
<div class="user-info-avatar user_bg" id="avatar$NUMBER$"></div>
<div class="user-info-name" id="name$NUMBER$"></div>
</div>  
</span>
  <div class="uc-content">
  <div class="uc-top">
  <div class="uc-top-right">
  <?if($GOOD_COMMENT_URL$)?>
  <a href="$GOOD_COMMENT_URL$"><img alt="" src="/.s/img/icon/thumbu2.png" title="Хороший пост" style="margin:0 4px; vertical-align:middle;"></a>
  <?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  <span itemprop="ratingValue">$COMMENT_RATING$</span>
  </span>
  <?else?>$COMMENT_RATING$<?endif?>
  <a href="$BAD_COMMENT_URL$"><img alt="" src="/.s/img/icon/thumbd2.png" title="Плохой пост" style="margin:0 4px; vertical-align:middle;"></a>
  <?else?>
  <img alt="" src="/.s/img/icon/thumbu2_.png" title="Хороший пост" style="margin:0 4px; vertical-align:middle; opacity:.5; ">
  <?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  <span itemprop="ratingValue">$COMMENT_RATING$</span>
  </span>
  <?else?>$COMMENT_RATING$<?endif?>
  <img alt="" src="/.s/img/icon/thumbd2_.png" title="Плохой пост" style="margin:0 4px; vertical-align:middle; opacity:.5;">
  <?endif?>
  <?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>
  </div>
  <div class="uc-top-left">
  <a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + location.search + '#comEnt$ID$' ); if (document.getElementById('comEnt$ID$') ) { $('body').scrollTo({top:$('#comEnt$ID$').offset().top-54, left:0 }, 500 ); return false; }" name="ent$ID$"><b>$NUMBER$</b></a>
  <?if($SOC_TYPE$)?><img src="/.s/img/icon/social/16/$SOC_TYPE$.png" alt="" /><?endif?>
  <?if($USERNAME$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" href="$PROFILE_URL$" class="uc-profile-link"><span itemprop="name">$USERNAME$</span></a>
  <?else?>
  <?if($SOC_LINK$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" rel="nofollow" href="$SOC_LINK$" class="uc-profile-link"><span itemprop="name">$NAME$</span></a>
  <?else?><span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">$NAME$</span></span><?endif?>
  <?endif?>
  <span itemprop="datePublished" content="$DATE_FORMATTED$ $TIME$" class="uc-opacity">• $TIME$, $DATE$</span>
  </div>
  </div>
  <div itemprop="reviewBody" class="uc-message cMessage">$MESSAGE$</div>
  <?if($ANSWER$)?><div class="uc-answer cAnswer"><b>Ответ</b>: $ANSWER$</div><?endif?>
  <?if($ANSWER_URL$)?><div class="uc-answer-link"><a href="$ANSWER_URL$">Ответить</a></div><?endif?>
  </div>
</div>

<?endif?>

<script>
var stringToColor = function stringToColor(str) {
  var hash = 0;
  var color = '#';
  var i;
  var value;
  var strLength;

  strLength = str.length;

  for (i = 0; i < strLength; i++) {
  hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }

  for (i = 0; i < 3; i++) {
  value = (hash >> (i * 8)) & 0xFF;
  color += ('00' + value.toString(16)).substr(-2);
  }

  return color;
};

var name = '$USERNAME$';
var letter = name.substr(0, 2);
var backgroundColor = stringToColor(name);
var elementAvatar = document.getElementById('avatar$NUMBER$');
var elementName = document.getElementById('name$NUMBER$');

elementName.innerHTML = name;
elementAvatar.innerHTML = letter;
elementAvatar.style.backgroundColor = backgroundColor;
</script>


В данном случае у нас реализовано условие, что если группа пользователя, оставившего комментарий, это группа администраторы (идентификатор 4), то оформление фона одно, в противном случае другое.
В итоге получаем малиновый фон для администраторов и голубой для остальных пользователей. Аналогично можно прописать и для многих других групп.

2. В Таблицу стилей (CSS) своего сайта добавьте стили:

Код

.user-info-avatar {
  overflow: hidden;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  -webkit-border-radius: 30% 30% 0 ;  
  -moz-border-radius: 30% 30% 0 ;  
  border-radius: 30% 30% 0 ;  
  text-align: center;
  font-family:Arial,serif;
  font-size:1.8em;
  font-weight:700;
  color: white;
  }
   
.user-info-name {
  display: none;  
}

.admin_bg { background: #ea4c89;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ea4c89 0%, #ae2258 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ea4c89), color-stop(100%, #ae2258));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #ea4c89 0%, #ae2258 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #ea4c89 0%, #ae2258 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #ea4c89 0%, #ae2258 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #ea4c89 0%, #ae2258 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea4c89', endColorstr='#ae2258',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */

  text-shadow: 1px 1px 0px #ae2258, 2px 2px 0px #ae2258, 3px 3px 0px #ae2258, 4px 4px 0px #ae2258, 5px 5px 0px #ae2258, 6px 6px 0px #ae2258, 7px 7px 0px #ae2258, 8px 8px 0px #ae2258, 9px 9px 0px #ae2258, 10px 10px 0px #ae2258, 11px 11px 0px #ae2258, 12px 12px 0px #ae2258, 13px 13px 0px #ae2258, 14px 14px 0px #ae2258, 15px 15px 0px #ae2258, 16px 16px 0px #ae2258, 17px 17px 0px #ae2258, 18px 18px 0px #ae2258, 19px 19px 0px #ae2258, 20px 20px 0px #ae2258, 21px 21px 0px #ae2258, 22px 22px 0px #ae2258, 23px 23px 0px #ae2258, 24px 24px 0px #ae2258, 25px 25px 0px #ae2258, 26px 26px 0px #ae2258, 27px 27px 0px #ae2258, 28px 28px 0px #ae2258, 29px 29px 0px #ae2258, 30px 30px 0px #ae2258, 31px 31px 0px #ae2258, 32px 32px 0px #ae2258, 33px 33px 0px #ae2258, 34px 34px 0px #ae2258, 35px 35px 0px #ae2258, 36px 36px 0px #ae2258, 37px 37px 0px #ae2258, 38px 38px 0px #ae2258, 39px 39px 0px #ae2258, 40px 40px 0px #ae2258;
}

.user_bg {
  background: #55acee;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #55acee 0%, #2274b2 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #55acee), color-stop(100%, #2274b2));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #55acee 0%, #2274b2 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #55acee 0%, #2274b2 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #55acee 0%, #2274b2 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #55acee 0%, #2274b2 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55acee', endColorstr='#2274b2',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */

  text-shadow: 1px 1px 0px #2274b2, 2px 2px 0px #2274b2, 3px 3px 0px #2274b2, 4px 4px 0px #2274b2, 5px 5px 0px #2274b2, 6px 6px 0px #2274b2, 7px 7px 0px #2274b2, 8px 8px 0px #2274b2, 9px 9px 0px #2274b2, 10px 10px 0px #2274b2, 11px 11px 0px #2274b2, 12px 12px 0px #2274b2, 13px 13px 0px #2274b2, 14px 14px 0px #2274b2, 15px 15px 0px #2274b2, 16px 16px 0px #2274b2, 17px 17px 0px #2274b2, 18px 18px 0px #2274b2, 19px 19px 0px #2274b2, 20px 20px 0px #2274b2, 21px 21px 0px #2274b2, 22px 22px 0px #2274b2, 23px 23px 0px #2274b2, 24px 24px 0px #2274b2, 25px 25px 0px #2274b2, 26px 26px 0px #2274b2, 27px 27px 0px #2274b2, 28px 28px 0px #2274b2, 29px 29px 0px #2274b2, 30px 30px 0px #2274b2, 31px 31px 0px #2274b2, 32px 32px 0px #2274b2, 33px 33px 0px #2274b2, 34px 34px 0px #2274b2, 35px 35px 0px #2274b2, 36px 36px 0px #2274b2, 37px 37px 0px #2274b2, 38px 38px 0px #2274b2, 39px 39px 0px #2274b2, 40px 40px 0px #2274b2;
}


Если вы хотите вывести только одну первую букву логина, то найдите эту строку в скрипте и исправьте в ней двойку на единицу:

Код

var letter = name.substr(0, 2);


Вариант с выводом первых букв логина только для тех, у кого нет аватара

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

Шаблон "Комментарии - Вид комментариев" будет такой:

Код

<?if($GID$='4')?>  
<div itemscope itemtype="https://schema.org/Review" class="uComment $CLASS$">
  $ITEM_REVIEWED$
  <span class="uc-avatar">
  <?if($USER_AVATAR_URL$)?>
  <?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" alt="avatar" /></a>
  <?else?><a href="$PROFILE_URL$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" alt="avatar" /></a><?endif?>
  <?else?>
<div class="user-info">
<div class="user-info-avatar admin_bg" id="avatar$NUMBER$"></div>
<div class="user-info-name" id="name$NUMBER$"></div>
</div>  
<?endif?>
  </span>
  <div class="uc-content">
  <div class="uc-top">
  <div class="uc-top-right">
  <?if($GOOD_COMMENT_URL$)?>
  <a href="$GOOD_COMMENT_URL$"><img alt="" src="/.s/img/icon/thumbu2.png" title="Хороший пост" style="margin:0 4px; vertical-align:middle;"></a>
  <?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  <span itemprop="ratingValue">$COMMENT_RATING$</span>
  </span>
  <?else?>$COMMENT_RATING$<?endif?>
  <a href="$BAD_COMMENT_URL$"><img alt="" src="/.s/img/icon/thumbd2.png" title="Плохой пост" style="margin:0 4px; vertical-align:middle;"></a>
  <?else?>
  <img alt="" src="/.s/img/icon/thumbu2_.png" title="Хороший пост" style="margin:0 4px; vertical-align:middle; opacity:.5; ">
  <?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  <span itemprop="ratingValue">$COMMENT_RATING$</span>
  </span>
  <?else?>$COMMENT_RATING$<?endif?>
  <img alt="" src="/.s/img/icon/thumbd2_.png" title="Плохой пост" style="margin:0 4px; vertical-align:middle; opacity:.5;">
  <?endif?>
  <?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>
  </div>
  <div class="uc-top-left">
  <a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + location.search + '#comEnt$ID$' ); if (document.getElementById('comEnt$ID$') ) { $('body').scrollTo({top:$('#comEnt$ID$').offset().top-54, left:0 }, 500 ); return false; }" name="ent$ID$"><b>$NUMBER$</b></a>
  <?if($SOC_TYPE$)?><img src="/.s/img/icon/social/16/$SOC_TYPE$.png" alt="" /><?endif?>
  <?if($USERNAME$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" href="$PROFILE_URL$" class="uc-profile-link"><span itemprop="name">$USERNAME$</span></a>
  <?else?>
  <?if($SOC_LINK$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" rel="nofollow" href="$SOC_LINK$" class="uc-profile-link"><span itemprop="name">$NAME$</span></a>
  <?else?><span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">$NAME$</span></span><?endif?>
  <?endif?>
  <span itemprop="datePublished" content="$DATE_FORMATTED$ $TIME$" class="uc-opacity">• $TIME$, $DATE$</span>
  </div>
  </div>
  <div itemprop="reviewBody" class="uc-message cMessage">$MESSAGE$</div>
  <?if($ANSWER$)?><div class="uc-answer cAnswer"><b>Ответ</b>: $ANSWER$</div><?endif?>
  <?if($ANSWER_URL$)?><div class="uc-answer-link"><a href="$ANSWER_URL$">Ответить</a></div><?endif?>
  </div>
</div>

<?else?>
<div itemscope itemtype="https://schema.org/Review" class="uComment $CLASS$">
  $ITEM_REVIEWED$
  <span class="uc-avatar">
  <?if($USER_AVATAR_URL$)?>
  <?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" alt="avatar" /></a>
  <?else?><a href="$PROFILE_URL$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" alt="avatar" /></a><?endif?>
  <?else?>
<div class="user-info">
<div class="user-info-avatar user_bg" id="avatar$NUMBER$"></div>
<div class="user-info-name" id="name$NUMBER$"></div>
</div>  
<?endif?>
  </span>
  <div class="uc-content">
  <div class="uc-top">
  <div class="uc-top-right">
  <?if($GOOD_COMMENT_URL$)?>
  <a href="$GOOD_COMMENT_URL$"><img alt="" src="/.s/img/icon/thumbu2.png" title="Хороший пост" style="margin:0 4px; vertical-align:middle;"></a>
  <?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  <span itemprop="ratingValue">$COMMENT_RATING$</span>
  </span>
  <?else?>$COMMENT_RATING$<?endif?>
  <a href="$BAD_COMMENT_URL$"><img alt="" src="/.s/img/icon/thumbd2.png" title="Плохой пост" style="margin:0 4px; vertical-align:middle;"></a>
  <?else?>
  <img alt="" src="/.s/img/icon/thumbu2_.png" title="Хороший пост" style="margin:0 4px; vertical-align:middle; opacity:.5; ">
  <?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  <span itemprop="ratingValue">$COMMENT_RATING$</span>
  </span>
  <?else?>$COMMENT_RATING$<?endif?>
  <img alt="" src="/.s/img/icon/thumbd2_.png" title="Плохой пост" style="margin:0 4px; vertical-align:middle; opacity:.5;">
  <?endif?>
  <?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>
  </div>
  <div class="uc-top-left">
  <a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + location.search + '#comEnt$ID$' ); if (document.getElementById('comEnt$ID$') ) { $('body').scrollTo({top:$('#comEnt$ID$').offset().top-54, left:0 }, 500 ); return false; }" name="ent$ID$"><b>$NUMBER$</b></a>
  <?if($SOC_TYPE$)?><img src="/.s/img/icon/social/16/$SOC_TYPE$.png" alt="" /><?endif?>
  <?if($USERNAME$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" href="$PROFILE_URL$" class="uc-profile-link"><span itemprop="name">$USERNAME$</span></a>
  <?else?>
  <?if($SOC_LINK$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" rel="nofollow" href="$SOC_LINK$" class="uc-profile-link"><span itemprop="name">$NAME$</span></a>
  <?else?><span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">$NAME$</span></span><?endif?>
  <?endif?>
  <span itemprop="datePublished" content="$DATE_FORMATTED$ $TIME$" class="uc-opacity">• $TIME$, $DATE$</span>
  </div>
  </div>
  <div itemprop="reviewBody" class="uc-message cMessage">$MESSAGE$</div>
  <?if($ANSWER$)?><div class="uc-answer cAnswer"><b>Ответ</b>: $ANSWER$</div><?endif?>
  <?if($ANSWER_URL$)?><div class="uc-answer-link"><a href="$ANSWER_URL$">Ответить</a></div><?endif?>
  </div>
</div>
<?endif?>

<script>
var stringToColor = function stringToColor(str) {
  var hash = 0;
  var color = '#';
  var i;
  var value;
  var strLength;

  strLength = str.length;

  for (i = 0; i < strLength; i++) {
  hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }

  for (i = 0; i < 3; i++) {
  value = (hash >> (i * 8)) & 0xFF;
  color += ('00' + value.toString(16)).substr(-2);
  }

  return color;
};

var name = '$USERNAME$';
var letter = name.substr(0, 2);
var backgroundColor = stringToColor(name);
var elementAvatar = document.getElementById('avatar$NUMBER$');
var elementName = document.getElementById('name$NUMBER$');

elementName.innerHTML = name;
elementAvatar.innerHTML = letter;
elementAvatar.style.backgroundColor = backgroundColor;
</script>
Прикрепления: 9601753.png(97.1 Kb)
Форум » Форум по uCoz: работа с сайтом - дополнения и изменения » Общий форум » Вид комментариев » Вывод первых букв логина пользователя вместо аватара (Ставим заглушку - букву вместо отсутствующего аватара)
  • Страница 1 из 1
  • 1
Поиск:

Хостинг от uCoz