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

2391
Всем здравствуйте.

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




Демо

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

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

Код PHP:
  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
Адаптивный шаблон Anima Strawberry для InstantCMS 1.10.6 | Как сделать аякс-подгрузку контента для InstantCMS 1.10.6
Комментарии (11)
Kreator 31 августа 2015 в 00:23 0
+ Спасибо

P.s. а если кликнуть не по картинке а по названию, то открывается страница с превьюшкой и текстом. Видео там нигде не должно быть?
Джехутимери 31 августа 2015 в 00:25 +1
Да, внутри видео вставляется штатными средствами через визуальный редактор. Просто на демо забыл разместить.
Майкл 31 августа 2015 в 18:18 0
И как там будет выглядеть видео, тоже со своим плеером?
Джехутимери 31 августа 2015 в 19:13 0
Нет.
Майкл 31 августа 2015 в 19:34 0
Лично я не совсем понимаю где можно применить эту разработку. scratch
Джехутимери 31 августа 2015 в 20:13 0
Разумеется, не понимаете, если смешиваете понятия вывода плеера в поп-апе и стилизацию плеера.
lezginka.ru 31 августа 2015 в 12:25 0
+
Большое спасибо!
Upliner 2 сентября 2015 в 12:30 +1
Автору однозначно +
За качество. За щедрость.
Интересный способ выкрутится тем, кто желает красиво подать видео контент, но не имея возможности приобрести премиум видео компонент.
Для небольшого видео каталога отлично подойдет.
Да еще и плагином оформлено.
Возьму в коллекцию. Полюбасу пригодится!
edd 2 сентября 2015 в 22:37 +1
спасибо за работу
на основе вашей верстки я делаю для 2
http://fimgi.ru/Video
немного не доделал
Apsent 4 сентября 2015 в 11:47 +1
Жаль что для 1.10.5 нет