Часть профиля в Сайдбар

Часть профиля в Сайдбар (Левый или правый блок сайта)

#1 24 февраля 2014 в 18:01
Всем привет!
Подскажите пожалуйста кто знает и делал, как перенести часть профиля в Сайдбар?
Левый или правый блок сайта, не важно.
Горизонтальные кнопки оставляем на месте, только фото пользователя и ссылки под ним.
Видел на нескольких сайтах такое, но что как сделать пока не понял.
Желательно в модуле реализовать, хотя если кто то уже делал по другому тоже вариант!
Скриншот приложил как хотелось бы перенести и куда.
Прикрепленный файл
20140224195711_r1pq4.png 109 Кб
#2 24 февраля 2014 в 18:14
Когда вы приходите в профиль пользователя, то видите работу компонента users.
Это вам нужно сделать модуль, который будет из базы забирать нужные вам данные и выводить их в сайдбар.
#3 24 февраля 2014 в 18:14
У нас это реализовано так.

  1. {if $id}
  2. <link rel="stylesheet" href="/templates/ekibastuz/css/usermenu.css" type="text/css" />
  3. <ul id="user-widget">
  4. <li class="user-info" id="usermenu">
  5. <span class="image">
  6. <a href="/users/{$id}/avatar.html"><img class="usr_img" src="{$avatar}"></a>
  7. <!-- Это аватарчик например-->
  8. </span>
  9. <span class="user">
  10. <a href="{profile_url login=$login}">{$nickname}</a>
  11. </span>
  12. {if $users_cfg.sw_msg}
  13. <span class="message">
  14. {if $newmsg.total}
  15. <a onclick="d_pm({$id});return false;" class="has_new" href="#" title="{$LANG.NEW_MESSAGES}: {$newmsg.messages}, {$LANG.NEW_NOTICES}: {$newmsg.notices}">{$LANG.USERMENU_MESS} ({$newmsg.total})</a>
  16. {else}
  17. <a onclick="d_pm({$id});return false;" href="#">{$LANG.USERMENU_MESS}</a>
  18. {/if}
  19. </span>
  20. {/if}
  21. <ul>
  22. {if $is_billing}
  23. <li>
  24. <a href="{profile_url login=$login}#upr_p_balance">
  25. Баланс:
  26. <span class="hover">{if $balance==1}1 экибакс{elseif $balance==2}2 экибакса{elseif $balance==3}3 экибакса{elseif $balance==4}4 экибакса{elseif $balance>4}{$balance} экибаксов{else}0 экибаксов{/if}</span>
  27. </a>
  28. </li>
  29. {/if}
  30. {if $is_admin}
  31. <li>
  32. <a href="/admin" target="_blank">
  33. {$LANG.USERMENU_ADMININTER}
  34. <span class="hover"> О, счастливчик! </span>
  35. </a>
  36. </li>
  37. {else}
  38. <li>
  39. <a href="/users/{$id}/editprofile.html">
  40. Настройки
  41. <span class="hover"> (всё о вас) </span>
  42. </a>
  43. </li>
  44. {/if}
  45. <li>
  46. <a href="/content/add.html">
  47. Добавить статью
  48. <span class="hover"> (или новость) </span>
  49. </a>
  50. </li>
  51. <li> <a href="/logout">
  52. Выход
  53. <span class="hover"> Уже уходите?😥</span>
  54. </a>
  55. </li>
  56. </ul>
  57. </li>
  58. </ul>
  59. <div class="module_pan"></div>
  60. {/if}
  61.  
Простите за этот кусочек.

  1.  
  2. #user-widget {width:235px;padding:0px;border-radius: 0px 0px 4px 4px;box-shadow: 0px 0px 25px rgba(0,0,0,.4);}
  3. #usermenu {width: 235px;color: #2980b9;font-size: 14px;}
  4. #user-widget .user-info {background: #34495e;border-radius: 0px 0px 4px 4px;overflow: hidden;}
  5. #user-widget .user {margin-top: 20px;display: inline-block;width: 150px;color: white;font-weight: bold;}
  6. #user-widget .message {font-size: 10px;display: inline-block;width: 150px;color: white;}
  7. #usermenu > ul {display: none;border-radius: 0px 0px 4px 4px;}
  8. #usermenu:hover > ul {display: block;}
  9. #user-widget ul {list-style-type: none;margin: 0;padding: 0;}
  10. #usermenu li {padding: 10px;background: white;}
  11. #usermenu ul li {text-align: left;font-size: 13px;border-top: solid 1px #eaeaea;}
  12. #usermenu ul li span:after {content: "\00a0";}
  13. #menu ul li:hover {text-align: left;}
  14. #usermenu ul {clear: both;}
  15. #user-widget .image {float: left;display: inline-block;width: 50px;height: 50px;font-size: 30px;text-align: center;line-height: 50px;color: #F7FFFF;background: white;border-radius: 27px;margin: 10px;border: solid 3px #dedede;overflow: hidden;}
  16. #user-widget img{margin: -8px -8px;}
  17. #usermenu a{text-decoration: none;color: #e67e22;}
  18. #usermenu a:hover {color: #e74c3c;}
  19. #usermenu a:hover > span.hover {transition: opacity 1s;opacity: .7;}
  20. #user-widget .hover {display: inline-block;margin-bottom: 4px;opacity: .0;font-size: 10px;color: white;background: #34495e;border-radius: 2px;}
  21. #user-widget .hover:before {content: "\00a0";}
  22.  
Конечный вариант получается такой. (меню выпадающее)


Разберёшься?
#4 24 февраля 2014 в 18:20

Разберёшься?

wormcop
немного не то...
я user_menu уже вывел куда мне нужно.
Сделал ссылки входа и выхода отдельно от остальных ссылок дополнительным модулем.
Вывести требуется как раз часть пользовательского профиля.
Иллюстрация
#5 24 февраля 2014 в 22:13
Ну что, кто нибудь делал уже что то подобное?
Столкнулся ещё вот с выводом Аватара в сайдбаре.
Есть две разные ссылки:
  1.  
  2. <a href="/users/{$id}/avatar.html"><img src="{$avatar}" alt="{$usr.nickname|escape:'html'}"></a>
  3. <a href="/users/{$id}/avatar.html"><img src="{$usr.avatar}" alt="{$usr.nickname|escape:'html'}" /></a>
  4.  
Первая выводит маленькую аватарку и на каждой странице нормально, а вторая выводит большую как в профиле, но только когда мы в профиле, если заходим в чужой профиль, то выводит большую фотку этого профиля, а на других страницах не выводит вообще ничего!
#6 24 февраля 2014 в 22:20
$usr.avatar на $id.avatar поменяй
#7 24 февраля 2014 в 22:30

  1.  
  2. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  3. <tr>
  4. <td align="center" valign="middle">
  5. <div class="usr_avatar">
  6. <img alt="{$usr.nickname|escape:'html'}" class="usr_img" src="{$usr.avatar}" />
  7. </div>
  8. {if $is_auth}
  9. <div id="usermenu" style="">
  10. <div class="usr_profile_menu">
  11. <table cellpadding="0" cellspacing="6" ><tr>
  12. {if !$myprofile}
  13. <tr>
  14. <td><img src="/templates/{template}/images/icons/profile/message.png" border="0"/></td>
  15. <td><a class="ajaxlink" href="javascript:void(0)" title="{$LANG.WRITE_MESS}: {$usr.nickname|escape:'html'}" onclick="users.sendMess('{$usr.id}', 0, this);return false;">{$LANG.WRITE_MESS}</a></td>
  16. </tr>
  17. {/if}
  18. <tr>
  19. <td><img src="/templates/{template}/images/icons/profile/ajaxmessages.png" border="0"/></td>
  20. <td><a class="ajaxlink" href="javascript:void(0)" title="Переписка: {$usr.nickname|escape:'html'}" onclick="d_pm('{$usr.id}');return false;">Переписка</a></td>
  21. </tr>
  22. {if !$myprofile}
  23. {if !$usr.isfriend}
  24. <tr>
  25. <td><img src="/templates/{template}/images/icons/profile/friends.png" border="0"/></td>
  26. <td><a class="ajaxlink" href="javascript:void(0)" title="{$usr.nickname|escape:'html'}" onclick="users.addFriend('{$usr.id}', this);return false;">{$LANG.ADD_TO_FRIEND}</a></td>
  27. </tr>
  28. {else}
  29. <tr>
  30. <td class="add_friend_ajax" style="display: none;"><img src="/templates/{template}/images/icons/profile/friends.png" border="0"/></td>
  31. <td class="add_friend_ajax" style="display: none;"><a class="ajaxlink" href="javascript:void(0)" title="{$usr.nickname|escape:'html'}" onclick="users.addFriend('{$usr.id}', this);return false;">{$LANG.ADD_TO_FRIEND}</a></td>
  32. <td class="del_friend_ajax"><img src="/templates/{template}/images/icons/profile/nofriends.png" border="0"/></td>
  33. <td class="del_friend_ajax"><a id="del_friend" class="ajaxlink" href="javascript:void(0)" title="{$usr.nickname|escape:'html'}" onclick="users.delFriend('{$usr.id}', this);return false;">{$LANG.STOP_FRIENDLY}</a></td>
  34. </tr>
  35. {/if}
  36. {/if}
  37. {if $myprofile}
  38. {if $cfg.sw_msg}
  39. <tr>
  40. <td><img src="/templates/{template}/images/icons/profile/message.png" border="0"/></td>
  41. <td><a href="javascript:void(0)" onclick="d_pm('{$usr.id}');return false;" title="{$LANG.MY_MESS}">{$LANG.MY_MESS}</a></td>
  42. </tr>
  43. {/if}
  44. {if $cfg.sw_photo}
  45. <tr>
  46. <td><img src="/templates/{template}/images/icons/profile/addphoto.png" border="0"/></td>
  47. <td><a href="/users/addphoto.html" title="{$LANG.ADD_PHOTO}">{$LANG.ADD_PHOTO}</a></td>
  48. </tr>
  49. {/if}
  50. <tr>
  51. <td><img src="/templates/{template}/images/icons/profile/avatar.png" border="0"/></td>
  52. <td><a href="/users/{$usr.id}/avatar.html" title="{$LANG.SET_AVATAR}">{$LANG.SET_AVATAR}</a></td>
  53. </tr>
  54. {if $usr.invites_count}
  55. <tr>
  56. <td><img src="/templates/{template}/images/icons/profile/invites.png" border="0"/></td>
  57. <td><a href="/users/invites.html" title="{$LANG.MY_INVITES}">{$LANG.MY_INVITES}</a> {$usr.invites_count}</td>
  58. </tr>
  59. {/if}
  60. <tr>
  61. <td><img src="/templates/{template}/images/icons/profile/edit.png" border="0"/></td>
  62. <td><a href="/users/{$usr.id}/editprofile.html" title="{$LANG.CONFIG_PROFILE}">{$LANG.MY_CONFIG}</a></td>
  63. </tr>
  64. {/if}
  65. {if $is_admin && !$myprofile}
  66. <tr>
  67. <td><img src="/templates/{template}/images/icons/profile/edit.png" border="0"/></td>
  68. <td><a href="/users/{$usr.id}/editprofile.html" title="{$LANG.CONFIG_PROFILE}">{$LANG.CONFIG_PROFILE}</a></td>
  69. </tr>
  70. {/if}
  71. <tr>
  72. <td><img src="/templates/{template}/images/icons/profile/karma.png" border="0"/></td>
  73. <td><a href="/users/{$usr.id}/karma.html" title="{$LANG.KARMA_HISTORY}">{$LANG.KARMA_HISTORY}</a></td>
  74. </tr>
  75. {if !$myprofile}
  76. {if $is_admin}
  77. {if !$usr.banned}
  78. <tr>
  79. <td><img src="/templates/{template}/images/icons/profile/award.png" border="0"/></td>
  80. <td><a href="/users/{$usr.id}/giveaward.html" title="{$LANG.TO_AWARD}">{$LANG.TO_AWARD}</a></td>
  81. </tr>
  82. {if $usr.id != 1}
  83. <tr>
  84. <td><img src="/templates/{template}/images/icons/profile/ban.png" border="0"/></td>
  85. <td><a href="/admin/index.php?view=userbanlist&do=add&to={$usr.id}" title="{$LANG.TO_BANN}">{$LANG.TO_BANN}</a></td>
  86. </tr>
  87. {/if}
  88. {/if}
  89. {if $usr.id != 1}
  90. <tr>
  91. <td><img src="/templates/{template}/images/icons/profile/delprofile.png" border="0"/></td>
  92. <td><a href="/users/{$usr.id}/delprofile.html" title="{$LANG.DEL_PROFILE}">{$LANG.DEL_PROFILE}</a></td>
  93. </tr>
  94. {/if}
  95. {/if}
  96. {/if}
  97. </table>
  98. </div>
  99. </div>
  100. {/if}
  101. </td>
  102. </tr>
  103. </table>
  104.  
Естественно меняй на нужные тебе параметры заместо $usr — $id прописывай.

P.S. Простите, что-то лагнуло. stuk
#8 25 февраля 2014 в 02:58

$usr.avatar на $id.avatar поменяй

wormcop
Не работает к сожалению.
Если в аватаре прописать так, то выводит <img src="1"/> и при переходе в другие профиля выводит ID того профиля.
Есть другие варианты?
#9 25 февраля 2014 в 03:53
Вывел пока что смог,
Осталось решить вопрос, как вывести большую аватарку вместо маленькой и что бы она на всех страницах отображала Аватар зарегенного пользователя, а не каждый раз разные:
Иллюстрация
Иллюстрация
#10 25 февраля 2014 в 12:47
src="{$avatar}"
smoke
#11 25 февраля 2014 в 14:47


src="{$avatar}"
smoke

wormcop

<img src="{$avatar}" — выводит маленькую фотку аватарки, а мне нужна большая.
#12 25 февраля 2014 в 16:39
Главная → Компоненты → Профили пользователей v1.10
Вкладка "Аватары"
Ширина большого аватара: ***
#13 25 февраля 2014 в 16:42

Главная → Компоненты → Профили пользователей v1.10 Вкладка "Аватары" Ширина большого аватара: ***

PolarOne
Нет, так тоже не катит, планируется выводить маленькие аватары в левом блоке, в модуле Новые пользователи.
Можно конечно в маленькой аватарке вбить размеры нужные для ширины левого блока, но если планируется выводить слишком много новых пользователей, то все эти изображения будут грузить страницу, даже если изменять размер фото в css.
Вариант отпадает!
#14 25 февраля 2014 в 16:45
{$record.avatar}
{$usr.avatar}
#15 25 февраля 2014 в 16:47

{$record.avatar}

PolarOne
Не катит, каждый раз разные выводит и маленькие :(
{$usr.avatar} — выводит большую только если ты в своём профиле, на других страницах не выводит.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.