Flat Cinema для DLE 13.2

Pirat3.05.2019Кинопорталы / Шаблоны для DLE 13.1/13.322 комментария

Интересный адаптивный шаблон Flat Cinema для DLE 13.2 разработан для тематики кино, кинотеатров, сериалов и мультфильмов. Впрочем уже все становится понятно когда читаешь название шаблона и его тематика, и его стиль в котором он выполнен. Цветовая гамма темная, это фишка этого шаблона, как бы атмосфера кинотеатра. Для нас остается не понятно почему именно темные сайты в приоритете у разработчиков и владельцев сайтов, ведь удобнее и приятнее читать со светлой версии. Но главная изюминка это конечно bootstrap фреймворк который применяется для больших экранов а также всех мобильных гаджетов нашего времени и позволяет вам редактировать, дорабатывать и добавлять свои элементы в дизайн шаблона. На главной странице краткая новость разделена на три колонки новости, фильмы и трейлеры, также в этом шаблоне есть парочка разных цветовых вариантов блокировки сайта и несколько вариантов как можно экономить место на мобильных. Шаблон неоднократно проверяли во всех браузерах, работает хорошо.

Автор: Андрей Моргун
Тип шаблона: Оригинал (Адаптивный)
Версия DLE: 11.3/12.0.12.1/13.0/13.1/13.2
Тестировался: Opera, Mozilla, IE
Комплектация: шаблон, инструкция, psd
Размер: ~5.1 Mb

Также рекомендуем

Videohom.ru

13 мая 2018 18:39

Очень хороший шаблон. Использую его на своём сайте. Конечно много чего переделал, но основа просто шикарная. Встречал в сети сайты на этом шаблоне, и был просто шокирован как безрукие ребята уродуют эту прелесть. В работе шаблон можете посмотреть на моем сайте. Если нужна помощь с настройкой (хотя в инструкции все чётко описано) обращайтесь.

Awwa

26 октября 2018 03:59

Videohom.ru,
ДОБРЫЙ ДЕНЬ
а есть почищенный шаб от этих доп полей?
Буду премного благодарен. Пишите в личку

Wotan

27 октября 2018 13:00

Awwa, нету, но можно же самому вычистить от дополнительный полей. Достаточно открыть fullstory.tpl, shortstory.tpl и удалить все поля.

korel

3 ноября 2018 08:17

подскажите как сделать вывод ссылки на картинках, а то на главной у меня нет картинок, в каком файле и в какой строке править?

Wotan

3 ноября 2018 17:20

korel, нужно создать дополнительное поле с названием poster, в архиве с шаблоном идет инструкция в которой все подробно расписано.

korel

4 ноября 2018 06:05

Wotan, создал такое поле poster , но картинок нет не на главной, не в короткой новости!

renegade

18 ноября 2018 11:39

Цитата: korel

Wotan, создал такое поле poster , но картинок нет не на главной, не в короткой новости!

Нужно в шаблоне найти {imige} и заменить на [xfvalue_(значение поля без скобок)], например [xfvalue_poster]... встречаются imige в fullstory shortstory topmenu main и так далее...

korel

2 декабря 2018 05:27

renegade, спасибо, теперь нормально получилось!

shsergej173

25 марта 2019 23:33

адаптируйте пожалуйста для DLE 13.2. Спасибо!

Wotan

28 марта 2019 21:53

shsergej173, можешь брать этот шаблон, там разница незначительная.

KLAXXI

25 мая 2019 18:12

Wotan,
Здравствуйте! У меня два вопроса, в которых я не разобрался сам.
Как добавить качество фильмов по верх постеров как на первом скриншоте?
Скриншот1: https://prnt.sc/nt7v8s

И как сделать так чтобы вместо постера был трейлер, в "Новые трейлеры?" А то у меня как на скриншоте 2.
Скриншот 2: http://prntscr.com/nt7wwb

KLAXXI

25 мая 2019 18:21

KLAXXI,
Странно, с первым вопросом я разобрался очистив кеш своего браузера. А вот со второй проблемой не могу справится.

Wotan

25 мая 2019 22:34

KLAXXI, Изначально автором было задумано чтобы там был постер, если переделывать, то это ковырять шаблон. В качестве примера можешь взять полную новость и по аналогии сделать всплывающее окно в блоке "Трейлер", но это как мне кажется не самый лучшее решение для главной страницы.

KLAXXI

26 мая 2019 01:24

Wotan,
"по аналогии сделать всплывающее окно в блоке "Трейлер", но это как мне кажется не самый лучшее решение для главной страницы".
- Воу! А это мысль. Спасибо за быстрый ответ, Wotan!

Pirat

26 мая 2019 02:14

KLAXXI, Сделать можно по аналогии с кнопкой в полной новости, но нужно понимать, что вместе с iframe ютуба будет ещё тянуть мусор и это замедлит загрузку страницы, а это главная страница. Ради эксперимента можно сделать как предложили, получится допустим 10 iframe документов и посмотреть через инспектор браузера сколько будет весить главная страница, на вскидку размер страницы только из-за 10 роликов вырастит до ~5мб, не учитывая постеров, css, js и размера самого html документа. Я бы порекомендовал поискать на просторах интернета готовые решения. Или как вариант воспользоваться этим, это лишь пример и нужно с напильником доводить до ума и подгонять под дизайн:

Пример куска страницы с кнопкой и всплывающими окнами:

<div class="wrapper">
  <div class="container">
    <div class="row mb-5">
      <div class="col text-center">
        <div class="h1 text-light">YouTube video in Bootstrap Modal</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="card w-75 mx-auto">
          <button class="btn p-0 js-play" type="button" data-toggle="modal" data-target="#modalVideo" data-src="c7nRTF2SowQ" data-title="Официальный анонс-трейлер Battlefield 1"><img class="card-img-top" src="https://img.youtube.com/vi/c7nRTF2SowQ/maxresdefault.jpg" alt="Официальный анонс-трейлер Battlefield 1"/></button>
        </div>
      </div>
      <div class="col">
        <div class="card w-75 mx-auto">
          <button class="btn p-0 js-play" type="button" data-toggle="modal" data-target="#modalVideo" data-src="omWEZI0cT1g" data-title="DOOM - Fight Like Hell Cinematic Trailer"><img class="card-img-top" src="https://img.youtube.com/vi/omWEZI0cT1g/maxresdefault.jpg" alt="DOOM - Fight Like Hell Cinematic Trailer"/></button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalVideo">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title js-title-insert"></h5>
        <button class="close js-pause" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body px-0 py-0">
        <div class="embed-responsive embed-responsive-16by9">
          <div class="embed-responsive-item" id="youTubeIframe"></div>
        </div>
      </div>
    </div>
  </div>
</div>

c7nRTF2SowQ - это id ролика, вместо него нужно вписать дополнительное поле.

В js добавить

var player;
var lastButton = '';
const youtube = 'youTubeIframe';
const titleInsert = '.js-title-insert';
const btnPlay = '.js-play';
const btnPause = '.js-pause';
const modalId = '#modalVideo';
const videoQuality = 'hd720';

function onYouTubePlayerAPIReady() {
  player = new YT.Player(youtube, {
    controls: 2,
    iv_load_policy: 3,
    rel: 0,
    events: {
      onReady: onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  'use strict';
  $(btnPlay).on('click', function() {
    var videoId = $(this).attr('data-src');
    
    if (lastButton == videoId) {
      $(titleInsert).text($(this).attr('data-title'));
      player.playVideo(videoId, 0, videoQuality);
    } else {
      $(titleInsert).text($(this).attr('data-title'));
      player.loadVideoById(videoId, 0, videoQuality);
      lastButton = videoId;
    }
  });
  
  $(btnPause).on('click', function() {
    player.pauseVideo();
  });
  
  $(modalId).on('click', function() {
    player.pauseVideo();
  });
}

Можно пихнуть в отдельный файл и через aviable задать чтобы выводилось только на главной.

Подключаем api

<script src="https://www.youtube.com/iframe_api"></script>

jquery подтянется с движком, bootstrap c шаблоном

Качественные рипы. Недорого.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.