Как создать голосование за фото и видео на Joomla (урок)

  • 27.01.2018
Как создать голосование за фото и видео на Joomla (урок)

В данном уроке мы подробно разберём, как организовать конкурсы на Joomla с голосованием за фотографии и подведением результатов на практическом примере, а также рассмотрим тонкости настройки и полезные приёмы компонента NorrCompetition.

Данная статья является пошаговым руководством по созданию конкурсов. В конце статьи можно посмотреть видео урок. Ну а мы приступаем к разбору.

Начинаем работу

Итак, прежде всего, нам нужно скачать дистрибутив NorrCompetition.

Страничка компонента

После покупки продукта, нужно зайти в личный кабинет сайта NorrNext и перейти в раздел My Downloads.

NorrCompetition - страница скачивания
NorrCompetition - страница скачивания

Перед глазами список связанных расширений, доступных к скачиванию. Это, конечно, сам компонент, модули (например, модуль участников или результатов), а также плагины (поисковый плагин и дополнение для карты сайта OSmap и др). После скачивания нужных дополнений можно идти в админку Joomla.

Компонент и дополнения к нему устанавливаются без каких либо танцев с бубном, классическим способом. Русская локализация идёт из коробки.

После установки создаётся дополнительное меню с пунктами меню. Подобный подход можно видеть в Kunena (экономит время и сразу видно, какие возможности доступны для фронта из коробки). После первой установки высвечивается приглашение установить демо-данные (скачивается 1 мб демо данных с сервера разработчика) или можно проследовать дальше. С учётом данного урока, демо данные нам не понадобятся. Поэтому сразу переходите в админку, благо, во всём интереснее разобраться самому, заодно и оценить usability продукта.

Панель администрирования компонента NorrCompetition
Панель администрирования компонента NorrCompetition

Структура компонента выглядит примерно следующим образом:

Категории. Минимум информации.
Поля. Пользовательские поля, которые привязываются к конкурсам. Можно создать заголовок, текст, текстовую область, чекбокс и др. В NorrCompetition используются свои пользовательские поля, не связанные с встроенными полями Joomla.
Конкурсы. В свою очередь, делятся на 3 типа: фото, видео и простой. После создания конкурса тип сменить нельзя, т.к. с ним будут связаны участники. Имеется имеется куча настроек (сгруппированных по вкладкам), которые можно менять под свои нужды. Конкурсы имеют два статуса: активный и завершённый.
Участники. Это item’ы компонента. Гости и пользователи сайта могут подавать заявки на добавление в конкурс своего участника через форму. После одобрения администратором, участник появляется в конкурсе.

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

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

При создании выбирается тип:

  • Заголовок. Это название участника. Фраза “имя” подходит далеко не во всех случаях, так как это может быть неодушевленный предмет (выставка, машина, картина) или кличка (животного), при чем в разных конкурсах может требоваться разный заголовок. Хорошо, что разработчики учли такой нюанс и предусмотрели возможность вебмастеру самостоятельно создавать и подключать нужное наименование;
  • Текст. Текстовое поле. Доступен фильтр для поля;
  • Текстовая область. Можно выбрать Text filters и текст не будет очищаться от HTML тегов (а значит, можно вставлять свои сниппеты вплоть до галерей и Google карты);
  • Календарь;
  • Чекбокс;
  • URL.

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

Компонент построен таким образом, чтобы максимально сосредоточиться на функционале голосований, оставив вебмастеру выбор, какими средствами решать другие задачи (авторизация, личный кабинет, баллы за действия и пр.) Таким образом, личный кабинет пользователя можно сделать на базе родного функционала Joomla или при помощи стороннего компонента типа EasySocial, социальная авторизация - при помощи Slogin и т.п. Об этом я расскажу чуть ниже.

Продумываем структуру конкурсов

На какую тему можно организовывать конкурсы? Всё зависит от полёта фантазии. Навскидку можно перечислить такие варианты:
Мисс Россия (и победительницы по городам), музыкальная группа месяца (подойдет для баров и клубов), наши блюда (конкурс на лучшие блюда в ресторане), лучшее авто, выступления на льду, детские рисунки, выставки картин, танцы, домашний питомец месяца, лучший студенческий мультфильм, трейлер года - можно чередовать как фото, так и видео конкурсы. Без использования медиа можно организовать голосование за лучший бренд или книгу. Таким образом, спектр применения варьируется от локальных сообществ, учебных заведений и клубов до городских порталов и web2.0 сайтов.

Рассмотрим пример создания сайта, посвящённого барам и клубам города. Это анонсы предстоящих событий (какие группы будут приедут), афиша, новости, репортажи и теперь конкурсы.

Были созданы такие конкурсы и поля:

Мисс месяца - самая обаятельная посетительница клуба (конкурс)

  • Имя - поле
  • Клуб - поле
  • Дата - календарь
  • Я в соц.сети - ссылка на страницу пользователя

Мистер месяца - лучший мужской образ (конкурс)

  • поля те же самые, как и в предыдущем конкурсе

Эпатаж месяца - видео выступление музыкальных групп (конкурс)

  • Группа - наименование
  • Клуб - поле
  • Описание - поле

Alternative art - конкурс с постановочными образами в студии / косплей

  • Наименование - наименование
  • Модель - поле
  • Фотограф - поле
  • Визажист - поле
  • Описание - текстовое поле
  • Я в соц.сети - URL
  • Согласен с правилами - чекбокс

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

Следующий конкурс - это видео выступления с концертов в клубах. Это помогает начинающим местным группам в рекламе. Они, в свою очередь, делают анонс конкурса в своих соц.группах и я получаю новых посетителей от каждой такой группы и голосование идёт более бойко. Здесь также присутствуют поля - клуб и описание (где кратко можно рассказать о концерте).

И, наконец, Alternative art - специальный конкурс, где творческие люди могут подать заявку на публикацию своих образов. Красивые фотосессии с привлечением фотографа, визажиста и что-то, сделанное своими руками (одежда, аксессуары и пр). Готические образы, стим-панк, косплей и тому подобное. Также прохожусь по соответствующим соц. группам и предлагаю принять участие в конкурсе. Это единственный конкурс на рассматриваемом мной сайте, где пользователи могут подать заявку на публикацию своих заявок. Поэтому введено поле-галочка с согласием с правилами сайта.

Под вышеперечисленные конкурсы я создал две категории: Развлечения и Образы.

Вот так выглядит создание поля:

Создание поля NorrCompetition
Создание поля

Ну что же, поля созданы:

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

Создаем конкурс

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

Создание конкурса NorrCompetition
Создание конкурса

Здесь параметры сгруппированы по вкладкам. В первой вкладке указываем заголовок, краткое и полное описание (с подключённым WYSIWYG редактором можно форматировать текст на своё усмотрение или вставить картинку), далее в правом сайдбаре нужно выбрать категорию и тип (Развлечения / фото). Выбрать тип можно только один раз, при создании.

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

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

Добавляем поля к конкурсу NorrCompetition
Добавляем поля к конкурсу

Следующая интересующая вкладка - параметры макета. Здесь можно управлять внешним видом конкурса.

Создание конкурса NorrCompetition - параметры макета
Создание конкурса - параметры макета

Параметры по умолчанию берутся из общих настроек, однако можно для каждого конкретного конкурса выставить нужное значение. Мне нужен таймер обратного отсчёта до окончания голосования - выставляю ручками значение в “показать”.

Аналогичные манипуляции проделываю с конкурсом Мистер месяца (тип: фото), поэтому не буду на этом подробно останавливаться.

Теперь настало время попробовать, что там с видео роликами. Создаю конкурс “Эпатаж месяца”, выбираю тип видео и подключаю нужные поля. Компонент поддерживает разнообразные видео сервисы, ссылки на ролики которых и обрабатываются. Кроме Youtube это ещё Vimeo, Instagram, Rutube и др. 
Создавать участников будем чуть позже.

Теперь самое интересное - создание конкурса Alternative Art. В отличие от предыдущих, особенность данного конкурса заключается в том, что мы разрешим пользователям подачу заявок. Заявки подаются с фронта через специальную форму. После одобрения администратором сайта, эти анкеты появятся в конкурсе. По умолчанию пользователи не могут подавать анкеты, поэтому я в настройках конкурса выставляю права, переопределив глобальные настройки. Конкурс > вкладка Права доступа и первые 4 параметра (Создать и сопутствующие действия) ставлю как Разрешено.

NorrCompetition: создание конкурса - права доступа
Создание конкурса - права доступа

Общие настройки компонента

Теперь перейдём в общие настройки. Это кнопка Настройки в верхнем правом углу админ.части компонента.

 

Вкладка Общие

Выбираю шаблон подходящий компонента (например, bootstrap3). Далее, параметр уведомление о заявках.
Что это такое? Когда пользователь создаёт на фронте участника, то администратор может получить об этом уведомление. В случае, если заявка одобрена и участник уже опубликован, то пользователь может на фронте отредактировать анкету, внеся изменения в данные (сменить фото, описание), но в этом случае анкета снимается с публикации и администратор снова должен проверить. Это хорошо, так как администратор может контролировать изменения. Итак, в данном параметре админки есть две опции: получать уведомления о новых и об измененных заявках. Ставлю обе опции.

Share кнопка - социальные кнопочки для шаринга страницы (кстати, поддерживается протокол Open Graph) - добавляем все доступные соц. сети.

Вкладка конкурс

Параметр Кол-во заявок - какое кол-во заявок может подать один пользователь. Ставлю 3.

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

Вкладка комментарии

Возможность подключить комментарии на странице участника. При этом, комментарии могут быть разными и выводятся в виде вкладок. Пусть это будет JComments.

Вкладка изображения

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

Вкладка права

Здесь мы выставляем, какие пользовательские группы имеют права на определённые действия. Весьма важный момент, поскольку по умолчанию голосование отключено. Пропускаю группу Guest и нажимаю на Registered - ставлю Голосовать как разрешено.
Всё, теперь авторизованные пользователи смогут голосовать за участников.

Добавление участников

Часть участников я добавлю из админки. Выглядит это так:

Добавление участника из админки NorrCompetition
Добавление участника из админ.панели

Помните, я чуть выше писал про то, что авторизованные пользователи могут подавать заявки с фронта? Вот как это выглядит:

Подача заявки с фронта NorrCompetition
Подача заявки с фронта NorrCompetition

Вот и все пользовательские поля, которые мы подключили, включая чекбокс Согласен с правилами.

После того, как заявка подана, она должна быть одобрена модератором и только после этого появится в конкурсе. Кстати, пользователь может также создавать и конкурсы с фронта (также модерируется администратором). Но мне это просто не нужно.
А вот так выглядит страница Мои заявки:

Страница Мои Заявки в NorrCompetition
Страница "Мои Заявки" - пользователь может внести изменения в своих анкетах

Список участников пользователя, возможность редактирования и перехода на страницу участника. Всё просто и лаконично.

Активный конкурс со стороны фронта

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

Активный конкурс в NorrCompetition
Активный конкурс с таймером отсчёта
Страница участника NorrCompetition
Страница участника

Конвертируем посетителей в пользователей

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

Поскольку голосовать за 3 конкурса могут только авторизованные пользователи, то первоочередной задачей является социальная авторизация, дабы юзеры в пару кликов могли авторизоваться и проголосовать, без нудной регистрации с подтверждением по e-mail. Конечно, нужен сторонний плагин или расширение. Я использовал Slogin - компонент, обеспечивающий такой функционал и поддерживающий соц.сеть Вконтакте. Теперь модуль авторизации содержит кнопочки соц.сетей.

Теперь я хочу поменять фразу в кнопке голосования "у вас недостаточно прав для голосования" на произвольную, призывающую авторизоваться. Это легко можно сделать при помощи переопределения языковых констант Joomla.

Расширения > Языки > Переопределения констант > Создать.

Осуществляю поиск по значению, указываю свой вариант и сохраняю. Теперь фраза такая: “Пожалуйста, авторизуйтесь при помощи соц.сети для голосования”

Переопределение языковой константы средствами Joomla
Переопределение языковой константы средствами Joomla

Настройка голосования

Весьма немаловажный момент - возможность настройки голосования в соответствии с задачами конкурса. Для этого нужно перейти в общие настройки во вкладку “Конкурс” > Настройки голосования.

Здесь можно выставить частоту голосования, максимальное кол-во голосов, которые может отдать пользователь за участника (например, возможность голосовать повторно), режимы проверки для защиты от нечестного голосования и пр.
Традиционно, эти параметры можно переопределить в настройках конкурса.

Управление активными конкурсами

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

Чуть выше я писал, что из коробки компонент умеет отсылать уведомления на e-mail о новых и об изменённых заявках. Для этого нужно в общих настройках выставить соответствующие значения.

Также в админ.панели компонента можно увидеть список заявок, ожидающих подтверждения. По клику переходим в режим редактирования. Если контент соответствует правилам конкурса - публикуем участника.

Заявки, ожидающие подтверждения в NorrCompetition
Заявки, ожидающие подтверждения

Модерирование изменений

Пользователь с фронта может отредактировать участника, исправив и дополнив, например, текстовое поле с описанием (нужно не забыть выставить соответствующие права на изменение в настройках). В этом случае, участник блокируется и становится недоступным в конкурсе до тех пор, пока не пройдёт проверку модератором. На этом я хотел бы остановиться подробнее.

Страница Мои заявки в NorrCompetition
Страница Мои заявки

В списке участников в админ.панели изменённая анкета выглядит вот так:

Индикатор Изменён в списке участников NorrCompetition
Админ.панель. Индикатор изменённых анкет на странице участников

Появляется специальный значок, идентифицирующий анкету как изменённую пользователем.

Заходим в режим редактирования и видим режим сравнения изменённых данных: слева прежняя версия, справа - изменённые данные. Медиа контент и поля, которые были пользователем изменены, подсвечены жёлтым цветом. Модератор также может вносить изменения в поля.

Сравнение текущих и изменённых данных участника NorrCompetition
Сравнение текущих и изменённых данных участника

Если всё в порядке - ставим внизу страницы параметр в Подтверждён и сохраняем. Этот участник снова появился в конкурсе.

Дополнительные уведомления

Стандартные два уведомления помогают администратору с модерированием конкурса. Но мне нужно уведомлять ещё и пользователя, подавшего заявку об определённых действиях. Для этого я устанавливаю плагин NorrCompetition Notifications, идущий в комплекте с компонентом.

Плагин обеспечивает отправку уведомлений на E-mail при следующих действиях:

  • Участник опубликован
  • Участник снят с публикации
  • Участник подтверждён
  • Участник отправлен на модерацию
  • Участник отклонён
  • Участник получил голос

В принципе, это более чем покрывает нужды пользователя.

Завершённый конкурс. Вывод результатов

Итак, заданное время истекло и конкурс поменял статус на завершенный. Вместе с этим меняется и формат вывода участников.

Статус Гран-при

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

Участник со статусом гран-при в NorrCompetition
Участник со статусом гран-при

Таким образом, администратор сайта может назначать участнику статус гран-при по результатам симпатий редакции или членов жюри.

Сортировка победителей по пользовательским полям

Здорово, когда можно подвести итоги и увидеть рейтинг участников от большего кол-ва голосов к меньшему. Но... В зависимости от тематики конкурса может понадобиться сгруппировать победителей по полям. Например, по городу или по возрасту - выводим 3 победителя города Москва, ниже 3 победителя города Санкт-Петербург и т.д. Город - это наше созданное поле и NorrCompetition умеет сортировать результаты так, как я описал.

Для этого нужно перейти в режим редактирования конкурса > вкладка “Параметры макета” и ищем параметры, сгруппированные под заголовком “Настройки завершенного конкурса”:

Параметры NorrCompetition
Участник со статусом гран-при

Кол-во участников в результатах - здесь можно указать число победителей, которые будут отображаться первыми в результатах. Традиционно это 3, так как ниже блока победителей все равно будут выводиться все участники.
Поле группировки - здесь выбираем пользовательское поле, по которому будут сортироваться победители. На примере моего сайта это не город, а поле клуб.
Кол-во участников на поле - об этом параметре чуть ниже. Также ставлю значение 3.

Победители выводятся по следующей схеме:
Сперва визуально отличающийся блок гран-при (если такой статус есть у какого либо участника), ниже выводится блок с победителями вне зависимости от поля. И уже ниже, если мы задали группировку по полю, будут выводиться победители из каждого такого поля и так на убывание. Если группировка по полю не задана, то будут выведены все остальные участники.

Победители в завершенном конкурсе с группировкой по полю - NorrCompetition
Победители в завершенном конкурсе с группировкой по полю

Другие возможности компонента

Какие ещё есть интересные фишки?
Многоязычность. Компонент поддерживает создание многоязычного контента. Вы можете перевести на другой язык названия конкурсов, категорий и полей, а также гран при. Заголовок и контент участника локализовать нельзя. Это сделано, чтобы не усложнять процесс подачи заявки конечному пользователю, который не будет заботиться о переводе описания на другие языки.

Локализации. Да, для NorrCompetition доступны локализации на множество популярных языков: немецкий, французский, испанский, португальский, итальянский, нидерландский, чешский и пр. Также имеется украинская локализация. Доступные локализации можно скачать здесь.

Монетизация. Из платных дополнений можно обратить внимание на правила AltaUserPoints - с их помощью можно начислять баллы за выполняемые действия и ставить органичения. Пример: -1 балл за голос. Чтобы проголосовать, нужно купить баллы. Для этого потребуется уже плотно заниматься AUP и искать платёжный плагин к нему, но это другая история.

Альтернативный способ монетизации - настроить NorrCompetition таким образом, чтобы право голосовать было только у пользователей определенной пользовательской группы. Ставите любой компонент для организации подписки, поддерживающий платёжные способы СНГ, и вуаля - юзеры смогут купить тарифный план на определённый период (5 дней, 2 недели, месяц, 3 месяца и пр.), после успешной оплаты пользователь будет назначен в специальную группу, которую мы уже настроили в NorrCompetition. Он сможет голосовать, подавать заявки и пр. Закончился период подписки - юзера обратно назначили в Registered users и нужно снова покупать подписку.

Технически это реализуемо и хороший задел на будущее, когда сайт подраскрутится и придёт время выжать с него копеечку :-)

Что ожидается в будущих версиях?

Регенерация мини-эскизов. Вы задаете определённый размер изображениям, пользователи загружают фотки, Спустя какое-то время может возникнуть необходимость смены дизайна сайта и понадобится изменить пропорции изображений. Кнопочка “сгенерировать изображения” поможет решать задачу без ручной перезагрузки фотографий.

Расширенная статистика. Сбор расширенной статистики по конкурсам. Диаграммы и привычные рюшечки в отчёте.

Подведём итог

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

Компонент имеет удобную структуру - из коробки идёт несколько тем под разные фреймворки, тему можно переопределить через Joomla шаблон, код чистый и аккуратный, есть поддержка комментариев, часть функционала вынесена в дополнения, к тому же, API позволяет написать собственное дополнение.

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

Видео урок

Основные возможности NorrCompetition за 10 минут

Демо Подробнее Документация

Это интересно:

Евгений Сивоконь
Россия , Краснодар

Комментарии  

Евгений Сивоконь
0 # Евгений Сивоконь 27.01.2018 17:26
Обсуждение компонента на форуме: joomlaforum.ru/.../...
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору

Добавить комментарий

Joomla!® CMS — пожалуй, лучшая система управления контентом с открытым исходным кодом

Joomla! — это больше, чем просто программное обеспечение, это люди, включающие разработчиков, дизайнеров, системных администраторов, переводчиков, копирайтеров, и, что самое главное — простых пользователей.

Мы рады пригласить вас в ряды нашего сообщества!

Скачать Joomla! 3 Документация Joomla! CMS Свернуть

Расширения Joomla

Новости портала

Новое в блогах

Видео