Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

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

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

Рабочий пример вы можете увидеть перейдя по ссылке.

Особенности скрипта:

• работа через API;
• отсутствие многочисленных GET-запросов;
• вывод аватаров на страницах «Ленточный вариант форума», «Главная страница форума», «Разделы форума», «Форум», «Подписки участника»;
• при смене аватара в настройках профиля, новый аватар будет обновлён и на форуме;
• вывод аватара юзера;
• вывод индикатора online/offline(зеленая/крассная точка на аватаре) юзера;
• смена отсутствующего аватара;
• вывод цветных аватаров с первой буквой логина;

Скрипт тестировался для модулей:

• форум;

Примечания:

• скрипт не тестировался в браузере ниже IE9;

Требования к установке:

• активированное PHP;
• использование базового API;

Первый шаг: активация API и PHP

Активация API

Для работы скрипта, нам необходимо включить возможность использования API, сделать это вы можете перейдя в
Панели управления » Настройки » Общие настройки

Почти в самом низу страницы найдите опцию «РАЗРЕШИТЬ ИСПОЛЬЗОВАНИЕ API», установите напротив неё галочку, затем прокрутите страницу вниз и сохраните изменения.

Активация PHP

Убедитесь, что на вашем сайте активна услуга PHP. Для этого перейдите на главную страницу панели управления и обратите внимание на правую часть страницы. В случае наличия активной услуги вы увидите текст "PHP детали".

– перейдите к следующему шагу установки, PHP-услуга у вас активна. Если такой текст отсутствует, значит услуга PHP отключена или просрочена. Для подключения PHP необходимо оплатить премиум пакет, включающий возможность использования PHP-скриптов, либо заказать данную услугу отдельно.

Второй шаг: загрузка скриптов на FTP PHP

Этап 1. Установка пароля

Перейдите на главную страницу панели управления вашим сайтом, в правой верхней части нажмите на ссылку «PHP ДЕТАЛИ».

В открывшемся окне кликните на ссылку: «ПАРОЛЬ НЕ УСТАНОВЛЕН».

Мы попадем на страницу установки пароля на FTP PHP. Заполните поля, продолжайте следовать инструкциям системы.

Этап 2. Подключение к PHP FTP серверу

После установки пароля, скачайте FTP-клиент, рекомендуем бесплатный FTP клиент FileZilla. После установки программы, в верхней части вводим параметры подключения:

• Сервер: s2000.ucoz.net
• Логин (FTP login): введите свой логин, который указан в меню "PHP детали"
• Пароль: пароль который вы ввели ранее в специальном разделе

После заполнения полей нажмите на кнопку «БЫСТРОЕ СОЕДИНЕНИЕ».

Этап 3. Загрузка скриптов на PHP FTP сервер

После успешного подключения вы увидите каталог под именем «SCRIPTS» в правой части окна программы. Обязательно переходим в этот каталог двойным кликом по нему.

Теперь загрузите в этот каталог папку из архива со скриптом «getUserAva». Загрузить легко, просто перетащите эту папку в правый диалог (где отображаются каталоги и файлы хранящиеся на сервере).

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

Третий шаг: Установка прав для всех групп

Для установки нужных прав, перейдите в Панели управления » Пользователи » Группы пользователей » Установка прав для всех групп, раскройте список + Пользователи и найдите пункт «Просмотр пользовательских страниц»

Установите галочки всем группам как показанно на скрине выше, затем прокрутите страницу вниз и сохраните изменения.

Четвертый шаг: загрузка файлов

Этап 1. Загрузка файлов в папку js

Перейдите в Панель управления » Файловый менеджер

В правом верхнем углу кликните на кнопку «Создать папку», введите название папки js.

Теперь загрузите в эту папку файл «getUserAva.js».

Этап 2. Загрузка файлов в папку img

Перейдите в Панель управления » Файловый менеджер

В правом верхнем углу кликните на кнопку «Создать папку», введите название папки img.

Теперь загрузите в эту папку файл «noava.png».

Пятый шаг: установка стилей

Перейдите в Панель управления » Управление дизайном » Общие шаблоны » Таблица стилей (CSS) в самый низ шаблона разместите следующий код:

[class^="js-get-user-"] {
    background-color: #fff;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: relative;
    text-align: center;
}

a[class^="js-get-user-"] {
    text-decoration: none;
}

[class^="js-get-user-"] .js-set-user-ava {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 100%;
    display: block;
    padding-bottom: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

[class^="js-get-user-"]:before {
    background-color: #ed5a5a;
    -webkit-box-shadow: 0 0 0 3px #fff;
    box-shadow: 0 0 0 3px #fff;
    border-radius: 100%;
    -webkit-transform: translate(-50%,-4px);
    -moz-transform: translate(-50%,-4px);
    -ms-transform: translate(-50%,-4px);
    -o-transform: translate(-50%,-4px);
    transform: translate(-50%,-4px);
    width: 8px;
    height: 8px;
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 2;
}

[class^="js-get-user-"].online:before {
    background-color: #5fcf80
}

[class^="js-get-user-"]:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: attr(set-nick);
    display: block;
    line-height: 50px;
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
}

Шестой шаг: установка кода

Этап 1. Вставить код в шаблон Вид категории/раздела

Перейдите в Панель управления » Управление дизайном » Форум » Вид категории/раздела и в то место, где желаете видеть аватар и статус, разместите следующий код:

<a href="$FIRST_POST_LINK$" set-nick="<?if($LAST_POST_AUTHOR_PROFILE$)?><?substr(substr($LAST_POST_AUTHOR_PROFILE$,strpos($LAST_POST_AUTHOR_PROFILE$,'>')+1,strrpos($LAST_POST_AUTHOR_PROFILE$,'<')-strpos($LAST_POST_AUTHOR_PROFILE$,'>')-1),0,1)?><?else?><?substr($LAST_POST_AUTHOR$,0,1)?><?endif?>" class="js-get-user-<?if($LAST_POST_AUTHOR_PROFILE$)?><?substr($LAST_POST_AUTHOR_PROFILE$,strpos($LAST_POST_AUTHOR_PROFILE$,'>')+1,strrpos($LAST_POST_AUTHOR_PROFILE$,'<')-strpos($LAST_POST_AUTHOR_PROFILE$,'>')-1)?><?else?>$LAST_POST_AUTHOR$<?endif?>">
    <span class="js-set-user-ava"></span>
</a>

Этап 2. Вставить код в шаблон Вид темы/опроса

Перейдите в Панель управления » Управление дизайном » Форум » Вид темы/опроса и в то место, где желаете видеть аватар и статус, разместите следующий код:

<a href="$FIRST_POST_LINK$" class="js-get-user-$LAST_POST_AUTHOR$" set-nick="<?substr($LAST_POST_AUTHOR$,0,1)?>">
    <span class="js-set-user-ava"></span>
</a>

Этап 3. Вставить код в шаблон Общий вид страниц форума

Перейдите в Панель управления » Управление дизайном » Форум » Общий вид страниц форума

Добавьте код перед закрывающим тегом </body>:

<script src="/js/getUserAva.js"></script>

Седьмой шаг: настройка и использование

Тонкая настройка.

Для управления тонкими настройки, откройте файл getUserAva.js в любом текстовом редакторе, находящийся в папке js (которую вы загружали на FTP). Изменять можно следующие настройки:

• var config_ava = false; — переменная отвечает за вывод аватара, если у пользователя он не установлен (значение false – вывод аватара с цветным задним фоном и первой буквой логина, true – вывод аватара картинкой указанный в config_path_ava);
• var config_path_ava = '/img/noava.png'; — полный путь до аватара;