Вёрстка просмотра списка статей под видео для InstantCMS 1.10.6

+22
2.98K
Всем здравствуйте.


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

Иллюстрация
Иллюстрация

Демо

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

Как пользоваться: скачиваем архив отсюда, распаковываем, заливаем файл com_content_video_view.tpl в папку /templates/_default_/components, картинку — в папку /templates/_default_/images. Открываем файл template.php в директории /templates/ваш_шаблон/, перед закрывающим тэгом body (</body>) вставляем скрипт:

  1.  
  2. <script type="text/javascript">
  3. $(document).on('load ready', function() {
  4. $.each($(".contentlist.contentlist-video .contentlist-video-item .con_title a:contains('*video='), .pathway a:contains('*video='), .con_heading:contains('*video='), .sp-thumbnail:contains('*video='), a:contains('*video=')"), function(i, cuth) {
  5. cuth.innerHTML = cuth.innerHTML.replace('*video=', '<span class="video_youtube_code" style="display:none">') + "</span>";
  6. });
  7. });
  8. </script>
  9.  
Далее переходим в редактирование раздела и устанавливаем шаблоном раздела com_content_video_view.tpl (скриншот).

Важно:
В конце заголовка создаваемой записи пишем *video=КОД_ВИДЕО_ЮТУБ (скриншот). Отсюда будет браться ссылка для вставки в модальное окно.

Благодарность — спасибо было бы достаточно joke
0
Александр Kreator Александр Kreator 6 лет назад #
+ Спасибо

P.s. а если кликнуть не по картинке а по названию, то открывается страница с превьюшкой и текстом. Видео там нигде не должно быть?
+1
Джехутимери Джехутимери 6 лет назад #
Да, внутри видео вставляется штатными средствами через визуальный редактор. Просто на демо забыл разместить.
0
Майкл Майкл 6 лет назад #
И как там будет выглядеть видео, тоже со своим плеером?
0
Джехутимери Джехутимери 6 лет назад #
Нет.
0
Майкл Майкл 6 лет назад #
Лично я не совсем понимаю где можно применить эту разработку. scratch
0
Джехутимери Джехутимери 6 лет назад #
Разумеется, не понимаете, если смешиваете понятия вывода плеера в поп-апе и стилизацию плеера.
0
lezginka.ru lezginka.ru 6 лет назад #
+
+1
Станислав Григорьевич (Мозголом) Станислав Григорьевич (Мозголом) 6 лет назад #
Большое спасибо!
+1
Upliner Upliner 6 лет назад #
Автору однозначно +
За качество. За щедрость.
Интересный способ выкрутится тем, кто желает красиво подать видео контент, но не имея возможности приобрести премиум видео компонент.
Для небольшого видео каталога отлично подойдет.
Да еще и плагином оформлено.
Возьму в коллекцию. Полюбасу пригодится!
+1
edd edd 6 лет назад #
спасибо за работу
на основе вашей верстки я делаю для 2
http://fimgi.ru/Video
немного не доделал
+1
Apsent Apsent 6 лет назад #
Жаль что для 1.10.5 нет

Еще от автора

Портальный шаблон MTheme для InstantCMS 2.6.1 - глобальное обновление
Здравствуйте, дорогие пользователи InstantCMS. Рад предоставить вашему вниманию обновленный шаблон MTheme для InstantCMS 2.6.1.
Виджет "Список групп" для InstantCMS 2.5.1
Обычный виджет вывода списка групп. О нём забыли в коробке Внешний вид. Настройки: Демо | Скачать Установка стандартная.
Портальный шаблон MTheme
Здравствуйте, сообщество. Представляю Вам шаблон MTheme, разработанный для порталов на основе InstantCMS 2.5.1.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.