Скрыть объявление
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

Зарегистрируйтесь на форуме, чтобы стать полноценным участником сообщества!

Красивые опросы как вконтакте для dle

Тема в разделе "Плагины DLE", создана пользователем Artisteer, 13 янв 2019.

13.01.19 в 19:33
07.01.22 в 17:42
12
2.385
11
  1. TopicStarter Overlay
    Artisteer

    Artisteer Бывалый

    Регистрация:
    14 мар 2018
    Сообщения:
    107
    Лучших ответов:
    1
    Рейтинги:
    +30 / 3 / -0
    Здравствуйте. Я решил у себя на сайте модифицировать стандартные опросы в полной новости и сделать их похожими на те, что Вконтакте. Использую стандартные средства Dle, за исключение нескольких правок. Плагин и стили публикую бесплатно для всех.

    6.png

    Суть реализации проста:
    Мы создаём два дополнительных поля. В одном прописываем цвет, а в другом картинку. Таким образом можно внешний вид опроса в каждой новости сделать уникальным. Хорошо бы ещё, если бы голос засчитывался, когда выбираешь нужный ответ, без нажатия на кнопку "Голосовать". Но как это сделать, я не знаю. Правки движка я сделал тоже по минимуму, поскольку не разбираюсь в php. Я нашёл нужные файлы и только прописал в них классы некоторым элементам. В остальном всё стандартно.
    Примечание: Речь идёт только о вопросах в полной новости, которые выводятся тегом {poll} в fullstory.tpl.

    Смотрим скриншоты:
    Вот так выглядит внешний вид опроса:
    1.png

    Вот после того, как человек проголосовал и обновил страницу:
    2.png

    Как я уже сказал, цвет прописывается в дополнительном поле. Вы можете указать там совершенно любой:
    3.png 4.png

    Вот пример другого опроса с длинным заголовком:
    5.png

    Это пример опроса, где разрешен выбор нескольких ответов:
    6.png

    А это пример длинного опроса:
    7.png

    1. Загружаем плагин.

    2. Создаём дополнительные поля:
    1) Название: color
    Описание: Цвет для опроса
    Подсказка: Цвет для опроса в формате #5d2cb3 или rgb(93, 44, 179).
    Одна строка
    Использовать при желании
    2) Название: img
    Описание: Картинка для опроса
    Подсказка: Картинка для опроса в формате /uploads/posts/2019-01/1544358373_img.jpg.
    Одна строка (Можно выбрать тип "Загружаемое изображение", но в этом случае в fullstory нужно изменить вывод доп. поля с [xfvalue_img] на [xfvalue_image_url_img].)
    Использовать при желании

    3. В шаблон fullstory.tpl добавляем в нужное место код:
    HTML:
    [xfgiven_img]
    <div class="fullpoll">
    <div class="poll_img" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), [xfvalue_color] 80%);"></div>
    <div style="background: url([xfvalue_img]); background-size: cover; background-position: center;">{poll}</div>
    </div>
    [/xfgiven_img]
    4. Содержимое шаблона poll.tpl заменить на:
    HTML:
    <div class="fpoll">
    <div class="fpoll-title">{question}</div>
    <div class="fpoll-block">
    [not-voted]<span class="fpoll-span">Узнайте, сколько человек думает также, как вы</span>[/not-voted]
    [voted]<span class="fpoll-span">Спасибо, что приняли участие в опросе :)</span>[/voted]
    
    <div class="vote_list">{list}</div>
    
    [voted]<div class="fpoll-info">[declination={votes}]Проголосова|л|ли[/declination] <b>{votes}</b> [declination={votes}]челове|к|ка[/declination]</div>[/voted]
    
    [not-voted]
    <div class="vote-btn">
    <button class="btn-poll" type="submit" onclick="doPoll('vote', '{news-id}'); return false;" >Голосовать</button>
    <button class="btn-poll" onclick="doPoll('results', '{news-id}'); return false;" >Результаты</button>
    </div>
    <span class="fpoll-info">Выберите ответ и нажмите кнопку <b>Голосовать</b></span>
    <div class="fpoll-info" style="margin-top: -15px;">[declination={votes}]Проголосова|л|ли[/declination] <b>{votes}</b> [declination={votes}]челове|к|ка[/declination]</div>
    [/not-voted]
    </div>
    </div>
    
    5. В css в конец файла вставить:
    Код:
    .fullpoll{position:relative;border-radius:10px;overflow:hidden;margin-top:20px;}
    .poll_img{background-color:rgba(255, 255, 255, 0);background:-o-linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(0,0,0,.6));background:linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0,0,0,.6));position:absolute;left:0;top:0;right:0;bottom:0;z-index:0;border-radius:10px;}
    .fpoll{position:relative;padding:50px 0px 10px 0px;z-index:1;}
    .fpoll-title{font-size:22px;text-align:center;font-weight:600;color:#ffffff;padding:0px 40px;}
    .fpoll-block{max-width:400px;margin:auto;}
    .vote-btn{text-align:center;margin-top:15px;}
    .fpoll-span{display:block;color:#ffffff;text-align:center;font-size:13px;padding:5px 0px 30px 0px;}
    .fpoll-info{display:block;text-align:center;color:rgba(255, 255, 255, 0.8196078431372549);font-size:13px;padding-top:10px;}
    .fpoll .vote_list input[type="radio"]{vertical-align:top;margin:0 3px 0 0;width:17px;height:17px}
    .fpoll .vote_list input[type="radio"] + label{cursor:pointer;margin-bottom:0px;}
    .fpoll .vote_list input[type="radio"]:not(checked){position:absolute;opacity:0}
    .fpoll .vote_list input[type="radio"]:not(checked) + label{width:100%;display:block;color:#ffffff;font-weight:400;position:relative;background:rgba(255, 255, 255, 0.22);border-radius:4px;padding:0px 10px 0px 35px;text-shadow:0 0px 3px #8c8c8c;line-height:35px;}
    .fpoll .vote_list input[type="radio"]:not(checked) + label:hover{background:rgba(255, 255, 255, 0.32);transition:all 350ms;}
    .fpoll .vote_list input[type="radio"]:not(checked) + label:before{content:'';position:absolute;top:10px;left:10px;width:15px;height:15px;border-radius:13px;background:#ffffff;}
    .fpoll .vote_list input[type="radio"]:not(checked) + label:after{content:'';position:absolute;top:13px;left:13px;width:9px;height:9px;border-radius:50%;background:#b7b7b7;transition:all .2s;}
    .fpoll .vote_list input[type="radio"]:checked + label:before{background:#ffffff;}
    .fpoll .vote_list input[type="radio"]:checked + label:after{background:#3F51B5;}
    .fpoll .vote_list input[type="checkbox"]{vertical-align:top;margin:0 3px 0 0;width:17px;height:17px}
    .fpoll .vote_list input[type="checkbox"] + label{cursor:pointer;margin-bottom:0px;}
    .fpoll .vote_list input[type="checkbox"]:not(checked){position:absolute;opacity:0}
    .fpoll .vote_list input[type="checkbox"]:not(checked) + label{width:100%;display:block;color:#ffffff;font-weight:400;position:relative;background:rgba(255, 255, 255, 0.22);border-radius:4px;padding:0px 10px 0px 35px;text-shadow:0 0px 3px #8c8c8c;line-height:35px;}
    .fpoll .vote_list input[type="checkbox"]:not(checked) + label:hover{background:rgba(255, 255, 255, 0.32);transition:all 350ms;}
    .fpoll .vote_list input[type="checkbox"]:not(checked) + label:before{content:'';position:absolute;top:10px;left:10px;width:15px;height:15px;border-radius: 4px;background:#ffffff;}
    .fpoll .vote_list input[type="checkbox"]:not(checked) + label:after{content:'';position:absolute;top:13px;left:13px;width:9px;height:9px;border-radius: 2px;background:#b7b7b7;transition:all .2s;}
    .fpoll .vote_list input[type="checkbox"]:checked + label:before{background:#ffffff;}
    .fpoll .vote_list input[type="checkbox"]:checked + label:after{background:#3F51B5;}
    .vote_list{text-align:left;}
    .fpoll .pollprogress{color:#ffffff;text-shadow:0 0px 3px #8c8c8c;height:35px;margin-bottom:5px;background:rgba(255, 255, 255, 0.22);border-radius:4px;margin-top:0px;}
    .fpoll .pollprogress span{height:35px;background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;background-size:40px 40px;}
    .fpoll-result{max-width:400px;width:100%;height:35px;position:absolute;line-height:35px;padding:0px 10px;overflow:hidden;}
    .fpoll-text{float:left;padding-right:7px;font-weight:400;}
    .fpoll-proc{float:right;font-weight:600;font-size:13px;}
    .pollanswer{margin-bottom:5px;}
    .btn-poll{background:#ffce10;color:#262626;border:none;outline:none;font-size:14px;font-weight:500;line-height:26px;padding:7px 20px;display:inline-block;width:auto;text-transform:uppercase;transition:background 350ms ease-in-out 0s;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;}
    .btn-poll:hover{background:#262626;color:#ffce10;transition:350ms;}
    Важно:
    1. Я проверял как выглядит опрос на нескольких шаблонах. И всё равно немного приходится донастраивать стили для конкретного шаблона. Через консоль браузера, думаю, это будет не сложно сделать. Можете поменять классы кнопок btn-poll на свои.
    2. В poll.tpl я использую [declination] для склонения слов. Вам нужно самостоятельно его настроить, потому что я не вдавался в подробности.
    3. Адаптивность делайте сами, если есть такая необходимость. Но по-моему, опрос итак нормально отображается на телефонах.


    -----Добавлено 10.03.19: Идея для страницы с опросами.
    На сайте можно организовать отдельную страницу со всеми опросами!
    1. Создаём категорию "Опросы". В настройках отмечаем галочки:
    Запретить публиковать на главной
    Запретить рейтинг для публикаций
    Запретить комментарии для публикаций
    Исключить из поиска по сайту.

    2. Указываем созданной категории свой Шаблон короткой новости, например shortstory-opros.tpl.

    3. Создаём этот самый шаблон короткой новости shortstory-opros.tpl. В него вставляем код:
    HTML:
    <div class="fullpoll">
    <div class="poll_img" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), {short-story limit="100"} 80%);"></div>
    <div style="background: url({image-1}); background-size: cover; background-position: center;">{poll}</div>
    </div>
    Обратите внимание, что цвет выводится {short-story limit="100"}, а фон {image-1}. То есть Вы добавляете новость, в которой заполняете только краткое описание. В него вставляете картинку (она выведется тегом {image-1}) и пишите цвет, например #c1c1c1c (он выведется в шаблоне тегом {short-story limit="100"}). Далее добавляете опрос.

    Вместо {short-story limit="100"} цвет можно выводить и через дополнительное поле, как и картинку. Просто мне не хотелось для этого использовать отдельные доп. поля.

    Не забудьте скопировать стили и установить плагин.

    4. В общий настройках скрипта во вкладке "Новости" можно отметить галочкой "Скрывать ссылку на полную новость". А при создании самой публикации можно отметить галочками "Запретить индексацию страницы для поисковиков" и "Исключить из поиска по сайту", а также выставить ограничение для Гостей и Пользователей, чтобы ни у кого не было доступа в полную новость.

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

    Для примера покажу скриншоты. Вот так заполняется новость:
    картинка.png

    А вот так выглядит на сайте:
    картинка2.png

    Эти опросы я сделал для себя, но решил поделиться вариантом и с другими бесплатно. На звание кодера не претендую и надеюсь, что кто-то из настоящих кодеров вдохновится и сделает что-то такое, но получше. Если хотите поблагодарить, вот: R371079724300

    Плагин работает на Dle 13.1 и 13.2. На остальных версиях не проверял.
     

    Вложения:

    • poll.rar
      Размер файла:
      648 байт
      Просмотров:
      84
    #1 Artisteer, 13 янв 2019
    Последнее редактирование: 10 мар 2019
    • Нравится Нравится x 11
    • Полезно Полезно x 3
    • Лучший Лучший x 2
  2. synlivcho

    PRO Users

    Регистрация:
    24 окт 2018
    Сообщения:
    749
    Лучших ответов:
    2
    Рейтинги:
    +99 / 30 / -0
    За четно!:)
     
    • Нравится Нравится x 1
  3. hent4iboys

    Забанен

    Регистрация:
    31 авг 2018
    Сообщения:
    695
    Лучших ответов:
    2
    Рейтинги:
    +139 / 27 / -0
    на 12дле не работает :(
     
  4. TopicStarter Overlay
    Artisteer

    Artisteer Бывалый

    Регистрация:
    14 мар 2018
    Сообщения:
    107
    Лучших ответов:
    1
    Рейтинги:
    +30 / 3 / -0
    Что конкретно не работает? В dle 12.1 такой же код, что и в плагине.
     
  5. hent4iboys

    Забанен

    Регистрация:
    31 авг 2018
    Сообщения:
    695
    Лучших ответов:
    2
    Рейтинги:
    +139 / 27 / -0
    ну тип,
    та я кэш не обновил прост :)
     
  6. synlivcho

    PRO Users

    Регистрация:
    24 окт 2018
    Сообщения:
    749
    Лучших ответов:
    2
    Рейтинги:
    +99 / 30 / -0
    Artisteer я пока не добрался до своего аниме, я добавлю позже. Скинь только яндекс кошелек, за работу четкую даже сам дьявол платит. Вот у меня шаб под тему подходит, куда эти опросники кинуть? Красиво , может на ссыклку внутреннею. Давай аниме монстер идеи, куда бл...эти опросники сунуть ?
     
    #6 synlivcho, 14 янв 2019
    Последнее редактирование: 15 янв 2019
  7. hent4iboys

    Забанен

    Регистрация:
    31 авг 2018
    Сообщения:
    695
    Лучших ответов:
    2
    Рейтинги:
    +139 / 27 / -0
    можешь как у стима,номинация "Лучшее аниму года в жанре драма" т.п
     
  8. TopicStarter Overlay
    Artisteer

    Artisteer Бывалый

    Регистрация:
    14 мар 2018
    Сообщения:
    107
    Лучших ответов:
    1
    Рейтинги:
    +30 / 3 / -0
    Их никуда не сунешь кроме полной новости. Если публикуете статьи или новости, то можно вконце них вставлять. Например опубликовали новость с топом аниме, которые должны выйти в 2019 году, а в конце вставляете опрос «Какое аниме будете ждать?» например.
     
    • Нравится Нравится x 1
  9. synlivcho

    PRO Users

    Регистрация:
    24 окт 2018
    Сообщения:
    749
    Лучших ответов:
    2
    Рейтинги:
    +99 / 30 / -0
    Я понял бро, завтра думаю добавлю посмотрю как будет выглядеть.
     
  10. TopicStarter Overlay
    Artisteer

    Artisteer Бывалый

    Регистрация:
    14 мар 2018
    Сообщения:
    107
    Лучших ответов:
    1
    Рейтинги:
    +30 / 3 / -0
    Мне в голову пришла классная мысль по поводу организации этих опросов на сайте. Чуть позже напишу, когда себе доделаю.
     
  11. wasder12

    wasder12 Зелёный

    Регистрация:
    4 мар 2019
    Сообщения:
    1
    Лучших ответов:
    0
    Рейтинги:
    +2 / 0 / -0
    Не чё так вышло
    Screenshot_1.png
     
    • Нравится Нравится x 2
  12. TopicStarter Overlay
    Artisteer

    Artisteer Бывалый

    Регистрация:
    14 мар 2018
    Сообщения:
    107
    Лучших ответов:
    1
    Рейтинги:
    +30 / 3 / -0
    Добавил в первое сообщение Идею реализации отдельной страницы с опросами. На Dle 13.2 плагин работает.

    Большая просьба к тем, кто поставил себе на сайт такие опросы, скидывайте сюда скриншоты. Интересно посмотреть, как это выглядит у других.
     
  13. moskitka

    moskitka Бывалый

    Регистрация:
    4 окт 2016
    Сообщения:
    105
    Лучших ответов:
    1
    Рейтинги:
    +11 / 10 / -0
    Блин а у меня 2 проголосавших, и потом вылетает, что вы уже проголосовали)))) хотя я с разных браузеров сидел и с телефона заходил, и кэш чистил
     
Яндекс.Метрика